JSFiddle - React, Tailwind, and code Playground

HTML

bacon
<svg id="logs" width="400" height="300" style="background:#440"></svg>
eggs

JavaScript

function circlePath(x,y)
{
    var r = 10
    return "M "+(x-r)+","+y+
        " A "+r+","+r+" 0 1 0 "+(x+r)+","+y+
        " A "+r+","+r+" 0 1 0 "+(x-r)+","+y+
        " Z"
}

f=function() {
    var demo = document.getElementById("logs")
    
    var r=10
    var circle = document.createElementNS("http://www.w3.org/2000/svg", "path");
    circle.setAttributeNS(null, "fill", "#f00");
    circle.setAttributeNS(null, "d", circlePath(100,100))
    
    var box = demo.getBoundingClientRect();

    demo.onmousemove = function(evt) {
        var x = evt.clientX - box.left
        var y = evt.clientY - box.top
        console.log(box);
        debugEvent = evt;
        circle.setAttributeNS(null, "d", circlePath(x,y))
    }
    demo.appendChild(circle)
}

$(document).ready( f)