JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body bgcolor="lightgray">
<input id="text" readonly="true" />

<div id="svg-container">
  
</div>

CSS

#text {
  width: 100%;
}
#svg-container {
    background: white;
    height: 750px;
  position: relative;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

JavaScript

$(function () {
    var $text = $('#text')
    var $container = $('#svg-container')
    var draw = Raphael('svg-container', $container.width(), $container.height());
    
    var pathObj = null
    var paths = []
    var pathString = ''
    
    var clickTimeout = null
    
    function setAlertPoint(x, y) {
        draw.circle(x, y, 2).attr({fill: 'red', 'stroke-width': 0})
    }
    
    function checkIsIntersectWithSomePath() {
        var intersected = null
        for (var i = 0; i < paths.length; i++) {
            intersected = Raphael.pathIntersection(paths[i].attrs.path, pathObj.attrs.path)
            for (var j = 0; j < intersected.length; j++) {
                //console.log(intersected[j].segment1, intersected[j].segment2)
                setAlertPoint(intersected[j].x, intersected[j].y)
            }
        }
    }
    
    function updatePath(event) {
        var x = event.pageX - $container.offset().left;
        var y = event.pageY - $container.offset().top;
        var tempPathString = pathString
        if (!pathString.match(/M/) || pathString.match(/Z/)) {
            tempPathString = 'M ' + x + ',' + y
        } else {
            tempPathString += ' L' + x + ',' + y
        }
        if (event.type === 'click') {
            pathString = tempPathString
            $text.val(pathString)
        }
        redrawCurrentPath(tempPathString);
    }
    
    function redrawCurrentPath(tempPathString) {
        pathObj.attr({path: tempPathString || pathString});
    }
    
    $container.mousemove(function (event) {
        if (pathObj)
            updatePath(event)
            })
    
    $container.click(function (event) {
        clickTimeout = setTimeout(function () {
            if (!pathObj) {
                $text.val('')
                pathObj = draw.path().attr({fill: 'rgba(126, 126, 126, .1)'})
            }
            updatePath(event)
        }, 100)
        
    })
    $container.dblclick(function (event) {
        clickTimeout ?...