diff options
| author | james pannacciulli <jpnc@jpnc.info> | 2023-06-27 22:54:00 -0400 |
|---|---|---|
| committer | james pannacciulli <jpnc@jpnc.info> | 2023-06-27 22:54:58 -0400 |
| commit | 91a13b3a2278e46eaf86ef2d9500d6f51b5a787d (patch) | |
| tree | 3249de6a1deeae2217fa1181465565ee118d7a42 /html/index.html | |
| parent | 053a738497b4f0c439afcebf3ccf7b52274f4e00 (diff) | |
| download | calligram.me-91a13b3a2278e46eaf86ef2d9500d6f51b5a787d.tar.gz calligram.me-91a13b3a2278e46eaf86ef2d9500d6f51b5a787d.tar.bz2 | |
scale/center SVG, user input for path, adaptive font/speed/viewBox
Diffstat (limited to 'html/index.html')
| -rw-r--r-- | html/index.html | 83 |
1 files changed, 57 insertions, 26 deletions
diff --git a/html/index.html b/html/index.html index aac71b3..04bb11b 100644 --- a/html/index.html +++ b/html/index.html @@ -1,45 +1,59 @@ <!DOCTYPE html> <html> <head> - <title>scrapple</title> + <title>calligram.me</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; - } + div { + width: 100%; + height: 100%; + overflow: visible; + display: block; + margin: auto; + position: absolute; + text-align: center; + } + + svg { + width: 100%; + height: 90%; + overflow: visible; + display: flex; + justify-content: center; + align-self: stretch; + position: absolute; + } + + svg path { + fill:transparent; + stroke:black; + stroke-width:.02em; + } + + svg text { + font-size:30px; + fill: brown; + } </style> </head> <body> - <input id="the_text" type="text" value="envelope!" placeholder="Type text here..."> + <input id="the_text" type="text" value="" placeholder="Place text here..."> + <input id="the_svg" type="text" value="" placeholder="Paste SVG path 'd' field here..."> <div id="svg-target"></div> <script> const targetDiv = document.getElementById('svg-target'); const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svgNode.setAttributeNS(null, 'viewBox', '0 0 1500 1000'); + svgNode.setAttributeNS(null, 'width', '100%'); + svgNode.setAttributeNS(null, 'preserveAspectRatio', 'xMidyMid meet'); 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'); + textNode.setAttributeNS(null, 'id', 'moving_text'); svgNode.appendChild(textNode); const textPath = document.createElementNS('http://www.w3.org/2000/svg', 'textPath'); @@ -50,11 +64,11 @@ 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, 'from', '-50%'); + animate.setAttributeNS(null, 'to', '150%'); animate.setAttributeNS(null, 'begin', '0s'); - animate.setAttributeNS(null, 'dur', '80s'); animate.setAttributeNS(null, 'repeatCount', 'indefinite'); + 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)); @@ -66,6 +80,23 @@ textPath.textContent = (e.target.value); textPath.appendChild(animate); }; + + var svg_input = document.getElementById('the_svg'); + svg_input.addEventListener("input", + function () { + updateSVG(svg_input.value); + } + ); + + function updateSVG(_d) { + svgPath.setAttributeNS(null, 'd', _d); + let _BB = svgPath.getBBox(); + svgNode.setAttributeNS(null, 'viewBox', + _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); + }; </script> </body> </html> |