JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<canvas id="canvas" width="300" height="520"></canvas>

CSS

#canvas{
    background: #000000;
    padding: 10px;
}

JavaScript

window.requestAnimFrame = (function (callback) {
	    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
	        window.setTimeout(callback, 1000 / 60);
	    };
	})();

	var app = {
	    tick: 0,
	    initial_tick: 0,
	    fps: 60,
	    angle: 0,
	    rings: new Array
	};

	app.canvas = $('#canvas')[0];
	app.ctx = canvas.getContext("2d");

	app.centerx = app.canvas.width / 2;
	app.centery = app.canvas.height / 2;	
app.all_finished = false;
	app.config = {
        delay: 10,
	    radius: 0,
	    elements: 5,
	    lineWidth: 0
	};

var shortest_side = (app.canvas.width>app.canvas.height) ? app.canvas.height: app.canvas.width;
app.config.lineWidth = (shortest_side/2)/app.config.elements;
app.config.radius = app.config.lineWidth * app.config.elements;



	app.byte2Hex = function (n) {
	    var nybHexString = "0123456789ABCDEF";
	    return String(nybHexString.substr((n >> 4) & 0x0F, 1)) + nybHexString.substr(n & 0x0F, 1);
	}

	app.RGB2Color = function (r, g, b) {
	    return '#' + app.byte2Hex(r) + app.byte2Hex(g) + app.byte2Hex(b);
	}

	app.generateColor = function (elem, limit) {
	    var frequency = 2 * Math.PI / limit;

	    red = Math.sin(frequency * elem + 0) * 127 + 128;
	    green = Math.sin(frequency * elem + Math.PI / 2) * 127 + 128;
	    blue = Math.sin(frequency * elem + Math.PI) * 127 + 128;

	    return app.RGB2Color(red, green, blue);
	}

	// Colors end

	app.drawRing = function (ctx, x, y, rad, c, color, angle) {
	    ctx.beginPath();
	    ctx.arc(x, y, rad, angle, c);
      //ctx.fillStyle = color;
      //ctx.fill();
	    ctx.lineWidth = app.config.lineWidth;
	    ctx.strokeStyle = color;
	    ctx.stroke();
	}

	app.redraw = function () {
	    app.ctx.clearRect(0, 0, app.canvas.width, app.canvas.height);
	    
	    for (j = 0; j < app.rings.length; j++) {
	    		if( j*app.config.delay <...