From dda9153a846716c1a67266c3645233910832ebfa Mon Sep 17 00:00:00 2001
From: james pannacciulli <jpnc@jpnc.info>
Date: Wed, 28 Jun 2023 00:39:40 -0400
Subject: add rainbow/show lines checkboxes, background image / ubuntu font
---
html/index.html | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 92 insertions(+), 2 deletions(-)
(limited to 'html')
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>
--
cgit v1.2.3