JSFiddle - React, Tailwind, and code Playground

HTML

<section id="timerCircles">
            <article id="timer">asa</article>

            <article id="backgroundCircle"></article>
        </section>

CSS

#timer{
	position: absolute;
	background: #FFF6E5;
}

#timerCircles{
	position: relative;
	width: 320px;
	margin: 10px auto;
}

JavaScript

/************************************************************************/
	/* Raphael JS magic
	 *************************************************************************/
	var drawTheCircleVector = function(xloc, yloc, value, total, R) {
			var alpha = 360 / total * value,
				a = (90 - alpha) * Math.PI / 180,
				x = xloc + R * Math.cos(a),
				y = yloc - R * Math.sin(a),
				path;
			if (total == value) {
				path = [
					["M", xloc, yloc - R],
					["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
				];
			} else {
				path = [
					["M", xloc, yloc - R],
					["A", R, R, 0, +(alpha > 180), 1, x, y]
				];
			}
			return {
				path: path
			};
		}; /************************************************************************/
	/* Make the circles
	 *************************************************************************/
	var timerCircle = Raphael("timer", 320, 320);
	var circleBg = Raphael("backgroundCircle", 320, 320);
	timerCircle.customAttributes.arc = drawTheCircleVector
	circleBg.customAttributes.arc = drawTheCircleVector 
	
	/************************************************************************/
	/* draw the circles
	 *************************************************************************/
	var drawMe = circleBg.path().attr({
		"fill": "#FF7F66",
		"stroke": 0,
		arc: [160, 160, 100, 100, 140]
	});
	var clickOnes = true;
	drawMe.node.onclick = function() {
		if (clickOnes == true) {
			circleDraw.animate({
				arc: [100, 100, 0, 100, 100]
			}, 500);
			circleDraw.toFront();
			drawMe.animate({
				arc: [100, 100, 100, 100, 100]
			}, 500);
			circleDraw.toFront();
			clickOnes = false;
		} else {
			circleDraw.animate({
				arc: [160, 160, 0, 100, 150]
			}, 500);
			circleDraw.toFront();
			drawMe.animate({
				arc: [160, 160, 100, 100, 140]
			}, 500);
			circleDraw.toFront();
			clickOnes = true;
		}
	};
	// arc: [Xposition, Yposition, how much 1 = begin 100 = end, ? = 100, 150];
	...