[dd$]

See the Pen Waveform by Gene (@1997_deve) on CodePen.

Код

let canvas = document.getElementById("myCanvas"),
  ctx = canvas.getContext("2d"),
  width = (canvas.width = window.innerWidth),
  height = (canvas.height = window.innerHeight),
  centerY = height / 2,
  segNum = 1000,
  lineWidth = centerY,
  lineNum = 5;

drawContent();

function drawContent() {
  ctx.clearRect(0, 0, width, height);
  let time = Date.now() / 2000;
  for (var j = 0; j < lineNum; j++) {
    ctx.beginPath();
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = "#00f";
    for (var i = 0; i < segNum; i++) {
      const x = (i / (segNum - 1)) * width;
      const px = i / 200;
      const py = j / 100 + time;
      const y = lineWidth * noise.perlin2(px, py) +lineWidth * noise.perlin2(i / 50, j / 100+ time)/2+lineWidth * noise.perlin2(i / 10, j / 100 + time)/5 +lineWidth * noise.perlin2(i / 5, j / 100 + time)/10 + centerY;
      if (i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    }
    ctx.stroke();
  }

  requestAnimationFrame(drawContent);
}