diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/index.html | 94 |
1 files changed, 92 insertions, 2 deletions
diff --git a/html/index.html b/html/index.html index 04bb11b..d865614 100644 --- a/html/index.html +++ b/html/index.html @@ -3,6 +3,34 @@ <head> <title>calligram.me</title> <style> + /* latin */ + @font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 400; + src: url('https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfw72.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + /* latin-ext */ + @font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 400; + src: url('https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72j00.woff2') format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + + body { + background: #bcd3dc; + /* Background pattern CC-BY-SA 3.0 from Irfan iLias via + * <a href="https://www.toptal.com/designers/subtlepatterns" + * title="Subtle Patterns">Subtle Patterns</a> */ + background-image: url('./images/symphony_brown.png'); + + color: #000305; + font-family: 'Ubuntu', 'Ubuntu Mono', 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + } + div { width: 100%; height: 100%; @@ -25,7 +53,7 @@ svg path { fill:transparent; - stroke:black; + stroke:none; stroke-width:.02em; } @@ -38,6 +66,8 @@ <body> <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..."> + <input id="the_rainbow" name = "textgradient" type="checkbox" value="Rainbow"> + <input id="the_lines" name = "pathlines" type="checkbox" value="Lines"> <div id="svg-target"></div> <script> const targetDiv = document.getElementById('svg-target'); @@ -47,6 +77,44 @@ svgNode.setAttributeNS(null, 'preserveAspectRatio', 'xMidyMid meet'); targetDiv.appendChild(svgNode); + const rainbowDefs = document.createElementNS('http://www.w3.org/2000/svg', 'defs'); + svgNode.appendChild(rainbowDefs); + const rainbowGradients = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient'); + rainbowGradients.setAttributeNS(null, 'id', 'Rainbow'); + rainbowGradients.setAttributeNS(null, 'x1', '0%'); + rainbowGradients.setAttributeNS(null, 'x2', '0%'); + rainbowGradients.setAttributeNS(null, 'y1', '0%'); + rainbowGradients.setAttributeNS(null, 'y2', '100%'); + rainbowDefs.appendChild(rainbowGradients); + const stop0 = document.createElementNS('http://www.w3.org/2000/svg', 'stop'); + stop0.setAttributeNS(null, 'stop-color', 'red'); + stop0.setAttributeNS(null, 'offset', '0%'); + rainbowGradients.appendChild(stop0); + const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop'); + stop1.setAttributeNS(null, 'stop-color', 'orange'); + stop1.setAttributeNS(null, 'offset', '18%'); + rainbowGradients.appendChild(stop1); + const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop'); + stop2.setAttributeNS(null, 'stop-color', 'yellow'); + stop2.setAttributeNS(null, 'offset', '34%'); + rainbowGradients.appendChild(stop2); + const stop3 = document.createElementNS('http://www.w3.org/2000/svg', 'stop'); + stop3.setAttributeNS(null, 'stop-color', 'green'); + stop3.setAttributeNS(null, 'offset', '50%'); + rainbowGradients.appendChild(stop3); + const stop4 = document.createElementNS('http://www.w3.org/2000/svg', 'stop'); + stop4.setAttributeNS(null, 'stop-color', 'blue'); + stop4.setAttributeNS(null, 'offset', '66%'); + rainbowGradients.appendChild(stop4); + const stop5 = document.createElementNS('http://www.w3.org/2000/svg', 'stop'); + stop5.setAttributeNS(null, 'stop-color', 'indigo'); + stop5.setAttributeNS(null, 'offset', '82%'); + rainbowGradients.appendChild(stop5); + const stop6 = document.createElementNS('http://www.w3.org/2000/svg', 'stop'); + stop6.setAttributeNS(null, 'stop-color', 'violet'); + stop6.setAttributeNS(null, 'offset', '100%'); + rainbowGradients.appendChild(stop6); + const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); svgPath.setAttributeNS(null, 'id', 'svgpath'); svgNode.appendChild(svgPath); @@ -59,7 +127,7 @@ 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!"; + 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'); @@ -97,6 +165,28 @@ let _dur = svgPath.getTotalLength() / ( 25 * ( _BB.width / _BB.height ) ); animate.setAttributeNS(null, 'dur', _dur); }; + + var rainbow_input = document.getElementById('the_rainbow'); + rainbow_input.addEventListener("input", + function () { + if(rainbow_input.checked) { + moving_text.style["fill"] = 'url(#Rainbow)'; + } else { + moving_text.style.removeProperty("fill"); + } + } + ); + + var lines_input = document.getElementById('the_lines'); + lines_input.addEventListener("input", + function () { + if(lines_input.checked) { + svgpath.style["stroke"] = 'black'; + } else { + svgpath.style.removeProperty("stroke"); + } + } + ); </script> </body> </html> |