JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="container" version="1.1" baseProfile="full" style="position:absolute;left:0;top:0;height:100%;width:100%;-ms-transform:scale(1,1);transform:scale(1,1);-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);-ms-transform-origin:0, 0;-webkit-transform-origin:0, 0;-moz-transform-origin:0, 0;-o-transform-origin:0, 0;transform-origin:0, 0"
viewBox="-220.38356461849224 6442.3347962008365 454.7376658611161 114.54981723871151"></svg>

CSS

path {
    fill: none;
    stroke: #42B6DF;
}

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

JavaScript

var svg = document.querySelector('.container');
var svgns = 'http://www.w3.org/2000/svg';

var path = document.createElementNS(svgns, 'path');
svg.appendChild(path);

var points = [];
var Resizer_Instance = null;

var boundingBox = svg.getBoundingClientRect();

var toSVGPath = function(points) {
    var SVGPath = '';
    for (var i = 0; i < points.length; i++) {
        var prefix = (i == 0) ? 'M' : 'L';
        SVGPath += prefix + points[i].x + ' ' + points[i].y + ' ';
    }
    return SVGPath;
};

var create_mousedown = false;

var createStart = function(event) {
    create_mousedown = true;
};

var creating = function(event) {
    if (create_mousedown) {
        var point = svg.createSVGPoint();
        point.x = event.clientX - boundingBox.left;
        point.y = event.clientY - boundingBox.top;
        var t = point.matrixTransform(svg.getScreenCTM().inverse());
        points.push(t);
        path.setAttributeNS(null, 'd', toSVGPath(points));
    }
};

var createEnd = function(event) {
    create_mousedown = true;
    svg.removeEventListener('mousedown', createStart);
    svg.removeEventListener('mousemove', creating);
    svg.removeEventListener('mouseup', createEnd);
    setTimeout(function functionName() {
        Resizer_Instance = new Resizer(path, svg);
    }, 500);
};

svg.addEventListener('mousedown', createStart);
svg.addEventListener('mousemove', creating);
svg.addEventListener('mouseup', createEnd);


var Resizer = (function() {

    function Resizer(element) {
        var that = this;
        that.element = element;
        createSelector.call(that);

        document.addEventListener('mousemove', dragging);
        document.addEventListener('mouseup', dragend);

    }

    var RAD2DEG = 180 / Math.PI;

    function angleBetweenPoints(p1, p2) {
        var angle = null;
        if (p1.x == p2.x && p1.y == p2.y)
            angle = Math.PI / 2;
        else
            angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
        return (angle * RAD2DEG)...