JSFiddle - React, Tailwind, and code Playground

by michapixel

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div id="char">
    <svg></svg>
</div>

CSS

#char {
    position: absolute;
   
    border:1px dashed red ;
    width: 550px;
    height: 550px;
}
svg {
    position: absolute;
    left:0;
    top:0;
    width: 350px;
    height: 350px;
    border:1px dashed blue;
}

JavaScript

var s = Snap('#char svg');
var circleX = 100, 
    circleY = 100, 
    circleRadius = 25;
var bigCircle = s.circle(circleX, circleY, circleRadius);
var L1 = s.path("M "+circleX+" "+circleY +"L 0 0").attr({stroke: "blue"});
// By default its black, lets change its attributes
bigCircle.attr({
    fill: "white",
    stroke: "#000",
    strokeWidth: 0
});
var c1 = s.circle(0,0,10).attr({ fill: "black" });

function OnMouseMove(evt) {
    ox = document.getElementById('char').offsetLeft;
    oy = document.getElementById('char').offsetTop;
    var x = evt.clientX;
    var y = evt.clientY;
    
    L1.attr({ d: "M "+(circleX)+" "+(circleY) +"L "+ x +" " + y });
    var totalLength = L1.getTotalLength();
    if (totalLength < circleRadius) {
        c1.attr({ cx: evt.clientX , cy: evt.clientY });
    } else {
        var PAL = L1.getPointAtLength(circleRadius - 12);
        c1.attr({ cx: PAL.x , cy: PAL.y });
    }
}
document.onmousemove = OnMouseMove;