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 pt = demo.createSVGPoint();
    demo.addEventListener('mousemove',function(evt) {
        pt.x = evt.clientX;
        pt.y = evt.clientY;
        var svgGlobal = pt.matrixTransform(demo.getScreenCTM().inverse());
        circle.setAttribute("d", circlePath(svgGlobal.x,svgGlobal.y) )
    },false);
    demo.appendChild(circle)
}

$(document).ready( f)