JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<svg width=500 height=500>
    <path id='line' d="M 0,250 
    L 0,250 0,0 
    L 0,0 275,0 
    C 220,147 336,44.00 336,110 
    C 336,176 186,7 236,275 
    C 57,243 176,194  110,194 
    C 44,194 S 158,251 0.0000,250 Z" fill='white' width=10 stroke="black"></path>
    <circle id='circle' cx="60" cy="60" r="5" />
</svg>

JavaScript

var line = document.getElementById('line');
//console.dir(line);
//console.log(line.getBoundingClientRect());
var svg = document.getElementsByTagName('svg')[0];
var circles = [];
var points = line.getAttribute('d');
var point = points.match(/(?:\D)|(?:(\d*\.?\d*)\,(\d*\.?\d*))/gmi);
//console.log(points);
var circle = document.getElementById('circle');
circle.parentElement.removeChild(circle);
//console.log(point);
var redo = function () {
   // console.log(point.join(''));
    line.setAttribute('d', point.join(''));

};
point = point.map(function (e, i) {
    e =new String(e);    
    var _e = e.split(',');
    if (_e.length < 2) {
        return e;
    }
            var move = function (x, y) {
            c.setAttribute('cx', x);
            c.setAttribute('cy', y);
            redo();
        };
    var _x = parseFloat(_e[0]),
        _y = parseFloat(_e[1]),
        c = circle.cloneNode(true);
    c.setAttribute('cx', _x);
    c.setAttribute('cy', _y);
    c.setAttribute('r', 10);
    svg.appendChild(c);
    e.c = c;
    c.addEventListener('mousedown', function mousedown(f) {
            var a = {};
            a.x = parseFloat(c.getAttribute('cx')) - f.pageX;
            a.y = parseFloat(c.getAttribute('cy')) - f.pageY;
            var mousemove = function mousemove(g) {
                move((g.pageX + a.x), (g.pageY + a.y));
            },
            mouseup = function mouseup(g) {
                move((g.pageX + a.x), (g.pageY + a.y));
                svg.removeEventListener('mousemove', mousemove);
                svg.removeEventListener('mouseup', mouseup);

                //        c.removeEventListener('mousemove',mousemove);
            };
            svg.addEventListener('mousemove', mousemove);
            svg.addEventListener('mouseup', mouseup);
        });
        c.addEventListener('mousemove', function (e) {
            // console.log(e);
            c.setAttribute('fill', 'red');

        });
        c.addEventListener('mouseleave', function...