From af988cd84f5140889d1b284b870ab27156b8f9c8 Mon Sep 17 00:00:00 2001
From: KaizIqbal <24286590+KaizIqbal@users.noreply.github.com>
Date: Sun, 2 Aug 2020 09:54:16 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=B3=EF=B8=8F=E2=80=8D=F0=9F=8C=88=20Sm?=
 =?UTF-8?q?oooth=20Animations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/svg/wait.svg | 114 ++++++++++++++++++++++++++++-------------------
 1 file changed, 67 insertions(+), 47 deletions(-)

diff --git a/src/svg/wait.svg b/src/svg/wait.svg
index e27ba0c..73f548e 100644
--- a/src/svg/wait.svg
+++ b/src/svg/wait.svg
@@ -1,58 +1,78 @@
 <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <!-- Main Group -->
-    <g opacity="0.01">
-        <path opacity="0.01" d="M200 0H0V200H200V0Z" fill="white" />
+    <g clip-path="url(#clip0)">
+        <g opacity="0.01">
+            <path opacity="0.01" d="M200 0H0V200H200V0Z" fill="white" />
+        </g>
+        <g filter="url(#filter0_d)">
+            <circle cx="99.5" cy="100.5" r="85.5" fill="black" fill-opacity="0.46" />
+        </g>
+
+        <g>
+            <animateTransform attributeName="transform" type="rotate" from="360 100 100" to="0 100 100" additive="sum"
+                begin="0s" dur="1.40s" repeatCount="indefinite" />
+            <path
+                d="M38 161.5C22.3037 145.897 13 123.866 13 100.088C13 92.2728 14.0484 84.7003 16.0132 77.5012C16.0214 77.4964 16.0296 77.4916 16.0378 77.4868C45.244 60.3581 83.1377 70.3323 100 100C66.6763 100 38.6522 127.79 38 161.5Z"
+                fill="url(#paint0_linear)" />
+            <path
+                d="M38 161.366C38 161.356 38 161.345 38 161.335C38 127.461 66.3932 100 99.7784 100C83.0856 129.336 91.6623 166.848 120.574 183.785C120.716 183.868 120.858 184.418 121 184.5C113.898 186.435 106.43 187 98.7238 187C74.9731 187 53.4858 177.195 38 161.366Z"
+                fill="url(#paint1_linear)" />
+            <path
+                d="M121 184.5C92.3135 167.276 82.7818 129.33 99.5002 100C116.338 129.54 153.726 139.661 182.89 122.606C182.927 122.584 183.327 122.627 183.364 122.606C175.457 152.635 151.089 176.695 121 184.5Z"
+                fill="url(#paint2_linear)" />
+            <path
+                d="M183.074 123.7C184.982 116.464 186 108.856 186 101.005C186 76.7491 176.285 54.8061 160.607 39C160.199 73.254 132.75 100 99.5 100C116.255 129.991 153.8 141.168 182.82 123.853C182.905 123.802 182.99 123.752 183.074 123.7Z"
+                fill="url(#paint3_linear)" />
+            <path
+                d="M161 39.6587C160.781 73.0214 132.844 100 99.5 100C116.239 70.9465 107.189 33.7959 78.1967 17.0217C78.1312 16.9838 78.0656 16.5376 78 16.5C85.0529 14.6028 92.4636 14 100.108 14C123.924 14 145.471 23.8149 161 39.6587Z"
+                fill="url(#paint4_linear)" />
+            <path
+                d="M16 77.9762C24.1078 48.1524 47.9003 24.2337 78 16.5C106.732 33.5633 116.59 71.0269 99.8376 100C83.0212 70.3405 45.1228 60.8287 16.0244 77.9618C16.0163 77.9666 16.0081 77.9714 16 77.9762Z"
+                fill="url(#paint5_linear)" />
+        </g>
     </g>
-
-    <!-- Animation -->
-    <animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 0 0; 360 0 0" dur="1s"
-        additive="sum" repeatCount="indefinite" />
-
-    <!-- Paths -->
-    <path
-        d="M77.2817 23.2292C84.4897 21.1272 92.1133 20 100 20C122.213 20 142.339 28.9418 156.972 43.4224C156.991 44.0126 157 44.6052 157 45.2C157 76.0175 131.563 101 100.5 101C116.032 74.3113 107.07 40.1846 80.1694 24.7758C79.2158 24.2295 78.2529 23.7141 77.2817 23.2292Z"
-        fill="url(#paint0_linear)" />
-    <path
-        d="M178.376 121.527C180.089 114.971 181 108.092 181 101C181 78.1821 171.565 57.568 156.384 42.8459C156.395 43.3077 156.4 43.7709 156.4 44.2352C156.4 75.8094 131.649 101 100.5 101C116.074 128.344 150.068 138.118 177.044 122.331C177.493 122.068 177.938 121.8 178.376 121.527Z"
-        fill="url(#paint1_linear)" />
-    <path
-        d="M121.609 179.086C121.44 178.989 121.271 178.891 121.102 178.792C94.2291 163.067 85.0216 128.238 100.537 101C116.052 128.238 150.414 137.57 177.287 121.844C177.689 121.609 178.087 121.37 178.48 121.127C171.303 149.194 149.466 171.393 121.609 179.086Z"
-        fill="url(#paint2_linear)" />
-    <path
-        d="M44.0405 159.562C44.0137 158.845 44 158.124 44 157.4C44 126.251 69.437 101 100.5 101C84.9683 127.976 93.9297 162.469 120.831 178.044C121.328 178.332 121.829 178.612 122.331 178.883C115.237 180.913 107.746 182 100 182C78.2944 182 58.583 173.463 44.0405 159.562Z"
-        fill="url(#paint3_linear)" />
-    <path
-        d="M44.208 159.722C28.6807 144.964 19 124.113 19 101C19 94.5672 19.75 88.3095 21.167 82.3097C22.0171 81.7422 22.8867 81.1949 23.7759 80.6689C50.4644 64.8818 85.0913 73.656 100.5 101C69.6826 101 44.2002 127.191 44.2002 158.765C44.2002 159.084 44.2031 159.403 44.208 159.722Z"
-        fill="url(#paint4_linear)" />
-    <path
-        d="M77.939 23.0405C77.7771 23.0862 77.6155 23.1324 77.454 23.1791C54.4217 29.8452 35.433 46.8615 25.7403 68.599C23.8121 73.0119 22.2658 77.6298 21.1431 82.411C21.1431 82.411 21.143 82.411 21.1431 82.411C21.151 82.3772 21.159 82.3434 21.167 82.3097C22.0171 81.7422 22.8867 81.1949 23.7759 80.6689C50.4539 64.888 85.0641 73.6491 100.482 100.968C115.971 74.0552 106.76 39.6574 79.8979 24.1228C79.249 23.7477 78.5962 23.387 77.939 23.0405Z"
-        fill="url(#paint5_linear)" />
-
-    <!-- Linear Gredients for Each Shapes -->
     <defs>
-        <linearGradient id="paint0_linear" x1="108" y1="8" x2="108" y2="101" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#FBB114" />
-            <stop offset="1" stop-color="#FF9508" />
-        </linearGradient>
-        <linearGradient id="paint1_linear" x1="147" y1="22" x2="147" y2="130" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#FF645D" />
-            <stop offset="1" stop-color="#FF4332" />
-        </linearGradient>
-        <linearGradient id="paint2_linear" x1="143.5" y1="101" x2="143.5" y2="186" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#CA70E1" />
-            <stop offset="1" stop-color="#B452CB" />
-        </linearGradient>
-        <linearGradient id="paint3_linear" x1="93" y1="101" x2="93" y2="195" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#14ADF6" />
-            <stop offset="1" stop-color="#1191F4" />
-        </linearGradient>
-        <linearGradient id="paint4_linear" x1="53.5" y1="73" x2="53.5" y2="181" gradientUnits="userSpaceOnUse">
+        <filter id="filter0_d" x="0" y="6" width="199" height="199" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dy="5" />
+            <feGaussianBlur stdDeviation="6.5" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear" x1="48.566" y1="69.1662" x2="48.566" y2="186.344"
+            gradientUnits="userSpaceOnUse">
             <stop stop-color="#52CF30" />
             <stop offset="1" stop-color="#3BBD1C" />
         </linearGradient>
-        <linearGradient id="paint5_linear" x1="57.5" y1="17" x2="57.5" y2="101" gradientUnits="userSpaceOnUse">
+        <linearGradient id="paint1_linear" x1="90.6631" y1="100" x2="90.6631" y2="202.225"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#14ADF6" />
+            <stop offset="1" stop-color="#1191F4" />
+        </linearGradient>
+        <linearGradient id="paint2_linear" x1="146.222" y1="100" x2="146.222" y2="192.183"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#CA70E1" />
+            <stop offset="1" stop-color="#B452CB" />
+        </linearGradient>
+        <linearGradient id="paint3_linear" x1="150.499" y1="13.8093" x2="150.499" y2="132.264"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FF645D" />
+            <stop offset="1" stop-color="#FF4332" />
+        </linearGradient>
+        <linearGradient id="paint4_linear" x1="108.191" y1="-1.2405" x2="108.191" y2="100"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FBB114" />
+            <stop offset="1" stop-color="#FF9508" />
+        </linearGradient>
+        <linearGradient id="paint5_linear" x1="52.8082" y1="8.83735" x2="52.8082" y2="100.035"
+            gradientUnits="userSpaceOnUse">
             <stop stop-color="#FFD305" />
             <stop offset="1" stop-color="#FDCF01" />
         </linearGradient>
+        <clipPath id="clip0">
+            <rect width="200" height="200" fill="white" />
+        </clipPath>
     </defs>
 </svg>
\ No newline at end of file