createElement, mouse move

const rounds = [];
const numrd = 20;
for(let i= 0; i<numrd; i++){
    const round = document.createElement('span');
    document.body.appendChild(round);
    round.classList.add('round');
    rounds.push(round);
}
document.addEventListener('mousemove', (event)=> {
    const mouseX = event.clientX;
    const mouseY = event.clientY;
    rounds.forEach((span, index) => {
        const delay = Math.random() * 200;
        setTimeout(() => {
            span.style.left = `${mouseX + 20 + index}px`;
            span.style.top = `${mouseY + index }px`;
        }, delay)
    })
})

span.round{position: absolute; width: 20px; height: 20px; border-radius: 50%; 
 background-color: rgb(187, 255, 232);box-shadow: 0px 0px 20px rgba(125, 229, 255, 0.5); 
 pointer-events: none; transition: all 0.1s;}