JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

<script src="http://jaggedsoft.net/demo/mersenne-twister.js"></script>
<script src="http://jaggedsoft.net/demo/universal.js"></script>
<script src="http://jaggedsoft.net/demo/gdi.js"></script>
<canvas id="canvas1"></canvas>

CSS

body {
margin:0;
} #canvas {
z-index:1;
position:absolute;
left:0px;
top:0px;
}

JavaScript

$( document ).ready(function() {
var r1=80,r2=220;
var g1=80,g2=220;
var b1=255,b2=255;
var _drain = 2;
var _blocksize = 2;
var _minclamp = 150;
var _spacing = 1.1;
var _pattern = new Array(
"-#-#-##----#-#--#--###-#-#-###-##--",
"-#-#-#-#---###-#-#--#--#-#-#---#-#-",
"-#-#-##----###-#-#--#--###-##--##--",
"-#-#-#-#---#-#-#-#--#--#-#-#---#-#-",
"-###-#-#---#-#--#---#--#-#-###-#-#-"
);
var _total_count = 0;
var _length = _pattern[0].length;
console.log("length: "+_length);
var canvassize = (_blocksize*_length)*_spacing;
console.log("size: "+canvassize);
var mtrand = new MersenneTwister();
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext("2d");
var _w = 1800, _h = 800;
canvas.setAttribute('width',_w);
canvas.setAttribute('height',_h);
for ( var _dy = 0 ; _dy < _length ; ++_dy ) {
	for ( var _dx = 0 ; _dx < _length ; ++_dx ) {
		if ( _pattern[_dy].charAt(_dx) == '#' ) {
			var _chunk = _dy+'.'+_dx;
			_pattern[_chunk] = Rand(128,255);
			++_total_count;
		}
	}
}

setInterval('logo_sparks()',30);
 });
function logo_sparks() {
	var rgb,_r,_g,_b;
	var switched = false;
	for ( var _dy = 0 ; _dy < _length ; ++_dy ) {
		var dy = parseInt((_dy * _blocksize) * _spacing);
		for ( var _dx = 0 ; _dx < _length ; ++_dx ) {
			var dx = parseInt((_dx * _blocksize) * _spacing);
			var _chunk = _dy+'.'+_dx;
			if ( !isNaN(_pattern[_chunk]) ) {//if ( _pattern[_dy].charAt(_dx) == '=' ) {
				//_pattern[_chunk] -= Rand(1,_drain);
				_pattern[_chunk] -= _drain;
				if ( _pattern[_chunk] < _minclamp ) _pattern[_chunk] = _minclamp;
				rgb = BlendRGBI(r1,r2,g1,g2,b1,b2,_pattern[_chunk]);
				_r = rgb.r;
				_g = rgb.g;
				_b = rgb.b;
				ctx.fillStyle = 'rgb('+_r+','+_g+','+_b+')';
				ctx.fillRect(dx,dy,_blocksize,_blocksize);
				if ( !switched && Rand(0,_length*3) == 0 ) {
					_pattern[_chunk] = 255;
					switched=true;
				} else {
					if ( Rand(0,_length) == 0 ) switched = false;
				}
			}
		}
	}
}
function Randf(_min,_max) {
	return...