From 105a69e3ef2a571f258468eb593f8b4db2133b18 Mon Sep 17 00:00:00 2001
From: james pannacciulli <jpnc@jpnc.info>
Date: Wed, 28 Jun 2023 09:10:21 -0400
Subject: forward<->backwards loop instead of reset, change src link to about
 page

---
 html/index.html | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

(limited to 'html')

diff --git a/html/index.html b/html/index.html
index 88e6af6..b030489 100644
--- a/html/index.html
+++ b/html/index.html
@@ -131,23 +131,32 @@
   textPath.textContent = "envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope!";
     textNode.appendChild(textPath);
     
-    const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
-    animate.setAttributeNS(null, 'attributeName', 'startOffset');
-    animate.setAttributeNS(null, 'from', '-50%');
-    animate.setAttributeNS(null, 'to', '150%');
-    animate.setAttributeNS(null, 'begin', '0s');
-    animate.setAttributeNS(null, 'repeatCount', 'indefinite');
+    const animateLTR = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
+    animateLTR.setAttributeNS(null, 'id', 'animateLTR');
+    animateLTR.setAttributeNS(null, 'attributeName', 'startOffset');
+    animateLTR.setAttributeNS(null, 'from', '-5%');
+    animateLTR.setAttributeNS(null, 'to', '105%');
+    animateLTR.setAttributeNS(null, 'begin', '0s; animateRTL.end');
+    animateLTR.setAttributeNS(null, 'fill', 'freeze');
+
+    const animateRTL = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
+    animateRTL.setAttributeNS(null, 'id', 'animateRTL');
+    animateRTL.setAttributeNS(null, 'attributeName', 'startOffset');
+    animateRTL.setAttributeNS(null, 'from', '105%');
+    animateRTL.setAttributeNS(null, 'to', '-5%');
+    animateRTL.setAttributeNS(null, 'begin', 'animateLTR.end');
+    animateRTL.setAttributeNS(null, 'fill', 'freeze');
     updateSVG("M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z");
-    textPath.appendChild(animate);
-    
-    console.log(Object.entries(svgNode));
+    textPath.appendChild(animateLTR);
+    textPath.appendChild(animateRTL);
     
     var input = document.getElementById('the_text');
     input.addEventListener("input", updateValue);
     
     function updateValue(e) {
       textPath.textContent = (e.target.value);
-      textPath.appendChild(animate);
+      textPath.appendChild(animateLTR);
+      textPath.appendChild(animateRTL);
     };
 
     var svg_input = document.getElementById('the_svg');
@@ -164,7 +173,8 @@
         _BB.x + " " + _BB.y + " " + _BB.width + " " + _BB.height);
       moving_text.style["font-size"] = _BB.width / _BB.height + "em";
       let _dur = svgPath.getTotalLength() / ( 25 * ( _BB.width / _BB.height ) );
-      animate.setAttributeNS(null, 'dur', _dur);
+      animateLTR.setAttributeNS(null, 'dur', _dur);
+      animateRTL.setAttributeNS(null, 'dur', _dur);
     };
 
     var rainbow_input = document.getElementById('the_rainbow');
@@ -190,6 +200,6 @@
     );
   // @license-end
   </script>
-  <a href="https://git.jpnc.info/calligram.me/">src</a>
+  <a href="https://git.jpnc.info/calligram.me/about/">src</a>
 </body>
 </html>
-- 
cgit v1.2.3