Snake Cursor Trail
Home
Snippets
Snake Cursor Trail
HTML
CSS
JS
<body></body>
body { margin: 0; overflow: hidden; background: #020617; cursor: none; } .dot { position: fixed; width: 14px; height: 14px; border-radius: 50%; pointer-events: none; background: white; transform: translate(-50%, -50%); }
const dots = []; const totalDots = 20; let mouse = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; for (let i = 0; i < totalDots; i++) { const dot = document.createElement("div"); dot.className = "dot"; document.body.appendChild(dot); dots.push({ el: dot, x: mouse.x, y: mouse.y }); } document.addEventListener("mousemove", (e) => { mouse.x = e.clientX; mouse.y = e.clientY; }); function animate() { let x = mouse.x; let y = mouse.y; dots.forEach((dot, index) => { dot.x += (x - dot.x) * 0.35; dot.y += (y - dot.y) * 0.35; dot.el.style.left = dot.x + "px"; dot.el.style.top = dot.y + "px"; dot.el.style.background = `hsl(${index * 18 + Date.now() * 0.05}, 100%, 60%)`; x = dot.x; y = dot.y; }); requestAnimationFrame(animate); } animate();
Ad #1
Ad #2
Scroll to Top