JSFiddle - React, Tailwind, and code Playground

waves

by greg gorlen

HTML

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

CSS

body {
  background: #000;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

JavaScript

"use strict";

const canvas = document.getElementById("paper");
canvas.width = parseFloat(window.getComputedStyle(document.body).width);
canvas.height = parseFloat(window.getComputedStyle(document.body).height);
const ctx = canvas.getContext("2d");
const rad = d => d * Math.PI / 180;

for (let k = -canvas.width * 2; k <= canvas.width + 100; k += 79) {
  for (let j = -60; j <= 60; j += 17) {
    ctx.strokeStyle = "hsl(0, 0%, " + (j + 60) / 3 + "%)";
    ctx.beginPath();
    
    for (let i = k & 1 ? 0 : -100, angle = 0; i <= canvas.height; i += 1) {
      ctx.lineTo(i * 1.3 + k + j / 2 * Math.cos(rad(angle)), i);
      angle += 2.6;
    }
    
    ctx.stroke();
  }
}