JSFiddle - React, Tailwind, and code Playground

HTML

<p><h1>10,000 Processes</h1></p>
        <table id="big-table" cellpadding="0" cellspacing="0"></table>
        <input id="clickMe" type="button" value="Pause" onclick="doPause();" />

CSS

table {
    margin-left: 45px;
    font-family: courier;
    font-size: 8px;
    line-height: 1em !important;
}

@font-face {
    font-family: 'Latin Modern Roman';
    src: url('http://swannodette.github.io/assets/themes/tom/css/lmroman10-regular-webfont.eot');
    src: url('http://swannodette.github.io/assets/themes/tom/css/lmroman10-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('http://swannodette.github.io/assets/themes/tom/css/lmroman10-regular-webfont.woff') format('woff'),
    url('http://swannodette.github.io/assets/themes/tom/css/lmroman10-regular-webfont.ttf') format('truetype'),
    url('http://swannodette.github.io/assets/themes/tom/css/lmroman10-regular-webfont.svg#latin_modern_roman10_regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1 {
    font-family: 'Latin Modern Roman', Georgia, 'Times New Roman', Times, serif;
    font-size: 24px;
    margin-left: 45px;
}

.group0 {
    color: #000
}
.group1 {
    color: #f00
}
.group2 {
    color: #0f0
}
.group3 {
    color: #00f
}
.group4 {
    color: #ff0
}
.group5 {
    color: #0ff
}

JavaScript

var table = document.getElementById('big-table');
var isRunning = true;

/**
 * Return an integer within and including the provided boundaries
 * @param min
 * @param max
 * @returns {*}
 */
function randomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function setup() {
    for (var i =0;i<100;i++) {
        var row = table.insertRow(i );

        for (var j= 0; j<100;j++) {
            var cell = row.insertCell(j);
            cell.setAttribute('id','cell-' + i + j);
            cell.innerHTML = randomInt(0,9);
            cell.setAttribute('class','group' + randomInt(0,5));
        }
    }
}

window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

function animationLoop() {
    for (var i =0;i<100;i++) {
        for (var j= 0; j<100;j++) {
            //decision to animate or hold off
            var decisionRange = randomInt(0,10);
            if (decisionRange < 1) {
                var cell = document.getElementById('cell-' + i + j);
                cell.innerHTML = randomInt(0,9);
                cell.setAttribute('class','group' + randomInt(0,5));
            }
        }
    }
}

function runRecursive(count) {
    animationLoop();
    if ((count < 10000) && isRunning) {
        requestAnimFrame(function() {
            runRecursive(count + 1);
        });
    }
}

/**
 * Handle pause button being clicked
 */
function doPause() {
    if (isRunning == true) {
        isRunning = false;
    }   else {
        isRunning = true;
        runRecursive(0);
    }
}

setup();
runRecursive(0);
console.log("Done!");