aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--html/index.html83
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>