untitled

wavy animation

by greg gorlen

HTML

<canvas id="paper"></canvas>

CSS

body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96vh;
}

JavaScript

"use strict";

let canvas = document.getElementById("paper");
canvas.height = canvas.width = 600;

let ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.strokeStyle = "#ffffff";
ctx.fillStyle = "rgba(0, 0, 0, 0.15)";

let x = -500;
let y = 0;
let angle = 100;
let lines = [];

for (let i = 0; i < 150; i++) {
  lines.push(x);
  x += 5;
}

function rad(deg) { return deg * Math.PI / 180; }

function draw(x, y, angle, ctx) {
  ctx.beginPath();
  
  for (let i = 0; i <= canvas.height; i += 5) {
    ctx.lineTo(x + Math.cos(rad(angle)) * canvas.width, y + i);
    angle += 0.9;
  }
  
  ctx.stroke();
}

(function update() {
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  for (let i = lines.length - 1; i >= 0; i--) {
    draw(lines[i] / 0.09, y, angle, ctx);
    angle += 0.001;
    lines[i] += 0.04;
    
    if (lines[i] > 750) {
      lines.splice(i, 1);
      lines.unshift(0);
    }
  }
  
  requestAnimationFrame(update);
})();