JSFiddle - React, Tailwind, and code Playground
by Jake Cattrall
HTML
<canvas id="c" width="1265" height="397" style="width: 1265px; height: 397px;"></canvas>
JavaScript
var a = document.getElementsByTagName('canvas')[0];
var b = document.body;
var d = function(e){ return function(){ e.parentNode.removeChild(e); }; }(a);
// unprefix some popular vendor prefixed things (but stick to their original name)
var AudioContext =
window.AudioContext ||
window.webkitAudioContext;
var requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(f){ setTimeout(f, 1000/30); };
// fix bug in safari: http://qfox.nl/weblog/218
document.body.clientWidth;
// auto resize (original) canvas. call `onresize(w,h) to limit the size of the canvas
(window.onorientationchange = window.onresize = function(a){
var mw = Infinity;
var mh = Infinity;
var min = Math.min;
return function(w,h){
if (arguments.length === 2) {
mw = w;
mh = h;
}
a.style.width = (a.width = min(mw, innerWidth)) + 'px';
a.style.height = (a.height = min(mh, innerHeight)) + 'px';
};
}(a))();
var c = a.getContext('2d');
t = [], n = [], e = (j = c.createImageData(M = a.width /= 4, k = a.height /= 4)).data;
r = function(e, t, n) {
return (t >> 16) * n + (e >> 16) * (1 - n) << 16 | (t & 255 * 256) * n + (e & 255 * 256) * (1 - n) & 255 * 256 | (t & 255) * n + (e & 255) * (1 - n)
};
i = function(e, t, n) {
return 4 + 3 * Math.sin(e / 8) * Math.sin(e / 8 + t / 5)
};
for (s = 0; 2e7 > s; s++) o = s >> 18 & 63, n[s] = o <= i(s & 1023, s >> 10 & 255) ? 2 > o ? 1 : 2 : 0;
for (s = 0; 1023 > s; s++)
for (o = 1023 * Math.random(), u = 255 * Math.random(), a = i(o, u), f = -1; 2 > f; f++)
for (l = -1; 2 > l; l++)
for (p = -1; 2 > p; p++) 2 < a && (n[o | u << 10 | a + p + 1 << 18] = 5) && 1 - f * l * p && (n[o + f | u + l << 10 |...