<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1650 1170" width="1650" height="1170" version="1.1" >
  <!-- 
    Johan Karlsson, 2020
    https://twitter.com/DonKarlssonSan 
11.7 x 16.5
  -->
</svg>

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

/*
  Johan Karlsson, 2020
  https://twitter.com/DonKarlssonSan
  MIT License, see Details View
*/
const config = {
  lineWidth: 1,
  stepSize: 30,
  nrOfLines: 50,
};

const svgNs = "http://www.w3.org/2000/svg";
let svg;
let w = 1650;
let h = 1170;

function setup() {
  svg = document.querySelector("svg");
  document.addEventListener("click", draw);
  document.addEventListener("keydown", onKeyDown);
  window.addEventListener("resize", onResize);
  onResize();
}

function onResize() {
  draw();
}

function onKeyDown (e) {
  if(e.code === "KeyD") {
    download();
  }
}

function download() {
  let svgDoc = svg.outerHTML;
  let filename = "bezier-lines.svg";
  let element = document.createElement("a");
  element.setAttribute("href", "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgDoc));
  element.setAttribute("download", filename);
  element.style.display = "none";
  document.body.appendChild(element);
  element.addEventListener("click", e => e.stopPropagation());
  element.click();
  document.body.removeChild(element);
}

function draw() {
  let group = document.querySelector("g");
  if(group) {
    group.remove();
  }
  group = document.createElementNS(svgNs, "g");
  group.setAttribute("stroke", "black");
  group.setAttribute("fill", "none");
  group.setAttribute("stroke-width", config.lineWidth);
  group.setAttribute("stroke-linecap", "round");
  group.setAttribute("stroke-linejoin", "round");
  
  drawShit(group);

  let logo = new Logo(w * 0.87, h * 0.94);
  logo.draw(group);
  
  svg.appendChild(group);
}

function drawShit(group) {
  let nrOfLines = config.nrOfLines;
  let nrOfLinesY = nrOfLines * 0.9;
  let x1 = w * 0.1;
  let y1 = h * 0.1;
  let x2 = w * 0.9;
  let y2 = h * 0.9;
  
  //drawRect(x1, y1, w * 0.8, h * 0.8, group);
  
  let space = 40;
  let ySpace = space * 0.7;
  let cp1x = Math.random() * w * 0.8 + w * 0.1;
  let cp1y = Math.random() * h * 0.8 + h * 0.1;
  let cp2x = Math.random() * w * 0.8 + w * 0.1;
  let cp2y = Math.random() * h * 0.8 + h * 0.1;
  let x1List = [];
  let x2List = [];
  for(let i = 0; i < nrOfLines; i++) {
    x1 += Math.random() * space;
    x1List.push(x1);
    x2 -= Math.random() * space;
    x2List.push(x2);
  }
  for(let i = 0; i < nrOfLines; i++) {
    let x11 = x1List[i];
    let x22 = x2List[nrOfLines - i];
    drawBezierLine(x11, y1, cp1x, cp1y, cp2x, cp2y, x22, y2, group);
  }
  
  
  x1 = w * 0.1;
  y1 = h * 0.9;
  x2 = w * 0.9;
  y2 = h * 0.1;
  cp1x = Math.random() * w * 0.8 + w * 0.1;
  cp1y = Math.random() * h * 0.8 + h * 0.1;
  cp2x = Math.random() * w * 0.8 + w * 0.1;
  cp2y = Math.random() * h * 0.8 + h * 0.1;
  y1List = [];
  y2List = [];
  for(let i = 0; i < nrOfLinesY; i++) {
    y1 -= Math.random() * ySpace;
    y1List.push(y1);
    y2 += Math.random() * ySpace;
    y2List.push(y2);
  }
  for(let i = 0; i < nrOfLinesY; i++) {
    let y11 = y1List[i];
    let y22 = y2List[nrOfLinesY - i];
    drawBezierLine(x1, y11, cp1x, cp1y, cp2x, cp2y, x2, y22, group);
  }
}

function drawBezierLine(x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2, groupElement) {
  let path = document.createElementNS(svgNs, "path");
  let d = `M ${x1} ${y1} C ${cp1x}, ${cp1y}, ${cp2x}, ${cp2y}, ${x2}, ${y2}`;
  path.setAttribute("d", d);
  groupElement.appendChild(path);
}

function drawRect(x, y, width, height, groupElement) {
  let rect = document.createElementNS(svgNs, "rect");
  rect.setAttribute("x", x);
  rect.setAttribute("y", y);
  rect.setAttribute("width", width);
  rect.setAttribute("height", height);
  groupElement.appendChild(rect);
}

setup();