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

body,
html {
  margin: 0;
  overflow: hidden;
}

canvas {
  display: block;
  cursor: pointer;
}

/*
  Johan Karlsson, 2020
  https://twitter.com/DonKarlssonSan
  MIT License, see Details View
*/
let canvas;
let ctx;
let w, h;

function setup() {
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  reset();
  window.addEventListener("resize", () => {
    reset();
    draw();
  });
  canvas.addEventListener("click", draw);
}

function reset() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  ctx.strokeStyle = "white";
}

function draw() {
  let width = 80;
  let height = 120;
  ctx.fillRect(0, 0, w, h);
  for (let x = 0; x < w; x += width) {
    for (let y = 0; y < h; y += height) {
      drawRect(x, y, width, height);
    }
  }
}

function drawRect(x0, y0, length, height) {
  ctx.save();
  ctx.translate(x0 + length / 2, y0 + height / 2);
  ctx.rect(-length / 2, -height / 2, length * 0.93, height * 0.97);
  ctx.clip();

  let rotation = Math.round(Math.random() * 2);
  let angle = (rotation * Math.PI) / 2;
  ctx.rotate(angle);

  ctx.lineWidth = 2;
  let x2 = -length / 2;
  let step = length / 10;
  for (let x1 = -length / 2; x1 < length * 1.5; x1 += Math.random() * step) {
    x2 += Math.random() * step;
    ctx.beginPath();
    ctx.moveTo(x1, -height / 2);
    ctx.lineTo(x2, height / 2);
    ctx.stroke();
  }
  ctx.restore();
}

setup();
draw();