JSFiddle - React, Tailwind, and code Playground

by truetone

HTML

<canvas class="touch-directory" width="50" height="50"></canvas>

CSS

canvas {
    background: #ccc;
}

JavaScript

$(document).ready(function ()
{
    // <canvas> pulsators
    new Pulse('canvas.touch-directory', 10, '0, 196, 0', '0, 127, 0', true, -0.4);
});

/**
 * Pulse initiator
 * 
 * @param {String}  selector
 * @param {Number}  radius
 * @param {String}  strokeColour x, y, z
 * @param {String}  fillColour   x, y, z
 * @param {Boolean} addLine
 * @param {Number}  startAngle
 */
function Pulse(selector, radius, strokeColour, fillColour, addLine, startAngle)
{
    $(selector).each(function ()
    {
        var canvas = $(this).get(0);
        var ctx = canvas.getContext('2d');
        
        var rings = [];
        
        var ring = new Ring(radius, ctx, strokeColour, fillColour, addLine, startAngle);            
        var proxy = ring.grow;
        
        ring.radiusDiff = 0;
        ring.maxRings = 3;
        
        ring.grow = function ()
        {
            var radiusBefore = this.radius;
            
            proxy.call(this);
            
            this.radiusDiff += this.radius - radiusBefore;
            
            if (this.radiusDiff > 3 && rings.length <= this.maxRings)
            {
                this.radiusDiff = 0;
                rings.push(new Ring(radius, ctx, strokeColour, fillColour, addLine, startAngle));
            }
        }
        
        rings.push(ring);
        
        ctx.lineWidth = 1;
        
        // To center on origin
        ctx.translate(25, 25);
        
        // So nib points straight up
        ctx.transform(Math.cos(Math.PI / 2), -Math.sin(Math.PI / 2), Math.sin(Math.PI / 2), Math.cos(Math.PI / 2), 0, 0);
        
        setInterval(
            function ()
            {
                ctx.clearRect(-25, -25, 50, 50);
                
                var x = rings.length;
                while (x--)
                {
                    rings[x].draw();
                }
            },
            50
        );
    });
}

/**
 * Pulse ring
 * 
 * @constructor
 * @param {Number}  radius
 * @param...