:root {
  --colors: red, yellow, lime, aqua, blue, magenta, red;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

body {
  width: 100vw;
  height: 100vh;
  --center: var(--mouse-x) var(--mouse-y);
  background-image: radial-gradient(
      circle at var(--center),
      red,
      blue 2%,
      transparent 2%
    ),
    conic-gradient(at var(--center), var(--colors));
}
const root = document.documentElement;

document.addEventListener("mousemove", (evt) => {
  let x = (evt.clientX / innerWidth) * 100;
  let y = (evt.clientY / innerHeight) * 100;

  root.style.setProperty("--mouse-x", `${x}%`);
  root.style.setProperty("--mouse-y", `${y}%`);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.