: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}%`);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.