funny fractals animation

<!DOCTYPE html>
<html>
<head>
    <title>Fraktale</title>
</head>
<body>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        canvas {
            background-color: black;
        }
    </style>

    <div id="wrapper"></div>

    <script>
        Math.Tau = Math.PI*2;
        Math.RadiantInDegree = Math.Tau/360;

        function rotate(x, y, pX, pY, theta) {
            var rad = theta*Math.RadiantInDegree;

            return [
                x+(pX*Math.cos(rad)+pY*Math.sin(rad)),
                y+(pX*-Math.sin(rad)+pY*Math.cos(rad))
            ];
        }

        String.prototype.replaceAt=function(index, replacement) {
            return this.substr(0, index) + replacement+ this.substr(index + replacement.length);
        }

        var wrapper = document.getElementById('wrapper');
        var canvas = document.createElement('canvas');

        canvas.width = screen.availWidth;
        canvas.height = screen.availHeight;

        wrapper.appendChild(canvas);

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

        // settings
        var length = 20;
        ctx.strokeStyle = "white";
        ctx.lineWidth = .5;

        // draw vars
        var params = "R";
        var oX = -100, oY = 100;
        var x = canvas.width*.5-oX, y = canvas.height*.5-oY;
        var theta = 90;

        // iterations
        var it = 15;
        for(var i = 2; i < it; i++) {
            var before = params+"";
            params += "R";

            var len = before.length;
            var m = Math.floor(len*.5);
            before = before.replaceAt(m, "L");

            params = params.concat(before);
            console.log(params);
        }

        var alpha = 1;
        function loop() {
            requestAnimationFrame(loop);

            oX = -100, oY = 100;
            x = canvas.width*.5-oX, y = canvas.height*.5-oY;
            theta = 90;

            ctx.clearRect(0,0, canvas.width, canvas.height);

            ctx.beginPath();
            ctx.moveTo(x, y);
            var vec = rotate(x, y, length, 0, theta), vX = vec[0], vY = vec[1];
            ctx.lineTo(vX, vY);
            x = vX; y = vY;

            for(var i = 0; i < params.length; i++) {
                if(params[i] == "R") {
                    theta = (360+theta-alpha)%360;
                } else {
                    theta = (360+theta+alpha)%360;
                }

                vec = rotate(x, y, length, 0, theta), vX = vec[0], vY = vec[1];
                ctx.lineTo(vX, vY);
                x = vX; y = vY;
            }

            ctx.stroke();

            alpha++;
            console.log(alpha);
        }

        requestAnimationFrame(loop);
    </script>
</body>
</html>