JSFiddle - React, Tailwind, and code Playground

by sebleedelisle

CSS

canvas { 
 border:1px black solid;
 background-color: black;
    
}

JavaScript

var canvas = document.createElement('canvas'); 
canvas.width = 500;
canvas.height = 500; 

var c = canvas.getContext('2d'); 

document.body.appendChild(canvas); 



var generation = 0; 


loop();

function loop() {
  
  c.clearRect(0,0,500,500);   
    
  c.save(); 
    
  
  c.lineWidth = 10; 
  c.lineCap ="round";
  c.globalCompositeOperation = "lighter"; 
    
  c.translate(250, 450); 
  branch(); 
  c.restore();
    
  branchAngle += 0.01; 
    
}




function branch(angle) { 
 
    generation++; 
 
    c.save(); 
    
    c.rotate(angle); 
    
    c.strokeStyle = "white";//"hsl("+generation*-36+",50%,50%)";
   
    c.beginPath(0,0); 
    c.moveTo(0,0); 
    c.lineTo(0,-100); 
    c.stroke(); 
    c.translate(0,-100); 
    
    var branchLength = Math.random()*0.3 + 0.6; 
    c.scale(branchLength, branchLength); 
    
    
    if(generation< 14) {
       branch( -Math.PI/4  );
       branch( Math.PI/4 ); 
    } 
    
    if(generation>4){
       
      c.beginPath(); 
      c.arc(0, 0, 400, 0, Math.PI*2, true); 
      c.fillStyle = "hsla("+Math.round(Math.random()*100+220)+",100%,50%,0.1)"; 
      c.fill(); 
        
    }
    
    c.restore(); 

    generation--; 
}