<canvas id="c"></canvas>
xxxxxxxxxx
canvas {
position:absolute;
bottom:0px; left:0px;
background: #f0f9ff;
background: linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
background: gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(47%,#cbebff), color-stop(100%,#a1dbff));
background: linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
background: linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
background: linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
background: linear-gradient(to bottom, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 );
}
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();