feat: adds animation to the MVMF svg (#885)

juanmahidalgo · web-flow · commit 553b3adf6ed2 · 2022-10-17T18:41:29.000+02:00
diff --git a/webapp/src/components/MVMFPage/MVMFBanner/MVMFBanner.tsx b/webapp/src/components/MVMFPage/MVMFBanner/MVMFBanner.tsx
@@ -157,6 +157,7 @@ const MVMFBanner = ({
             </div>
             {isMVMFEnabled ? (
               <Button
+                primary
                 onClick={() =>
                   onNavigate(
                     locations.MVMF22({
diff --git a/webapp/src/images/rabbit.svg b/webapp/src/images/rabbit.svg
@@ -1,10 +1,44 @@
-<svg width="32" height="37" viewBox="0 0 32 37" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_750_459)">
-<path d="M20.8748 8.12735C24.7348 7.22735 19.2948 12.3973 19.2948 12.3973C11.7948 13.8473 7.29484 12.1473 5.60484 8.80734C3.91484 5.46734 6.82484 3.97734 8.60484 4.80734C10.3848 5.63734 14.6648 9.57735 20.8748 8.12735ZM20.8148 5.21734C16.8148 3.35734 17.6648 2.96734 15.3148 0.877345C12.6848 -1.45266 9.46482 1.30733 11.5848 3.92733C13.0948 5.79733 14.5848 6.12733 16.9048 6.42733C17.4343 5.96124 18.0564 5.61247 18.7303 5.40393C19.4042 5.19538 20.1146 5.1318 20.8148 5.21734V5.21734ZM28.8148 20.5673C27.5419 21.646 26.4981 22.9686 25.7449 24.4573C24.7949 26.3573 23.8748 28.9174 24.5848 31.1674C26.0748 35.8474 23.2448 37.1674 21.8948 37.1674C18.0448 37.1674 7.27483 38.1673 5.59483 35.3573C4.97872 35.573 4.32072 35.6418 3.67332 35.5582C3.02593 35.4745 2.40705 35.2407 1.86601 34.8755C1.32497 34.5103 0.876713 34.0237 0.55705 33.4545C0.237386 32.8854 0.0551471 32.2494 0.024823 31.5973C-0.215177 28.9473 1.29481 27.3173 4.13481 27.2073C4.79481 20.7673 11.8749 18.0773 13.3649 17.8173C15.1648 17.4973 14.5448 15.4873 15.0848 13.7673C15.0848 13.7673 15.9648 7.07734 22.1748 7.08734C23.6443 7.0459 25.103 7.35006 26.4335 7.97534C27.7639 8.60062 28.9289 9.52956 29.8348 10.6873C31.7648 12.9373 32.2148 15.9473 31.9148 17.0273C31.672 17.7972 31.2732 18.5088 30.7433 19.1179C30.2134 19.7269 29.5637 20.2203 28.8348 20.5673H28.8148ZM26.8148 12.1674C25.3548 11.5274 23.8148 11.7674 23.4348 12.6974C23.0548 13.6274 23.8848 14.8973 25.3348 15.5273C26.7848 16.1573 28.3348 15.9273 28.7148 14.9973C29.0948 14.0673 28.2848 12.8074 26.8348 12.1674H26.8148Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_750_459">
-<rect width="32" height="37" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 32 37"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+                  <g clip-path="url(#clip0_750_459)">
+                    <path
+      d="M20.8748 8.12735C24.7348 7.22735 19.2948 12.3973 19.2948 12.3973C11.7948 13.8473 7.29484 12.1473 5.60484 8.80734C3.91484 5.46734 6.82484 3.97734 8.60484 4.80734C10.3848 5.63734 14.6648 9.57735 20.8748 8.12735ZM20.8148 5.21734C16.8148 3.35734 17.6648 2.96734 15.3148 0.877345C12.6848 -1.45266 9.46482 1.30733 11.5848 3.92733C13.0948 5.79733 14.5848 6.12733 16.9048 6.42733C17.4343 5.96124 18.0564 5.61247 18.7303 5.40393C19.4042 5.19538 20.1146 5.1318 20.8148 5.21734V5.21734ZM28.8148 20.5673C27.5419 21.646 26.4981 22.9686 25.7449 24.4573C24.7949 26.3573 23.8748 28.9174 24.5848 31.1674C26.0748 35.8474 23.2448 37.1674 21.8948 37.1674C18.0448 37.1674 7.27483 38.1673 5.59483 35.3573C4.97872 35.573 4.32072 35.6418 3.67332 35.5582C3.02593 35.4745 2.40705 35.2407 1.86601 34.8755C1.32497 34.5103 0.876713 34.0237 0.55705 33.4545C0.237386 32.8854 0.0551471 32.2494 0.024823 31.5973C-0.215177 28.9473 1.29481 27.3173 4.13481 27.2073C4.79481 20.7673 11.8749 18.0773 13.3649 17.8173C15.1648 17.4973 14.5448 15.4873 15.0848 13.7673C15.0848 13.7673 15.9648 7.07734 22.1748 7.08734C23.6443 7.0459 25.103 7.35006 26.4335 7.97534C27.7639 8.60062 28.9289 9.52956 29.8348 10.6873C31.7648 12.9373 32.2148 15.9473 31.9148 17.0273C31.672 17.7972 31.2732 18.5088 30.7433 19.1179C30.2134 19.7269 29.5637 20.2203 28.8348 20.5673H28.8148ZM26.8148 12.1674C25.3548 11.5274 23.8148 11.7674 23.4348 12.6974C23.0548 13.6274 23.8848 14.8973 25.3348 15.5273C26.7848 16.1573 28.3348 15.9273 28.7148 14.9973C29.0948 14.0673 28.2848 12.8074 26.8348 12.1674H26.8148Z"
+      fill="url('#gradientAnimation')"
+    />
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_750_459">
+                      <rect width="32" height="37" fill="white" />
+                    </clipPath>
+                    <linearGradient
+      id="gradientAnimation"
+      x1="50%"
+      y1="0%"
+      x2="50%"
+      y2="100%"
+    >
+                      <stop offset="0%" stop-color="#7A5FFF">
+                        <animate
+          attributeName="stop-color"
+          values="#92efeb; #bfffdc; #f7ffdc; #ecc8ff"
+          dur="5s"
+          repeatCount="indefinite"
+        />
+                      </stop>
+
+                      <stop offset="100%" stop-color="#01FF89">
+                        <animate
+          attributeName="stop-color"
+          values="#ecc8ff; #f7ffdc; #bfffdc; #92efeb"
+          dur="4s"
+          repeatCount="indefinite"
+        />
+                      </stop>
+                    </linearGradient>
+                  </defs>
+                </svg>
