JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="100%"
 onload="Init()" >

<script type="text/ecmascript">

var svgDocument;
var svgRoot;
var newP;
var bmousedown=0;
var myCirc;

function Init() {
    
    svgRoot= document.getElementsByTagName("svg")[0];
    document.addEventListener("mousedown", onMouseDown, false);
    document.addEventListener("mousemove", onMouseMove, false);
    document.addEventListener("mouseup", onMouseUp, false);
    
    newP = svgRoot.createSVGPoint();
    myCirc = document.getElementById("mycirc");
}

function getMouse(evt) {
   var position = svgRoot.createSVGPoint();
   position.x = evt.clientX;
   position.y = evt.clientY;
   return position;
}

function onMouseDown(evt) {
   bmousedown=1;
   newP=getMouse(evt);
   doUpdate();
}

function onMouseMove(evt){
   if(bmousedown) {
       newP=getMouse(evt);
       doUpdate();
   }
}

function onMouseUp(){
       bmousedown=0;
}

function doUpdate(){
   myCirc.setAttributeNS(null, "x", newP.x );
   myCirc.setAttributeNS(null, "y", newP.y );
}

</script>


<rect id="mycirc" fill:"#bbeeff" x="0" y="0" width="80" height="80" transform="rotate(45,50 50)"
   pointer-events="visible"/>

</svg>