var w=window.innerWidth, h=window.innerHeight;
c.width=w; c.height=h;
var ctx=c.getContext('2d');
var x = c.width / 2;
var y = c.height;
var n = 10; /* depth, you can change this value... */
var l = n*7;
var rad = Math.PI/2;
var delta = Math.PI/7; /* change this too... */

var op = [];

function draw(n, x, y, rad, l) {
  if(n > 0) {
    var new_x = x - (l*Math.cos(rad));
    var new_y = y - (l*Math.sin(rad));
    var new_l = n*7;
    var new_rad = rad - delta;
    op.push({ox:x, oy:y, nox:new_x, noy:new_y, nrad:new_rad, nl: new_l});
    draw(n-1, new_x, new_y, new_rad, new_l);
    new_rad = rad + delta;
    draw(n-1, new_x, new_y, new_rad, new_l);
  }
}

draw(n, x, y, rad, l);

//

var i = 0;
var i_max = op.length;

function anim(){
  if(i < i_max) {
    window.requestAnimationFrame(anim);
    ctx.beginPath();
    ctx.moveTo(op[i].ox, op[i].oy);
    ctx.lineTo(op[i].nox, op[i].noy);
    ctx.strokeStyle = 'rgb(139,'+(255-op[i].nl*3)+',101)';
    ctx.lineWidth=op[i].nl/6;
    ctx.stroke();
    i++;
  }
}
anim();