<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
let colors;

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

function reset() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  ctx.shadowColor = "black";
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 8;
}

function setupColors() {
  colors = [
    //https://coolors.co/9c89b8-f0a6ca-efc3e6-f0e6ef-b8bedd
    [
      "#9c89b8",
      "#f0a6ca",
      "#efc3e6",
      "#f0e6ef",
      "#b8bedd"
    ],
    //https://coolors.co/f2d7ee-d3bcc0-a5668b-69306d-0e103d
    [
      "#f2d7ee",
      "#d3bcc0",
      "#a5668b",
      "#69306d",
      "#0e103d"
    ],
    //https://coolors.co/7bdff2-b2f7ef-eff7f6-f7d6e0-f2b5d4
    [
      "#7bdff2",
      "#b2f7ef",
      "#eff7f6",
      "#f7d6e0",
      "#f2b5d4"
    ],
    //
    [
      "#d3f8e2",
      "#e4c1f9",
      "#f694c1",
      "#ede7b1",
      "#a9def9"
    ],
    //https://coolors.co/fe938c-e6b89c-ead2ac-9cafb7-4281a4
    [
      "#fe938c",
      "#e6b89c",
      "#ead2ac",
      "#9cafb7",
      "#4281a4"
    ],
    //https://coolors.co/5bc0eb-fde74c-9bc53d-e55934-fa7921
    [
      "#5bc0eb",
      "#fde74c",
      "#9bc53d",
      "#e55934",
      "#fa7921"
    ],
    //https://coolors.co/0b132b-1c2541-3a506b-5bc0be-6fffe9
    [
      "#0b132b",
      "#1c2541",
      "#3a506b",
      "#5bc0be",
      "#6fffe9"
    ],
    //https://coolors.co/114b5f-1a936f-88d498-c6dabf-f3e9d2
    [
      "#114b5f",
      "#1a936f",
      "#88d498",
      "#c6dabf",
      "#f3e9d2"
    ],
  ];
}
  
function getRandomTheme() {
  let randomIndex = Math.floor(Math.random() * colors.length);
  let theme = colors[randomIndex];
  return theme;
}

function draw() {
  ctx.fillRect(0, 0, w, h);
  let colorTheme = getRandomTheme();
  let width = Math.random() * 80 + 30;
  ctx.shadowBlur = width * 0.4;
  ctx.lineWidth = width;
  let xStep = Math.random() * 80 + 40;
  let nrOfSteps = Math.ceil(w / xStep) + 1;
  let yStep = width;
  let nrOfStepsY = Math.ceil(h / yStep) + 1;
  for(let y = nrOfStepsY+5; y > -5; y -= 1) {
    ctx.beginPath();
    ctx.strokeStyle = colorTheme[Math.abs(y) % 5];
    for(let x = -1; x < nrOfSteps; x += 1) {
      let y1 = (Math.abs(x) % 2) * xStep;
      ctx.lineTo(x * xStep, y*yStep + y1);
    }
    ctx.stroke();
  }
}

setup();
draw();