JSFiddle - React, Tailwind, and code Playground

by Alexander Shutov

HTML

<div id="draw"></div>

CSS

html, body, #draw {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

JavaScript

var draw = SVG('draw');

//var count = 0;

var c;

var mDown = function (eDown) {
    //count = 0;
    c = draw.ellipse(1, 1);

    var mMove = function (eMove) {
        //count++;
        c.cx((eMove.clientX + eDown.clientX) / 2)
            .cy((eMove.clientY + eDown.clientY) / 2)
            .size(Math.abs(eMove.clientX - eDown.clientX), Math.abs(eMove.clientY - eDown.clientY));
    };
    var mUp = function (eUp) {
        //alert(count);
        window.removeEventListener('mousemove', mMove);
        window.removeEventListener('mouseup', mUp);
    };

    window.addEventListener('mousemove', mMove);
    window.addEventListener('mouseup', mUp);
};

window.addEventListener('mousedown', mDown);