Falling Light Threads
Home
Snippets
Falling Light Threads
HTML
CSS
JS
<canvas id="threads"></canvas>
body { margin: 0; background: radial-gradient(circle at top, #0a0f1f, #02040a); overflow: hidden; height: 100vh; } canvas { display: block; }
const canvas = document.getElementById("threads"); const ctx = canvas.getContext("2d"); function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resize(); window.addEventListener("resize", resize); const threads = Array.from({ length: 120 }, () => ({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, speed: 0.5 + Math.random() * 1.5, sway: Math.random() * 2, hue: 190 + Math.random() * 60 })); function animate() { ctx.fillStyle = "rgba(0,0,0,0.15)"; ctx.fillRect(0, 0, canvas.width, canvas.height); threads.forEach(t => { t.y += t.speed; t.x += Math.sin(t.y * 0.02) * t.sway; if (t.y > canvas.height) { t.y = -50; t.x = Math.random() * canvas.width; } ctx.beginPath(); ctx.moveTo(t.x, t.y); ctx.lineTo(t.x, t.y + 40); ctx.strokeStyle = `hsla(${t.hue}, 100%, 70%, 0.8)`; ctx.lineWidth = 1; ctx.stroke(); }); requestAnimationFrame(animate); } animate();
Ad #1
Ad #2
Scroll to Top