JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="bodyWrapper">
<canvas id="bg" width="100" height="100">
</canvas>
</div>
JavaScript
$(document).ready(function(){
var w=$("#bodyWrapper").width();
var h=$("#bodyWrapper").height();
var canv = document.getElementById('bg');
canv.width = w;
canv.height = h;
var ctx = canv.getContext('2d');
var r = new Array(w/2);
var g = new Array(w/2);
var b = new Array(w/2);
for (var i=0; i<(w/2); i++) {
r[i] = Math.floor(Math.random()*180);
g[i] = Math.floor(Math.random()*180);
b[i] = Math.floor(Math.random()*180);
}
function draw(buffer) {
var ctx_b = buffer.getContext('2d');
for (var i=0; i<(w/2); i++) {
ctx_b.beginPath();
var grd = ctx_b.createLinearGradient(i*2, 0, i*2, buffer.height);
grd.addColorStop(0.0, '#000');
grd.addColorStop(0.5, 'rgb(' + r[i] + ',' + g[i] + ',' + b[i] + ')');
grd.addColorStop(1.0, '#000');
ctx_b.strokeStyle = grd;
ctx_b.moveTo(i*2, 0);
ctx_b.lineTo(i*2, buffer.height);
ctx_b.stroke();
grd = null;
}
}
function mixer() {
for (var i=0; i<(w/2); i++) {
p = Math.random();
if (p < 0.997) {
var i1 = (i > 1) ? i - 1 : (w/2 - 1);
var i2 = (i < (w/2 - 1)) ? i + 1 : 0;
r[i] = Math.floor((r[i1] + r[i2]) / 2);
g[i] = Math.floor((g[i1] + g[i2]) / 2);
b[i] = Math.floor((b[i1] + b[i2]) / 2);
i1 = null;
i2 = null;
}
else {
r[i] = Math.floor(Math.random() * 180);
g[i] = Math.floor(Math.random() * 180);
b[i] = Math.floor(Math.random() * 180);
}
}
}
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
function render() {
var buffer = document.createElement('canvas');
buffer.width = w;
buffer.height = h;
var ctx_b = buffer.getContext('2d');
ctx_b.lineWidth = 2;
mixer();
draw(buffer);
ctx.drawImage(buffer, 0,...