<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");
  resize();
  window.addEventListener("resize", () => {
    resize();
    draw();
  });
  canvas.addEventListener("click", draw);
}

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

function drawCircles(x, y, r, angle) {
  r *= 0.9;
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);
  ctx.beginPath();
  ctx.arc(0, 0, r, 0, Math.PI, true);
  ctx.arc(-r, r, r, Math.PI / 2 * 3, 0, false);
  ctx.arc(r, r, r, Math.PI, Math.PI / 2 * 3, false);
  ctx.stroke();
  ctx.clip();
  
  let lines = Math.round(Math.random() * r * 0.5 + 10);
  for(let i = 0; i < lines; i++) {
    ctx.beginPath();
    let angle = Math.PI * 2 * i / lines;
    ctx.moveTo(0, r);
    let x = Math.cos(angle) * r;
    let y = Math.sin(angle) * r;
    ctx.lineTo(x, y);
    ctx.stroke();
  }
  
  ctx.restore();
}

function drawPattern() {
  let r = Math.round(Math.random() * 60 + 40);
  let cols = Math.round(w / r / 2) + 1;
  let rows = Math.round(h / r) + 2;
  for(let col = 0; col < cols; col++) {
    let angle = Math.PI * (col % 2);
    for(let row = 0; row < rows; row++) {
      let angle2 = angle + Math.PI / 2 * (row % 2);
      let xOffset = (row % 2) * r;
      if(Math.round(row / 2) % 2 === 0) {
        angle2 += Math.PI;
      }
      let x = col * r * 2 + xOffset;
      let y = row * r;
      drawCircles(x, y, r, angle2);
    }
  }
}

function draw() {
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, w, h);
  drawPattern();
}

setup();
draw();