body {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: black;
}

canvas {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

var COLOR_01 = [178, 30, 93]; // pink
var COLOR_02 = [42, 178, 48]; // green
var COLOR_03 = [110, 255, 116]; // light green
var COLOR_04 = [0, 0, 40]; // gray

function setup() {
  var size = 800;
  createCanvas(size, size);
  background.apply(null, COLOR_04);
  noLoop();
  stroke(255);
  angleMode(DEGREES);
}

function draw() {
  translate(width/2, height/2);
  rotate(45/2);
  branchComponent(100, 8, 60);
}

function branch(len, angle, gen) {
  line(0, 0, 0, -len);
  translate(0, -len);
  len *= 0.7;
  angle = random(angle-30, angle+20);

  if (len > 2) {
    push();
    rotate(angle);
    branch(len, angle, gen);
    pop();

    push();
    rotate(-angle);
    branch(len, angle, gen);
    pop();
  }
}

function branchComponent(len, amount, angle) {
  stroke.apply(null, COLOR_01);
  var increment = 360/amount;
  var rotAmount;

  for (var i = 0; i < amount; i++) {
    push();
    rotAmount = -180 + increment * i
    rotate(random(rotAmount - 60, rotAmount));
    branch(len, angle, 1);
    pop();
  }
}