JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="svg"></svg>

JavaScript

let svg = document.getElementById('svg');
function addCircle(color) {
let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  circle.setAttribute('cx', '' + Math.random() * 100);
  circle.setAttribute('cy', '' + Math.random() * 100);
  circle.setAttribute('r', '3');  
  circle.setAttribute('fill', color);
  svg.appendChild(circle);
}

// effect only shows with a massive amount of circles
let status = 'started';
for (let i = 0; i < 100000; i++) {
	addCircle('red');
}
console.log(status = 'children created');
// add listeners
let downTime;
svg.addEventListener('pointerdown', e => {
	downTime = performance.now();
  console.log(status = 'mouse pressed');
  // comment next line to see the difference
  document.body.style.cursor = "move";  
});
svg.addEventListener('pointermove', e => {
	if (status === 'mouse pressed') {
    console.log(status = 'mouse moved', performance.now() - downTime);
  }
});