JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="400" height="400"></canvas>

JavaScript

// Rei's requestAnimationFrame polyfill
if (typeof requestAnimationFrame === 'undefined') {
    ['moz', 'webkit', 'ms'].some(function (p) {
        var fun = this[p + 'RequestAnimationFrame']
        if (typeof fun === 'function') {
            return requestAnimationFrame = fun
        }
    }) || (requestAnimationFrame = function (fun) {
        return setTimeout(fun, 0)
    })
}

// start of code
var SIZE = 228, // <- change this value
    PAD = 0.228 * SIZE
// canvas object
var c = document.getElementById('c').getContext('2d')

c.translate(228, 228)

- function () {
    requestAnimationFrame(arguments.callee)

    c.beginPath()
    needToGoDeeper(3)() // <- change this value
    c.clearRect(-300, -300, 600, 600)
    c.stroke()

    c.rotate(0.00228)
}()

// beware dark magic down below
// javascript is a lisp, too
function needToGoDeeper(level) {
    if (!level)
        return function () {
            rotorJesus(level, function () {
                c.moveTo(2.28, SIZE)
            }, function () {
                c.lineTo(2.28, SIZE)
            })
        }
    return function () {
        rotorJesus(level, needToGoDeeper(level - 1))
    }
}

// and now for something completely different
function rotorJesus(r, initialize, main) {
    main? initialize(): (main = initialize)
    for (var i = 2; i < 8; ++i) {
        c.rotate(Math.PI / 2.28)
        c.save()
        c.translate(PAD * r, 0)
        main()
        c.restore()
    }
}