body {
position: relative;
height: 200vh;
margin: 0;
padding: 0;
}
.wave {
position: absolute;
top: 0;
left: 50%;
translate: -50%;
}
const canvas = document.createElement('canvas');
canvas.classList = 'wave';
const c = canvas.getContext('2d');
document.body.append(canvas);
canvas.width = 130;
canvas.height = innerHeight * 2;
const waves = Array.from({ length: 4 }, () => ({
x: Math.random() * 80 + 20,
length: Math.random() * 0.002 + 0.005,
amplitude: Math.random() * 15 + 20,
frequency: 0.015,
}));
const lineColor = '#419BC7';
const increments = waves.map(wave => wave.frequency);
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, canvas.width, canvas.height);
c.strokeStyle = lineColor;
waves.forEach((wave, index) => {
c.beginPath();
c.moveTo(wave.x, 0);
const height = canvas.height;
const { frequency, length, amplitude } = wave;
let increment = increments[index];
let y = 0;
const startX = wave.x;
c.moveTo(startX, y);
for (y = 0; y < height; y++) {
c.lineTo(
startX + Math.sin(y * length + increment) * amplitude,
y
);
}
c.stroke();
increments[index] += frequency;
});
}
animate();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.