JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/mdesantis/jquery.textfade/master/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: 8pt;
    font-family: monospace;
    white-space: pre;
    display: inline-block;
    margin: 3px;
    padding: 3px;
}

JavaScript

// add item if not present in the array
function pushIfNotPresent(array, item)
{
    if (array.indexOf(item)==-1 && item>0 && item<100)
        array.push(item);
}

// convert x y position to index
function convert(x, y, width)
{
    return Math.floor(y)*width+Math.floor(x);
}

$(document).ready(function() {
    var text = 
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"
    var sequence =
      [ 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, 40, 52,         62, 72, 82,      70, 58,
        47, 37, 27,         39, 51,             61, 71,          59,
        48,                 38,                 50,              60,
        49 ]
    
    var sequence2 = [];
    
    var width = 10;
    var height = 9;
    
    var n=0;
    
    while(sequence2.length<text.length)
    {
        // top left corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            pushIfNotPresent(sequence2, convert(i, n-i, width+1)); 
        }
        // top right corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            pushIfNotPresent(sequence2, convert(width-1-n+i, i, width+1)); 
        }
        // bottom right corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            pushIfNotPresent(sequence2, convert(width-1-i, height-1-n+i, width+1)); 
        }
        // bottom left corner
        for(var i=0 ; i<=n...