<svg class="canvas" viewBox="0 0 200 200">

</svg>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background: hsl(0, 0%, 96%);
}

.canvas {
  width: 75vmin;
  height: 75vmin;
  background: hsl(0, 0%, 100%);
}

import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
import {
  map,
} from "https://cdn.skypack.dev/@georgedoescode/generative-utils@1.0.0";

const svg = SVG(".canvas");

// create a red circle in the center of the SVG
const circle = svg.ellipse(50, 50).cx(100).cy(100).attr('fill', 'tomato')

// listen for mouse movement
window.addEventListener('mousemove', (e) => {
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  
  // map the mouse's x and y position on the page to a more sensible radius value (25 - 75)
  const radiusX = map(mouseX, 0, window.innerWidth, 25, 75);
  const radiusY = map(mouseY, 0, window.innerHeight, 25, 75);
  
  // update the circle's radius
  circle.radius(radiusX, radiusY)
})