JSFiddle - React, Tailwind, and code Playground

by serio

CSS

html { height: 100%; overflow: hidden; }
      body { margin: 0; padding: 0; height: 100% }

JavaScript

$(function()
{
// requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
  

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/


var canvas, context;
var amount = 100;


var sizes_offsets = (function(){
  var obj = {};
  obj.sizes = [], obj.offsets = [];
  for( var i = 0; i < amount; i++ )
  {
    obj.sizes.push( Math.round( Math.random()*80 ) );
    obj.offsets.push( Math.random()*0.0005 );
  };
  return obj;
})();

console.log( sizes_offsets );

init();
animate();

function randBetween( min, max )
{
  return Math.round( Math.random() * ( max - min + 1 ) + min )
};

function init() {

    canvas = document.createElement( 'canvas' );
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    
    context = canvas.getContext( '2d' );
    
    document.body.appendChild( canvas );

}

function animate() {
    requestAnimFrame( animate );
    draw();
}

function addArc() {
  
}

function draw( offset, size ) {
    
    context.fillStyle = '#000';
    context.fillRect( 0, 0, canvas.width, canvas.height );
    
    for( var i = 0; i < amount; i++ )
    {
      var time = ( new Date().getTime() * sizes_offsets.offsets[ i ] );
      var x = Math.sin( time ) * ( canvas.width / 2 ) + ( canvas.width / 2 );
      var y = Math.cos( time * 0.9 ) * ( canvas.height / 2 ) + ( canvas.height / 2 );
      context.fillStyle = '#FFF';
      context.beginPath();
      context.arc( x, y, randBetween( 40, 60 ), 0, Math.PI * 2, true );
      context.closePath();
     ...