chore: fix circuit pulse

Author: sudorandom

assets/scss/_kmcd.scss

@@ -604,3 +604,37 @@ ul.icons li a {
     }
   }
 }
+
+@keyframes circuit-pulse-vertical {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(1740px);
+  }
+}
+
+@keyframes circuit-pulse-horizontal {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(1180px);
+  }
+}
+
+.circuit-pulse-vertical,
+.circuit-pulse-horizontal {
+  animation-duration: 1.6s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+}
+
+.circuit-pulse-vertical {
+  animation-name: circuit-pulse-vertical;
+}
+
+.circuit-pulse-horizontal {
+  animation-name: circuit-pulse-horizontal;
+}

layouts/partials/circuit-bg.html

@@ -176,29 +176,15 @@
     if (!mask) return;
 
     const rect = document.createElementNS(circuitSvgNS, 'rect');
+    rect.setAttribute('class', 'circuit-pulse-vertical');
     rect.setAttribute('x', '0');
     rect.setAttribute('y', '-240');
     rect.setAttribute('width', '300');
     rect.setAttribute('height', '240');
     rect.setAttribute('fill', 'url(#sweep-grad)');
 
-    const anim = document.createElementNS(circuitSvgNS, 'animate');
-    anim.setAttribute('attributeName', 'y');
-    anim.setAttribute('from', '-240');
-    anim.setAttribute('to', '1500');
-    anim.setAttribute('dur', '1.6s');
-    anim.setAttribute('begin', 'indefinite');
-    anim.setAttribute('repeatCount', '1');
-    anim.setAttribute('fill', 'freeze');
-    anim.setAttribute('keyTimes', '0; 1');
-    anim.setAttribute('keySplines', '0.4 0 0.2 1');
-    anim.setAttribute('calcMode', 'spline');
-
-    rect.appendChild(anim);
     mask.appendChild(rect);
 
-    anim.beginElement();
-
     setTimeout(() => {
       rect.remove();
     }, 1800);
@@ -209,29 +195,15 @@
     if (!mask) return;
 
     const rect = document.createElementNS(circuitSvgNS, 'rect');
-    rect.setAttribute('x', '-300');
+    rect.setAttribute('class', 'circuit-pulse-horizontal');
+    rect.setAttribute('x', '-180');
     rect.setAttribute('y', '0');
     rect.setAttribute('width', '180');
     rect.setAttribute('height', '80');
     rect.setAttribute('fill', 'url(#sweep-grad-horizontal)');
 
-    const anim = document.createElementNS(circuitSvgNS, 'animate');
-    anim.setAttribute('attributeName', 'x');
-    anim.setAttribute('from', '-180');
-    anim.setAttribute('to', '1000');
-    anim.setAttribute('dur', '1.6s');
-    anim.setAttribute('begin', 'indefinite');
-    anim.setAttribute('repeatCount', '1');
-    anim.setAttribute('fill', 'freeze');
-    anim.setAttribute('keyTimes', '0; 1');
-    anim.setAttribute('keySplines', '0.4 0 0.2 1');
-    anim.setAttribute('calcMode', 'spline');
-
-    rect.appendChild(anim);
     mask.appendChild(rect);
 
-    anim.beginElement();
-
     setTimeout(() => {
       rect.remove();
     }, 1800);
@@ -249,7 +221,7 @@
     spawnPulseHorizontal();
   }
 
-  // Trigger the page-load pulse automatically on DOM load
+  // Trigger the page-load pulse automatically on DOM load.
   document.addEventListener('DOMContentLoaded', () => {
     randomizeCircuitDesign();
     spawnPulseVertical();