diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/index.html | 34 |
1 files changed, 22 insertions, 12 deletions
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> |