Hypnotic Spiral Loader
Home
Snippets
Hypnotic Spiral Loader
HTML
CSS
JS
<canvas id="spiral"></canvas> <div class="text">HYPNOTIC SPIRAL</div>
body { margin: 0; height: 100vh; display: grid; place-items: center; background: radial-gradient(circle, #0c0c0c, #020202); overflow: hidden; } canvas { display: block; } .text { position: absolute; bottom: 30px; color: rgba(255,255,255,0.6); letter-spacing: 3px; font-size: 12px; }
const canvas = document.getElementById("spiral"); const ctx = canvas.getContext("2d"); let w, h; function resize() { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; } window.addEventListener("resize", resize); resize(); let t = 0; function draw() { ctx.clearRect(0, 0, w, h); ctx.translate(w / 2, h / 2); for (let i = 0; i < 400; i++) { const angle = i * 0.15 + t; const radius = i * 0.5 + Math.sin(t + i * 0.1) * 10; const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; ctx.fillStyle = `rgba(120,255,200,${1 - i / 400})`; ctx.beginPath(); ctx.arc(x, y, 2, 0, Math.PI * 2); ctx.fill(); } ctx.setTransform(1, 0, 0, 1, 0, 0); t += 0.02; requestAnimationFrame(draw); } draw();
Ad #1
Ad #2
Scroll to Top