Анимированная капля продолжает ускользать от мыши ⇐ CSS

[Anonymous]

У меня есть источник света на фоне моего сайта. По сути, он отображается через темно-серый слой, чтобы показать градиент на фоновом слое. Я действительно хочу, чтобы круг трансформировался при перемещении мыши, но сейчас он отклоняется от центра того места, где находится мышь. Я надеялся, что капля останется в центре мыши, как в этом примере. Когда я запускаю свой код, поначалу вращение выглядит нормально, но как только я продолжаю перемещать мышь, капля удаляется от мыши и вращается даже за пределами экрана, прежде чем вернуться к мыши. Но в этом примере капля остается на траектории движения мыши, и если движения нет, капля остается неподвижной, несмотря на то, что продолжает вращаться. Мне интересно, связано ли это с тем, что фоновый слой представляет собой прямоугольник, и как это исправить? Спасибо!
Вот мой код!

Код: Выделить всё

document.addEventListener("DOMContentLoaded", () => {
const blob = document.getElementById("blob");

window.onpointermove = event => {
const {
clientX,
clientY
} = event;

blob.animate({
left: `${clientX}px`,
top: `${clientY}px`
}, {
duration: 2500,
fill: "forwards"
});
};
});

Код: Выделить всё

body {
background-color: #222020;
height: 100vh;
margin: 0;
overflow: hidden;
position: relative;
}

#gradient-color {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #ff0000 100%), linear-gradient(360deg, #0029ff 0%, #8fff00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
background-blend-mode: screen, color-dodge, overlay, difference, normal;
}

#blob {
width: 1px;
height: 1px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: visible;
background-color: white;
mix-blend-mode: multiply;
}

#blob::before {
content: "";
display: block;
width: 200vw;
height: 200vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000;
}

#blob::after {
content: "";
display: block;
width: 34vmax;
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
animation: rotate 20s infinite;
-webkit-animation: rotate 20s infinite;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}

@-webkit-keyframes rotate {
from {
rotate: 0deg;
}
50% {
scale: 1 1.5;
}
to {
rotate: 360deg;
}
}

@keyframes rotate {
from {
rotate: 0deg;
}
50% {
scale: 1 1.5;
}
to {
rotate: 360deg;
}
}

#blur {
height: 100%;
width: 100%;
position: fixed;
backdrop-filter: blur(12vmax);
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... -the-mouse