JSFiddle - React, Tailwind, and code Playground

CSS

body {
        background-color: #000000;
        margin: 0px;    
        text-align:center;
    }

JavaScript

// canvas element and 2D context
var canvas = document.createElement( 'canvas' ),
    context = canvas.getContext( '2d' );

canvas.width = 800; 
canvas.height = 600; 
document.body.appendChild(canvas);

var c = context,
    generation = 0; 

c.translate(400,500);
c.scale(.5,.5)
branch(-Math.PI/2);

function branch(angle){
  generation++;
  c.save();
  c.strokeStyle = "hsl("+generation*10+", 100%,50%)";
  if(generation > 12){
    c.strokeStyle = 'white';
  }
  c.lineWidth = 6;
  c.rotate(angle);
  c.beginPath();
  c.moveTo(0,0);
  c.lineTo(100,0);
  c.stroke();
  c.translate(100,0);
  var scale = randomRange(0.7,1)
  c.scale(scale,scale);
  if(generation<12){
    branch(randomRange(0,Math.PI/4))
    branch(randomRange(-Math.PI/4,0))
  }
  
    if(generation === 12){
    branch(randomRange(0,Math.PI/4))
    branch(randomRange(-Math.PI/4,0))
    branch(randomRange(0,Math.PI/4))
    branch(randomRange(-Math.PI/4,0))
    branch(randomRange(0,Math.PI/4))
  }
  c.restore();
  generation--;
}

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