commit 84a7f3cb09fcf7773ddf7d69ff9fd3f77da324b9 parent cc644f65692702a61518fea06dc204d2e7025356 Author: Vetle Haflan <vetle@haflan.dev> Date: Tue, 16 Nov 2021 22:26:55 +0100 Merge branch 'master' of gl.haflan.dev:general/experiments Diffstat:
| A | web/beziersvg/index.html | | | 36 | ++++++++++++++++++++++++++++++++++++ |
1 file changed, 36 insertions(+), 0 deletions(-)
diff --git a/web/beziersvg/index.html b/web/beziersvg/index.html @@ -0,0 +1,36 @@ +<html> +<head> + <title>SVG</title> +</head> +<body> + <div id="drawing"></div> + <input type="range" min="10" max="180" value="95" class="slider" oninput="curveX(this)"> + <input type="range" min="1" max="100" value="10" class="slider" oninput="curveY(this)"> + <script type="text/javascript"> + let x = 95 + let y = 10 + function makeSVG() { + return ` + <svg id="drawing" width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <circle cx="${x}" cy="${y}" r="3" fill="red"/> + <path d="M 10 80 Q ${x} ${y} 180 20" stroke="black" fill="transparent"/> + </svg>`; + } + function redraw() { + let drawing = document.getElementById("drawing"); + var doc = new DOMParser().parseFromString(makeSVG(), 'application/xml'); + drawing.innerHTML = ""; + drawing.appendChild(drawing.ownerDocument.importNode(doc.documentElement, true)); + } + function curveX(e) { + x = e.value; + redraw(); + } + function curveY(e) { + y = e.value; + redraw(); + } + redraw() + </script> +</body> +</html>