JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<div id="test">
<canvas class="canvas" width="500" height="113"></canvas>
</div>

CSS

#test {
    background: #333;
}

JavaScript

(function($) {
    /**
	 * Provide a cross-browser/fall back
	 * solution for the requestAnimationFrame.
	 */
	window.requestAnimFrame = (function(){ 
		return  window.requestAnimationFrame       ||  
				window.webkitRequestAnimationFrame ||  
				window.mozRequestAnimationFrame    ||  
				window.oRequestAnimationFrame      ||  
				window.msRequestAnimationFrame     ||  
				function( callback ){ 
					window.setTimeout(callback, 1000 / 60); 
				};
	})();
	/**
	 * Determine the pixel ratio of the device
	 * to scale our canvas for retina devices.
	 */
	var pixelRatio = (window.devicePixelRatio === 1 ? 1 : 2);

	function bokeh_1_draw() {
		var me = this;
		window.requestAnimFrame(function() {
			bokeh_1_draw.call(me);
		});
		setTimeout(function() {

			var canvas 	= $(me).find('.canvas'),
				ctx = canvas[0].getContext('2d'),
				items 	= canvas.data('items'),
				tick 	= canvas.data('tick'),
				width 	= canvas[0].width,
				height 	= canvas[0].height;

			// Clear/reset the canvas.
			ctx.setTransform(1, 0, 0, 1, 0, 0);
			ctx.clearRect(0, 0, width, height);
			ctx.restore();

			// Loop through each of the dots and draw them.
			for (var i = 0, item; item = items[i]; i++) {
				// Draw the bokeh dot.
				ctx.save();
				ctx.beginPath();
				ctx.globalAlpha = item.A;
				ctx.fillStyle = '#FFF';
				ctx.arc(item.X, item.Y, item.R, 0, 2 * Math.PI);
				ctx.closePath();
				ctx.fill();
				ctx.restore();

				// Increment the axis for the next draw.
				item.X += (item.VX / item.S);
				item.Y += (item.VY / item.S);

				// Check if the dot will be out of
				// bounds on the next draw and reposition.
				if (item.X < -(item.R)) item.X = width + item.R;
				if (item.Y < -(item.R)) item.Y = height + item.R;
				if (item.X > width + item.R) item.X = -item.R;
				if (item.Y > height + item.R) item.Y = -item.R;
			}

			// Update the tick/items.
			canvas.data({
				'tick' 	: tick + 1,
				'items' : items
			});

		}, 1000 / 25);
	}
	function...