Canvas Particle Waves
A native Canvas animation with scalable particles and wave lines.
This demo uses one canvas for layered waves and slow-moving particles. The animation stays in a small client script while the page remains static.
Source
const canvas = document.querySelector('[data-lab-demo="canvas-waves"]');
const ctx = canvas.getContext('2d');
let frame = 0;
function draw(width, height) {
ctx.clearRect(0, 0, width, height);
for (let layer = 0; layer < 4; layer += 1) {
ctx.beginPath();
const yBase = height * (0.28 + layer * 0.14);
for (let x = 0; x <= width; x += 8) {
const y = yBase + Math.sin(x * 0.018 + frame * 0.025 + layer * 1.7) * (16 + layer * 7);
if (x === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();
}
frame += 1;
requestAnimationFrame(() => draw(width, height));
}