aboutsummaryrefslogtreecommitdiffstats
path: root/html/index.html
diff options
context:
space:
mode:
authorjames pannacciulli <jpnc@jpnc.info>2023-06-28 00:39:40 -0400
committerjames pannacciulli <jpnc@jpnc.info>2023-06-28 00:39:40 -0400
commitdda9153a846716c1a67266c3645233910832ebfa (patch)
tree758053ef1a7ae4014fa2e01bd69ec5c631ba5010 /html/index.html
parent91a13b3a2278e46eaf86ef2d9500d6f51b5a787d (diff)
downloadcalligram.me-dda9153a846716c1a67266c3645233910832ebfa.tar.gz
calligram.me-dda9153a846716c1a67266c3645233910832ebfa.tar.bz2
add rainbow/show lines checkboxes, background image / ubuntu font
Diffstat (limited to 'html/index.html')
-rw-r--r--html/index.html94
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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-19 02:11:50 +0000