diff options
| -rw-r--r-- | html/index.html | 71 |
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> |