Neon Waveform Animation
Home
Snippets
Neon Waveform Animation
HTML
CSS
JS
<canvas id="waveCanvas"></canvas>
body { background: black; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } canvas { display: block; }
const canvas = document.getElementById("waveCanvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let t = 0; function drawWave() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.lineWidth = 3; ctx.strokeStyle = `hsl(${t % 360}, 100%, 50%)`; for (let i = 0; i < canvas.width; i += 10) { let y = canvas.height / 2 + Math.sin(i * 0.02 + t * 0.05) * 80; ctx.lineTo(i, y); } ctx.stroke(); t += 1; requestAnimationFrame(drawWave); } drawWave();
Ad #1
Ad #2
Scroll to Top