title
A prototype
span{ position:absolute; border-radius:100%; }
let body = document.body let shapes = ["5px solid pink","8px inset pink", "7px outset blue", "8px dotted white", "10px groove white", "4px solid black","5px dashed gold"] let enableCall = true; document.addEventListener('mousemove', function(e) { if (!enableCall) return; enableCall = false; let circle = document.createElement('span'); let x = e.clientX; let y = e.clientY; // let x = e.pageX; // for absolute position // let y = e.pageY; circle.style.left = x + "px"; circle.style.top = y + "px"; let size = Math.random() * 30; let rs = Math.floor(Math.random() * shapes.length); let shape = shapes[rs]; circle.style.border = shape circle.style.width = 10 + size + "px"; circle.style.height = 10 + size + "px"; body.appendChild(circle); setTimeout(function() { circle.remove(); }, 2800); setTimeout(() => enableCall = true, 100); });
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code