JSFiddle - React, Tailwind, and code Playground

HTML

bacon
<svg id="logs" width="400" height="300" style="background:#440">
  <g id="group" transform="translate(30,20) rotate(15) skewX(30)">
      <rect x="10" y="20" width="30" height="20" fill="blue" />
  </g>
</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 group = document.getElementById('group');
 
    var r=10;
    var circle = group.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "path"));
    circle.setAttributeNS(null, "fill", "#f00");
    circle.setAttributeNS(null, "d", circlePath(100,100))

    var groupTransform = demo.getTransformToElement(group);
    var pt = demo.createSVGPoint();
    demo.addEventListener('mousemove',function(evt) {
        pt.x = evt.clientX;
        pt.y = evt.clientY;
        var svgGlobal  = pt.matrixTransform(demo.getScreenCTM().inverse());
        var groupLocal = svgGlobal.matrixTransform(groupTransform);
        circle.setAttribute("d", circlePath(groupLocal.x,groupLocal.y) )
    },false);
}

$(document).ready( f)