rotate, mouse move, delay

span
{position: absolute; width: 40px; height: 5px; border-radius: 3px; background: #0ff; pointer-events: none; transform-origin: 50px; 
box-shadow: 0 0 10px #0ff, 0 0 20px #0ff; 
transition: 0.1s;
animation: animate 10s linear infinite;
}

@keyframes animate {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

const spans = [];
const numSpans = 30;

for(let i = 0; i < numSpans; i++){
    const span = document.createElement('span');
    document.body.appendChild(span);
    spans.push(span);
}

document.addEventListener('mousemove', (event)=>{
    const mouseX = event.clientX;
    const mouseY = event.clientY;

    spans.forEach((span,index)=>{
        const delay = Math.random() * 400;
        setTimeout(()=>{
            span.style.left = `${mouseX - 50}px`;
            span.style.top =  `${mouseY}px`;

            span.style.rotate = `${mouseY + index * 12}deg`;
            span.style.filter = `hue-rotate(${mouseY + index * 12}deg)`;
        },delay)

    })
})