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();