JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="box" viewBox="0 0 500 500" width="500px" height="500px">
    <circle id="circ"
        cx="250" cy="250" r="25" stroke-width="2"
        fill="red" stroke="black" />
</svg>

JavaScript

const box = document.querySelector("#box"),
      circ = document.querySelector("#circ");
function box_coords(ev) {
	const box_rect = box.getBoundingClientRect(),
        x = ev.clientX - box_rect.x, y = ev.clientY - box_rect.y;
  return {x, y};
}

let dragging = false,
    drag_offset = undefined;
circ.addEventListener("mousedown", (ev) => {
  const {x, y} = box_coords(ev),
        dx = circ.cx.baseVal.value - x,
        dy = circ.cy.baseVal.value - y;
  drag_offset = {dx, dy};
  dragging = true;
});
box.addEventListener("mousemove", ev => {
  if (ev.buttons === 0) {
  	dragging = false;
    return;
  }
  if (!dragging) return;
  const {x, y} = box_coords(ev);
  circ.cx.baseVal.value = x + drag_offset.dx;
  circ.cy.baseVal.value = y + drag_offset.dy;
});
document.addEventListener("mouseup", () => dragging = false);