JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<svg id="svg" width="500" height="500">
    <path id="baseLine" stroke="#FFC300" stroke-width="40" fill="red" d="m250 150 v100 h-200 v-200 h200 z" />
    <!--<rect id="baseLine" stroke="#FFC300" stroke-width="40" fill="red" x="20" y="20" rx="20" ry="20" width="150" height="150"/>-->
    <!-- <path id="baseLine" stroke="#FFC300" stroke-width="40" fill="red" d="M 20 250 Q 100 -150 180 210 Q 250 -150 340 250" />-->
    <path class="fillLine" d="M 250 150" stroke="lightgrey" fill="none" stroke-width="40"></path>
    <circle id="circle" cx="250" cy="150" r="20" fill="#000000"></circle>
</svg>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var svg = document.getElementById("svg");
        var path = document.getElementById("baseLine");
        var pathLength = path.getTotalLength();
        var pathBoundingBox = path.getBBox();
        var mid = {
            x: pathBoundingBox.x + pathBoundingBox.width / 2,
            y: pathBoundingBox.y + pathBoundingBox.height / 2
        };
        var pal = path.getPointAtLength(0);
        var trace = document.getElementsByClassName("fillLine");
        var circle = document.getElementById("circle");
        var mousedown = false;
        circle.addEventListener("touchstart", function() {
                console.log("start");
            mousedown = true;
        }, false);
        circle.addEventListener("touchend", function() {
     console.log("end");
            mousedown = false;
        }, false);
        svg.addEventListener("touchend", function() {
     console.log("svg end");
            mousedown = false;
        }, false);
        angle = function(x1, y1, x2, y2) {

            var x = x1 - x2,
                y = y1 - y2;
            if (!x && !y) {
                return 0;
            }
            return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;

        };
        path.addEventListener("touchmove", function(moveEvent) {
 console.log("move");
   ...

CSS

html, body {
  overflow:hidden;
}