JSFiddle - React, Tailwind, and code Playground
by James Hooper
HTML
<canvas id="canvas-anim" width="1920" height="990"></canvas>
JavaScript
/**
* 3D Funky Internet Animation Thing
* (C) Silktide 2014
*
* By Oliver Emberton and Doug Nelson.
*/
/**
* Add browser-agnostic support for requestAnimationFrame
*/
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
var cookie = {
create: function (name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000))
expires = "; expires="+date.toGMTString();
}
document.cookie = name+"="+value+expires+"; path=/";
},
read: function(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ')
{
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length,c.length);
}
return null;
},
erase: function(name){
this.create(name, "", -1);
}
};
/**
* Full-screen canvas
*/
function Canvas(id)
{
this.hide = false;
this.canvas = document.getElementById(id);
...