JSFiddle - React, Tailwind, and code Playground

JavaScript

/**
 * 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 || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

			window.setTimeout( callback, 1000 / 60 );

		};

	} )();

}

var canvas, context;

init();
animate();

function init() {
	canvas = document.createElement( 'canvas' );
	canvas.width = 256;
	canvas.height = 256;

	context = canvas.getContext( '2d' );

	document.body.appendChild( canvas );
}

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

function draw() {
	var time = new Date().getTime() * 0.002;
	var x = Math.sin( time ) * 96 + 128;
	var y = Math.cos( time * 0.9 ) * 96 + 128;

	context.fillStyle = 'rgb(245,245,245)';
	context.fillRect( 0, 0, 255, 255 );

	context.fillStyle = 'rgb(255,0,0)';
	context.beginPath();
	context.arc( x, y, 10, 0, Math.PI * 2, true );
	context.closePath();
	context.fill();
}