JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/mdesantis/jquery.textfade/15724e92069ebc30ab965dfe0231e932da99d2f0/lib/jquery.textfade.js"></script>
<div id="container">
    <div><span id="test01i"></span><span id="test01o"></span></div>
</div>

CSS

#container {
    display: inline;
    text-align: center;
}
#container div span {
    font-size: 1em;
    font-family: monospace;
    white-space: pre;
    display: inline-block;
    margin: 1em;
    padding: 1em;
}

JavaScript

function makeSequence(width, height, linebreak, startinside, clockwise) {
    function square(n) {
        if (n==0) return [];
        if (n==1) return [[0,0]];
        var x=0, y=0, seq = [];
        for (; y<n; y++)
            seq.push([x,y]);
        for (x++, y--; x<n; x++)
            seq.push([x, y]);
        for (x--, y--; y>=0; y--)
            seq.push([x, y]);
        for (x--, y++; x>=1; x--)
            seq.push([x, y]);
        var inside = square(n-2).map(function(p) { p[0]++; p[1]++; return p; })
        return startinside
          ? clockwise
            ? inside.concat(seq.reverse())
            : inside.concat(seq)
          : clockwise
            ? seq.reverse().concat(inside)
            : seq.concat(inside);
    }
    var tl = (height-1)/2;
    return square(width+height-1).map(function(p) { // rotate it
        var x=p[0], y=p[1];
        return [x/2+y/2-tl, y/2-x/2+tl];
    }).filter(function(p) { // whole numbers
        return p[0] % 1 == 0 && p[1] % 1 == 0;
    }).filter(function(p) { // inside the rectangle
        return p[0]>=0 && p[0]<width && p[1]>=0 && p[1]<height;
    }).map(function(p) { // as sequence numbers instead of coordinates
        return (width+linebreak)*p[1]+p[0];
    });
}
$(document).ready(function() {
    var text = 
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"
    console.log(
        [ 0,                  10,                 98,              88,
        11, 1,              9, 21,              87, 97,          89, 77,
        22, 12, 2,          8, 20, 32,          76, 86, 96,      90, 78, 66,
        33, 23, 13, 3,      7, 19, 31, 43,      65, 75, 85, 95,  91, 79, 67, 55,
        44, 34, 24, 14, 4,  6, 18, 30, 42, 54,  64, 74, 84, 94,  92, 80, 68, 56,
        45, 35, 25, 15, 5,  17, 29, 41, 53,     63, 73, 83, 93,  81, 69, 57,
        46, 36, 26, 16,     28,...