JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id=a width=256 height=256>

JavaScript

function d2xy(d, s) {
    var r = {x: 0, y: 0}, p = {x: 0, y: 0};
    for (s = s-1; s >= 0; s--) {
        p.x *= 2;
        p.y *= 2;
        var pow = Math.pow(2, s*2);
        r = rot(r, ((d & pow*3) >> s*2));
        if(s==1){
            d = (d + 2) % pow;
        } else if(s > 1) {
            d = (d + pow / 2 + pow / 8) % pow;
        }
        p.x += r.x;
        p.y += r.y;
    }
    return p;
}
function rot(p, q) {
    switch(q % 4) {
    case 0:
        return p;
    case 1:
        return {x: p.y, y: 1 - p.x};
    case 2:
        return {x: 1 - p.x, y: 1 - p.y};
    case 3:
        return {x: 1 - p.y, y: p.x};
    }
}

function v2rgb(v) {
    return ((v & 0xf800) << 8) | ((v & 0x7e0) << 5) | ((v & 0x1f) << 3); 
}
function putData(arr, size, coord, v) {
    var pos = (coord.x + size * coord.y) * 4,
        rgb = v2rgb(v);

    arr[pos] = (rgb & 0xff0000) >> 16;
    arr[pos + 1] = (rgb & 0xff00) >> 8;
    arr[pos + 2] = rgb & 0xff;
    arr[pos + 3] = 0xff;
}
var size = 256,
    pow = 8,
    context = a.getContext('2d'),
    data = context.getImageData(0, 0, size, size);

for (var i = 0; i < size * size; i++) {
    var p = d2xy(i, pow);
    putData(data.data, size, p, i);
}
context.putImageData(data, 0, 0);