JSFiddle - React, Tailwind, and code Playground

by David Olivari

HTML

<div id='container'>

CSS

.point {
    position:absolute;
    font-family:mono;
    font-size:11px;
    text-align:center;
    border:solid 1px grey;
    border-radius:4px;
    padding:4px 4px 4px 4px;
    width:20px;
    height:20px;
}

JavaScript

function spiral(n) {
    // given n an index in the squared spiral
    // p the sum of point in inner square
    // a the position on the current square
    // n = p + a

    var r = Math.floor((Math.sqrt(n + 1) - 1) / 2) + 1;

    // compute radius : inverse arithmetic sum of 8+16+24+...=
    var p = (8 * r * (r - 1)) / 2;
    // compute total point on radius -1 : arithmetic sum of 8+16+24+...

    var en = r * 2;
    // points by face

    var a = (1 + n - p) % (r * 8);
    // compute de position and shift it so the first is (-r,-r) but (-r+1,-r)
    // so square can connect

    var pos = [0, 0, r];
    switch (Math.floor(a / (r * 2))) {
        // find the face : 0 top, 1 right, 2, bottom, 3 left
        case 0:
            {
                pos[0] = a - r;
                pos[1] = -r;
            }
            break;
        case 1:
            {
                pos[0] = r;
                pos[1] = (a % en) - r;

            }
            break;
        case 2:
            {
                pos[0] = r - (a % en);
                pos[1] = r;
            }
            break;
        case 3:
            {
                pos[0] = -r;
                pos[1] = r - (a % en);
            }
            break;
    }
    return pos;
}

for (var i = 0; i < 168; i++) {
    var $elt = $(document.createElement('div'));
    $elt.text(i);
    $elt.addClass('point');
    var pos = spiral(i);
    var grey = 256 - pos[2] * 16;
    $elt.css({
        left: 300 + 40 * pos[0],
        top: 300 + 40 * pos[1],
            "background-color": "rgba(" + grey * (1 + pos[2] % 3) + "," + grey * (1 + pos[2] % 2) + "," + grey * (1 + pos[2] % 4) + "," + 255 + ")"
    });
    $('#container').append($elt);
}