aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--html/index.html71
1 files changed, 71 insertions, 0 deletions
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..aac71b3
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>scrapple</title>
+ <style>
+ svg, div{
+ width: 100%;
+ height: auto;
+ overflow: visible;
+ display: grid;
+ margin: auto;
+ justify-content: center;
+ }
+
+ svg path {
+ fill:transparent;
+ stroke:black;
+ stroke-width:3px;
+ }
+
+ svg text {
+ font-size:30px;
+ fill: brown;
+ }
+ </style>
+</head>
+<body>
+ <input id="the_text" type="text" value="envelope!" placeholder="Type text here...">
+ <div id="svg-target"></div>
+ <script>
+ const targetDiv = document.getElementById('svg-target');
+ const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ targetDiv.appendChild(svgNode);
+ /*svgNode.setAttributeNS(null, 'viewBox', '0 0 100 100');*/
+
+ const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ svgPath.setAttributeNS(null, 'id', 'svgpath');
+ svgPath.setAttributeNS(null, 'd', "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");
+ svgNode.appendChild(svgPath);
+
+ const textNode = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+ textNode.setAttributeNS(null, 'text-anchor', 'middle');
+ svgNode.appendChild(textNode);
+
+ const textPath = document.createElementNS('http://www.w3.org/2000/svg', 'textPath');
+ textPath.setAttributeNS(null, 'startOffset', '0%');
+ textPath.setAttributeNS(null, 'href', '#svgpath');
+ 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!";
+ textNode.appendChild(textPath);
+
+ const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
+ animate.setAttributeNS(null, 'attributeName', 'startOffset');
+ animate.setAttributeNS(null, 'from', '-15%');
+ animate.setAttributeNS(null, 'to', '115%');
+ animate.setAttributeNS(null, 'begin', '0s');
+ animate.setAttributeNS(null, 'dur', '80s');
+ animate.setAttributeNS(null, 'repeatCount', 'indefinite');
+ textPath.appendChild(animate);
+
+ console.log(Object.entries(svgNode));
+
+ var input = document.getElementById('the_text');
+ input.addEventListener("input", updateValue);
+
+ function updateValue(e) {
+ textPath.textContent = (e.target.value);
+ textPath.appendChild(animate);
+ };
+ </script>
+</body>
+</html>