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

body {
  width: 100vw;
  height: 100vh;
  background-image: conic-gradient(
    at var(--mouse-x) var(--mouse-y),
    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}%`);
});