// Based on https://www.youtube.com/watch?v=bEyTZ5ZZxZs thanks @shiffman!

const canvasWidth = 400;
const canvasHeight = 400;

const canvas = SVG().addTo('body').viewbox(`0 0 ${canvasWidth} ${canvasHeight}`);

const space = 15;
let x = 0;
let y = 0;

const lineStyle = {
  width: 2,
  color: '#FFE3EC' };


(function drawLoop() {
  // play with this value to get more forward or back slashes!
  if (random(0, 1) < 0.25) {
    // backslash
    canvas.line(x, y, x + space, y + space).stroke(lineStyle);
  } else {
    // forward slash
    canvas.line(x, y + space, x + space, y).stroke(lineStyle);
  }

  x += space;

  if (x > canvasWidth) {
    x = 0;
    y += space;
  }

  if (y < canvasHeight) {
    requestAnimationFrame(drawLoop);
  }
})();

// random utility fn
function random(min, max) {
  return Math.random() * (max - min) + min;
}