<canvas id="canvas" title="Click to generate a new pattern"></canvas>

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

canvas {
  display: block;
  cursor: pointer;
}

/*
  Johan Karlsson 2020
  https://twitter.com/DonKarlssonSan
  MIT License, see Details View
  
  https://en.wikipedia.org/wiki/Vera_Moln%C3%A1r
*/

let canvas;
let ctx;
let w, h;

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

function reset() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  draw();
}

function draw() {
  ctx.strokeStyle = "black";
  ctx.fillStyle = "white";
  ctx.lineWidth = 1;
  ctx.fillRect(0, 0, w, h);
  let size = 50;
  for(let x = 0; x < w + size; x += size) {
    for(let y = 0; y < h + size; y += size) {
      drawSquares(x, y, size * 0.95);
    }
  }
}

function drawSquares(x, y, size) {
  for(let i = 0; i < 9; i++){
    drawSquare(x, y, size);
    size -= Math.random() * 10
  }
}

function r() {
  return (Math.random() -0.5) * 6;
}

function drawSquare(x, y, size) {
  ctx.beginPath();
  ctx.moveTo(x - size / 2 + r(), y - size / 2 + r());
  ctx.lineTo(x + size / 2 + r(), y - size / 2 + r());
  ctx.lineTo(x + size / 2 + r(), y + size / 2 + r());
  ctx.lineTo(x - size / 2 + r(), y + size / 2 + r());
  ctx.closePath();
  ctx.stroke();
}


function random(max) {
  return Math.floor(Math.random() * max);
}
  
setup();