JSFiddle - React, Tailwind, and code Playground

by codepo8

HTML

<section></section>

JavaScript

var animcanvas = document.createElement( 'canvas' ),
    animctx = animcanvas.getContext( '2d' ),
    container = document.querySelector('section'),
    height = width = 300,
    halfwidth = width / 2,
    halfheight = height / 2,
    offset = i = x = 0,
    radius = height / 2 - 10;

animcanvas.width = width;
animcanvas.height = height;
container.appendChild(animcanvas);

function loop(){
  animctx.clearRect( 0, 0, width, height );
  animctx.save();
  animctx.translate( halfwidth, halfheight );
  offset += 0.06;
  animctx.rotate( offset );
  while( radius > 10 ) {
    animctx.fillStyle = i % 2 === 0 ? '#000' : '#fff';
    radius -= 6;
    x = Math.sin( i / 2 ) * 10;
    animctx.beginPath();
    animctx.arc( x, 0, radius, 0, Math.PI * 2 ,true ); 
    animctx.closePath();
    animctx.fill(); 
    i++;
  }
  radius = height / 2 - 10;
  i=0;
  animctx.restore();
  requestAnimationFrame( loop, 60 );
}

/**
 * Provides requestAnimationFrame in a cross browser way.
 * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 */
if ( !window.requestAnimationFrame ) {
  window.requestAnimationFrame = ( function() {
    return window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(  callback, fps ) {
      window.setTimeout( callback, 1000 / fps );
    };
  } )();
}

loop();