<html>

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
</head>

<body>
</body>

</html>
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: rgb(0, 0, 40);
}

canvas {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

h1 {
  /*   z-index: 2; */
  font-size: 124px;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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);
  strokeWeight(2);
  angleMode(DEGREES);
}

function draw() {
  translate(width / 2, height / 2);
  rotate(45 / 2);
  branchComponent(100, 3, 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();
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.