title
A prototype
body{ min-height: 100vh; background-image: radial-gradient(49% 81% at 45% 47%, #1613C345 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #752B70FF 1%, #FF000000 99%),radial-gradient(142% 91% at 83% 7%, #05052AFF 1%, #FF000000 99%),radial-gradient(142% 91% at 81% 74%, #1B81174F 0%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #030711FF 0%, #0A0317FF 100%); } span{ position:absolute; border-radius:100%; background:#ffffffcc; width:1px; height:1px; }
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; circle.style.left = x + "px"; circle.style.top = y + "px"; body.appendChild(circle); setTimeout(function() { circle.remove(); }, 4800); setTimeout(() => enableCall = true, 1000); });
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