JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="1000" height="250"></canvas>

CSS

body {
       margin: 0px;
       padding: 0px;
       background: #f1ecec;
   }

JavaScript

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
}());

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var circles = [];

createCircle(100, 100, '78', function () {
    createCircle(270, 100, '460', function () {
        createCircle(440, 100, '20', function () {
            createCircle(610, 100, '15', null);
        });
    });
});



function createCircle(x, y, text, callback) {
    var radius = 75;
    var endPercent = 101;
    var curPerc = 0;
    var counterClockwise = false;
    var circ = Math.PI * 2;
    var quart = Math.PI / 2;

    context.lineWidth = 10;
    context.strokeStyle = '#ad2323';
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;

    function doText(context, x, y, text) {
        context.lineWidth = 1;
        context.fillStyle = "#ad2323";
        context.lineStyle = "#ad2323";
        context.font = "28px sans-serif";
        context.fillText(text, x - 15, y + 5);
    }

    function animate(current) {
        context.lineWidth = 10;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
        context.stroke();
        curPerc++;
        if (circles.length) {
            for (var i = 0; i < circles.length; i++) {
                context.lineWidth = 10;
                context.beginPath();
                context.arc(circles[i].x, circles[i].y, radius, -(quart), ((circ) * circles[i].curr) - quart, false);
                context.stroke();
                doText(context, circles[i].x, circles[i].y, circles[i].text);
            }
        }
        if (curPerc < endPercent) {
            requestAnimationFrame(function () {
                animate(curPerc / 100)
            });
       ...