<!DOCTYPE html>
<html>
<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%;
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:none;
stroke-width:.02em;
}
svg text {
font-size:30px;
fill: brown;
}
</style>
</head>
<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>
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt
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);
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);
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');
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 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', '-50%');
animate.setAttributeNS(null, 'to', '150%');
animate.setAttributeNS(null, 'begin', '0s');
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));
var input = document.getElementById('the_text');
input.addEventListener("input", updateValue);
function updateValue(e) {
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);
};
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");
}
}
);
// @license-end
</script>
<a href="https://git.jpnc.info/calligram.me/">src</a>
</body>
</html>