SOURCE

window.onload = () => {
    var cav = document.getElementById('cav_bg');
    var ctx = cav.getContext('2d');

    var w = window.innerWidth;
    var h = window.innerHeight;
    ctx.canvas.width = w;
    ctx.canvas.height = h;
    ctx.fillStyle = 'gainsboro';
    //ctx.fillRect(1,h-100,100,h);

    ctx.strokeStyle = 'white';
    // ctx.lineWidth = 10;
    // ctx.beginPath();
    // ctx.moveTo(1,h-1);
    // ctx.lineTo(100,h-100);
    // //ctx.moveTo(10,h-20);
    // //ctx.closePath();
    // //ctx.fill();
    // ctx.stroke();

    var calcNextTo = (sl,st,len,dire) => {
        if (len<1) len=1;
        var a = len;
        function calc(len) {
            var a = Math.pow(len,2);
            a = a / 2;
            a = Math.sqrt(a);
            a = Math.round(a);
            return a;
        }
        switch(dire){
            case 1:
                a = calc(len);
                sl -= a;
                st -= a;
                break;
            case 2:
                st -= a;
                break;
            case 3:
                a = calc(len);
                sl += a;
                st -= a;
                break;
            case 4:
                sl += a;
                break;
            case 5:
                a = calc(len);
                sl += a;
                st += a;
                break;
            case 6:
                st += a;
                break;
            case 7:
                a = calc(len);
                sl -= a;
                st += a;
                break;
            default:
                sl -= a;
        }
        return { el: sl, et: st };
    }

    var index = 0;
    var max = 8;
    var dire = 2;
    var append = 6;
    var treeNodes = [
        {
            sl: Math.round(w/2)
            ,st: h-100
            ,el: Math.round(w/2)
            ,et: h-200
            ,dire: dire
            ,len: 80
        }
    ];

    function drawTree() {

        if (index < max) {
            index++;
            var draw = () => {
                var treeNodesNew = [];
                var drawLine = (line) => {
                    ctx.lineWidth = 5;
                    ctx.beginPath();
                    ctx.moveTo(line.sl,line.st);
                    ctx.lineTo(line.el,line.et);
                    ctx.stroke();
                };
                treeNodes.forEach((node,i)=>{
                    var len = node.len - 3;
                    if (len <= 0) return;
                    var dire = node.dire==0 ? 7 : node.dire-1;
                    var e = calcNextTo(node.el, node.et, len, dire);
                    var aend = append;//Math.pow(append--,2);
                    var rand = Math.round(Math.random() * 10);
                    if (rand < 5) {
                        var line1 = {
                            sl: node.el
                            ,st: node.et
                            ,el: e.el
                            ,et: e.et
                            ,dire: dire
                            ,len: len - aend
                        };
                        drawLine(line1);
                        treeNodesNew.push(line1);
                    }
                    len = node.len;
                    dire = node.dire;
                    e = calcNextTo(node.el, node.et, len, dire);
                    var line2 = {
                        sl: node.el
                        ,st: node.et
                        ,el: e.el
                        ,et: e.et
                        ,dire: dire
                        ,len: len - aend
                    };
                    drawLine(line2);
                    treeNodesNew.push(line2);
                    if (rand < 5) {
                        len = node.len - 3;
                        dire = node.dire==7 ? 0 : node.dire+1;
                        e = calcNextTo(node.el, node.et, len, dire);
                        var line3 = {
                            sl: node.el
                            ,st: node.et
                            ,el: e.el
                            ,et: e.et
                            ,dire: dire
                            ,len: len - aend
                        };
                        drawLine(line3);
                        treeNodesNew.push(line3);
                    }
                });
                if (treeNodesNew.length == 0) return;
                treeNodes.length = 0;
                treeNodes = treeNodesNew;
            }
            window.requestAnimationFrame(() => {
                draw();
                //drawTree();
                setTimeout(drawTree,540);
            });
        }else{
            console.log('----End-----');
        }
    }

    drawTree();
}

<div>
    <canvas id="cav_bg"></canvas>
</div>

html,body{
    height: 100%;
}
body{
    padding: 0;
    margin: 0;
}
body>div,
canvas{
    height: 100%;
    width: 100%;
}
canvas{
    background-color: black;
}