aboutsummaryrefslogtreecommitdiffstats
path: root/html/index.html
diff options
context:
space:
mode:
authorjames pannacciulli <jpnc@jpnc.info>2023-06-28 09:10:21 -0400
committerjames pannacciulli <jpnc@jpnc.info>2023-06-28 09:10:21 -0400
commit105a69e3ef2a571f258468eb593f8b4db2133b18 (patch)
treed132d5f04093f8545f69a0293e8963749d125ca0 /html/index.html
parent7610bdee6b2fcce873377f0dcc1165e465a4dee9 (diff)
downloadcalligram.me-105a69e3ef2a571f258468eb593f8b4db2133b18.tar.gz
calligram.me-105a69e3ef2a571f258468eb593f8b4db2133b18.tar.bz2
forward<->backwards loop instead of reset, change src link to about page
Diffstat (limited to 'html/index.html')
-rw-r--r--html/index.html34
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>