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

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

canvas {
  display: block;
  cursor: pointer;
}

/*
  Johan Karlsson
  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;
}

function getRandomPoints() {
  let points = [];
  let nrOfCircles = w * h / 80000;
  for(let i = 0; i < nrOfCircles; i++) {
    let x = Math.random() * w;
    let y = Math.random() * h;
    points.push([x, y]);
  }
  return points;
}

function draw() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = "white";
  ctx.shadowColor = "black";
  ctx.shadowBlur = 10;

  drawBackground();
  drawStacks();
}

function drawBackground() {
  let nrOfCircles = w * h / 500;
  for(let i = 0; i < nrOfCircles; i++) {
    let x = Math.random() * w;
    let y = Math.random() * h;
    drawCircle(x, y);
  }
}

function drawStacks() {
  let points = getRandomPoints();
  for(let r = 200; r > 0; r -= 22) {
    points.forEach(p => {
      let x = p[0];
      let y = p[1];
      drawCircles(x, y, r);
    });
  }
}

function drawCircle(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 30, 0, Math.PI * 2);
  ctx.stroke();
  ctx.fill();
  for(let i = 0; i < 5; i++) {
    ctx.beginPath();
    ctx.arc(x, y, 5 + i * 5, 0, Math.PI * 2);
    ctx.stroke();
  }
}

function drawCircles(x0, y0, r) {
  for(let i = 0; i < r / 2; i++) {
    let random = Math.random() * r / 3;
    let angle = Math.random() * Math.PI * 2;
    let x = Math.cos(angle) * (r + random);
    let y = Math.sin(angle) * (r + random);
    drawCircle(x0 + x, y0 + y);
  }
}

setup();
draw();