perfected the animation

templates/icons/m-logo-animated.svg

@@ -14,6 +14,12 @@
    xmlns:svg="http://www.w3.org/2000/svg">
   <defs
      id="defs1" />
+  <defs id="custom-defs">
+    <radialGradient id="bg-gradient" r="91%">
+      <stop id="bg-stop" offset="100%" stop-color="rgba(216, 246, 255, 0)" />
+      <stop offset="100%" stop-color="#32a8eb" />
+    </radialGradient>
+  </defs>
   <sodipodi:namedview
      id="namedview1"
      pagecolor="#ffffff"
@@ -23,9 +29,9 @@
      inkscape:pageopacity="0.0"
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
-     inkscape:zoom="2.2753906"
-     inkscape:cx="161.29099"
-     inkscape:cy="375.10043"
+     inkscape:zoom="1.6089441"
+     inkscape:cx="28.590179"
+     inkscape:cy="341.52833"
      inkscape:window-width="2560"
      inkscape:window-height="1371"
      inkscape:window-x="26"
@@ -35,14 +41,14 @@
   <path
      id="border"
      d="m 256,477 c -56.348,0 -98.269,-0.006 -129.636,-3.491 C 94.967,470.02 75.025,463.118 61.953,450.047 48.882,436.975 41.98,417.033 38.491,385.636 35.006,354.269 35,312.348 35,256 35,199.652 35.006,157.731 38.491,126.364 41.98,94.9671 48.882,75.0246 61.953,61.9534 75.025,48.8822 94.967,41.9797 126.364,38.4912 157.731,35.0059 199.652,35 256,35 c 56.348,0 98.269,0.006 129.636,3.4912 31.3969,3.4885 51.3394,10.391 64.4106,23.4622 13.0712,13.0712 19.9737,33.0137 23.4622,64.4106 C 476.9941,157.731 477,199.652 477,256 c 0,56.348 -0.006,98.269 -3.4912,129.636 -3.4885,31.397 -10.391,51.339 -23.4622,64.411 -13.0712,13.071 -33.0137,19.973 -64.4106,23.462 C 354.269,476.994 312.348,477 256,477 Z"
-     fill="#d8f6ff"
+     fill="rgba(216, 246, 255, 0)"
      stroke="#32a8eb"
      stroke-width="8"
      stroke-linejoin="round" />
   <path
      d="M347.694 326.566H360V235.186C360 203.566 340.791 185 310.176 185C290.066 185 270.257 193.413 256.15 208.208C248.046 193.123 232.739 185 212.629 185C194.62 185 177.212 191.382 163.405 202.696L161.004 187.031H152V326.566H164.306V212.269C176.912 201.535 193.12 195.153 209.628 195.153C234.84 195.153 249.847 210.528 249.847 236.927V326.566H262.153V235.186C262.153 227.934 261.253 221.262 259.152 215.46C272.058 202.696 289.466 195.153 307.175 195.153C332.687 195.153 347.694 210.528 347.694 236.927V326.566Z"
      stroke="#32a8eb"
-     fill="#d8f6ff"
+     fill="rgba(216, 246, 255, 0)"
      stroke-width="2"
      id="m-letter" />
   <path
@@ -52,4 +58,10 @@
      stroke-width="8"
      stroke-linejoin="round"
      sodipodi:nodetypes="csc" />
+  <path
+     d="M 507.76664,507.59022 C 453.73997,452.69049 121.4145,522.45057 289.19959,354.47858 c 10.11721,-10.12848 19.63171,-17.88383 30.25282,-22.95349 6.77433,-3.23351 15.74106,-4.08485 28.19639,-5.03375"
+     id="m-letter-start"
+     stroke="#32a8eb"
+     stroke-width="2"
+     sodipodi:nodetypes="cssc" />
 </svg>

templates/portfolio.html

@@ -49,45 +49,70 @@
         easing: 'easeInOutSine',
       })
       
-    /* borderTimeline.add({
-      targets: '#m-logo #border-start',
-      strokeDashoffset: [anime.setDashoffset, 0],
-      duration: 300,
-      //loop: true
-    });*/
       borderTimeline.add({
         targets: '#m-logo #border-start',
         strokeDashoffset: [anime.setDashoffset, -310],
         duration: 2000,
         easing: 'easeOutExpo'
-      //loop: true
-    }, 0); 
+      }, 0)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter-start',
+        strokeDashoffset: [anime.setDashoffset, -447.4],
+        easing: 'easeOutExpo',
+        duration: 2000,
+       }, 0)
       borderTimeline.add({
         targets: '#m-logo #border',
         strokeDashoffset: [anime.setDashoffset, 0],
         easing: 'easeInOutSine',
         duration: 2000,
-      //direction: 'alternate',
-      //loop: true
+        complete: (animation) => {
+          //debugger;
+          const target = animation.animatables[0].target
+          target.setAttribute("fill", "url('#bg-gradient')")
+          var bgAnimationTimeline = anime.timeline()
+          bgAnimationTimeline.add({
+            targets: '#m-logo #bg-gradient #bg-stop',
+            offset: "0%",
+            stopColor: "rgba(216, 246, 255, 1)",
+            easing: 'easeInQuint',
+            duration: 123,
+           }) 
+          bgAnimationTimeline.add({
+            targets: '#m-logo #bg-gradient #bg-stop',
+            offset: "100%",
+            easing: 'easeOutExpo',
+            duration: 333,
+           }) 
+        }
        }, 160)
       borderTimeline.add({
         targets: '#m-logo #m-letter',
         strokeDashoffset: [anime.setDashoffset, 0],
         easing: 'easeInOutSine',
-      duration: 2000,
-      //direction: 'alternate',
-      //loop: true
+        duration: 1800,
        }, 160)
       borderTimeline.add({
         targets: '#m-logo #m-letter',
         easing: 'easeInOutSine',
-      duration: 1200,
+        duration: 333,
         fill: "#32a8eb",
         strokeWidth: "0",
-      //direction: 'alternate',
-      //loop: true
        })
-    // TODO Let's start from bottom right. 
+      // background
+      /*borderTimeline.add({
+        targets: '#m-logo #border',
+        easing: 'easeInCirc',
+        fill: ["rgba(216, 246, 255, 0)", "rgba(216, 246, 255, 1)"],
+        duration: 1500,
+       }, 160)
+      borderTimeline.add({
+        targets: '#m-logo #border',
+        easing: 'easeInCirc',
+        fill: ["rgba(216, 246, 255, 0)", "rgba(216, 246, 255, 1)"],
+        duration: 1500,
+       }, 160) */
+
    </script>
   </aside>
 </header>