JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="400" height="400">
  <g id="g">
    <circle cx="300" cy="300" r="40" style="fill: rgb(200, 20, 20);"></circle>
  </g>
</svg>

<div>
  Step: <input type="range" id="input" min="1" max="100" value="1">
</div>

JavaScript

const g = document.getElementById("g")
const input = document.getElementById("input");

let tx = -108071;
let ty = -108071;
let k = 399;

let stepSize = 1;

const move = () => {
	tx -= 0.1 * stepSize;
  ty -= 0.1 * stepSize;
  g.setAttribute("transform", `translate(${tx},${ty}) scale(${k})`)
  
  window.setTimeout(move, 10 * stepSize);
}

input.addEventListener("input", event => {
	stepSize = parseInt(event.target.value);
});

move();