JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas"></canvas>

JavaScript

//coordinates of rectangle
  var xp = 125;
  var yp = 125;
  
  var circles = [
  	{
    	radius: 45,
      step: 0,
      direction: true,
      speed: Math.PI * 0.1,
    },
    {
    	radius: 42,
      step: 0,
      direction: false,
      speed: Math.PI * 0.05
    },
    {
    	radius: 39,
      step: 0,
      direction: true,
      speed: Math.PI * 0.07
    },
    {
    	radius: 36,
      step: 0,
      direction: false,
      speed: Math.PI * 0.02
    },
     {
    	radius: 33,
      step: 0,
      direction: true,
      speed: Math.PI * 0.06
    },
     {
    	radius: 30,
      step: 0,
      direction: false,
      speed: Math.PI * 0.04
    }  
  ];
  
  //How often to move the arc:
  var stepTime = 50;

function doDraw() {
	var can = document.getElementById("myCanvas");
  can.width = 250;
  can.height = 250;
  var context = can.getContext("2d");
  context.imageSmoothingEnabled= true;
  
  //Erase the canvas by painting it blue:
  context.fillStyle="#0000FF";
  context.fillRect(0, 0, 250, 250);
  
  //Set the drawing color to white:
  context.strokeStyle="#FFFFFF";
  context.lineWidth = 4;
  
  for (var i = 0; i<circles.length;i++) {
  	var arc = circles[i];
    maintainArc(context, arc);
  }
  
  //Wait, and then call this function again to animate:
  setTimeout(function() {
  	doDraw();
  }, stepTime);
	
}
    
function maintainArc(context, arc) {
	var radius = arc.radius;
  var step = arc.step;
  context.beginPath();
	context.arc(xp, yp, radius, 0 + step, 1.5*Math.PI + step);
  
  context.stroke();
  
  
  //maintain the step angle differently for clockwise and counter clockwise
  if (arc.direction) {
  	step = step + arc.speed;
  	if (step>Math.PI * 2) {
  		step = step - Math.PI * 2;
  	}
  } else {
  	step = step - arc.speed;
    if (step<Math.PI * 2) {
  		step = step + Math.PI * 2;
  	}
  }
  arc.step = step;
}    
    
doDraw();