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();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.