experiments

All kinds of coding experiments
Log | Files | Refs | Submodules

index.html (1198B)

      1 <html>
      2 <head>
      3     <title>SVG</title>
      4 </head>
      5 <body>
      6     <div id="drawing"></div>
      7     <input type="range" min="10" max="180" value="95" class="slider" oninput="curveX(this)">
      8     <input type="range" min="1" max="100" value="10" class="slider" oninput="curveY(this)">
      9     <script type="text/javascript">
     10         let x = 95
     11         let y = 10
     12         function makeSVG() {
     13             return `
     14             <svg id="drawing" width="190" height="160" xmlns="http://www.w3.org/2000/svg">
     15                 <circle cx="${x}" cy="${y}" r="3" fill="red"/>
     16                 <path d="M 10 80 Q ${x} ${y} 180 20" stroke="black" fill="transparent"/>
     17             </svg>`;
     18         }
     19         function redraw() {
     20             let drawing = document.getElementById("drawing");
     21             var doc = new DOMParser().parseFromString(makeSVG(), 'application/xml');
     22             drawing.innerHTML = "";
     23             drawing.appendChild(drawing.ownerDocument.importNode(doc.documentElement, true));
     24         }
     25         function curveX(e) {
     26             x = e.value;
     27             redraw();
     28         }
     29         function curveY(e) {
     30             y = e.value;
     31             redraw();
     32         }
     33         redraw()
     34     </script>
     35 </body>
     36 </html>