JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/empaempa/GLOW/master/build/GLOW.js"></script>
<div id="container"></div>

CSS

#c {
  width:  300px;
  height: 300px;    
}

JavaScript

// SmoothLife JSFiddle
// Author: Mikola Lysenko (http://0fps.net)
// License: BSD
// Based on the following paper;  http://arxiv.org/abs/1111.1567

//Simulation parameters
var parameters = {
    WIDTH: 256,
    HEIGHT: 256,
    KERNEL_RADIUS: 23,
    INNER_RADIUS: 7.0,
    OUTER_RADIUS: 21.0,
    BIRTH_LO: 0.278,
    BIRTH_HI: 0.365,
    DEATH_LO: 0.267,
    DEATH_HI: 0.445,
    ALPHA_N: 0.028,
    ALPHA_M: 0.147,
    STEPS_PER_FRAME: 1,
};

// create a context and set white background
var context = new GLOW.Context();
context.setupClear( { red: 1, green: 1, blue: 1 } );

//Make sure we have floating point textures
if( !context.enableExtension( "OES_texture_float" )) {
  alert( "No support for float textures!" );
  return;
}

// attach the context's DOM element
var container = document.getElementById("container");
container.appendChild( context.domElement );


//Allocate ping pong buffers
var buffer_dims = [ parameters.WIDTH, parameters.HEIGHT ];
var buffers = new Array(2);
var current_buffer = 0;
(function() { 
    
    
    var effective_dims = [Math.ceil(buffer_dims[0]/parameters.INNER_RADIUS), 
                          Math.ceil(buffer_dims[1]/parameters.INNER_RADIUS)];
    var lores = new Array(effective_dims[0] * effective_dims[1]);
    for(var i=0; i<lores.length; ++i) {
        lores[i] = (Math.random() < 0.5) ? 0 : 1;
    }
    
    
    //Create initial conditions
    var initial_state = new Float32Array(buffer_dims[0] * buffer_dims[1] * 4);
    var ptr = 0;
    for(var j=0; j<buffer_dims[1]; ++j) {
        for(var i=0; i<buffer_dims[0]; ++i) {
            var x = Math.floor(i / parameters.INNER_RADIUS);
            var y = Math.floor(j / parameters.INNER_RADIUS);
            
            //initial_state[ptr]   = (100 < i && i < 114 && 100 < j && j < 114) ? 1 : 0;
            initial_state[ptr]   = lores[x + y * effective_dims[0]];
            initial_state[ptr+1] = 0;
            initial_state[ptr+2] = 0;
            initial_state[ptr+3] = 0;
       ...