JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

svg:not(:root) {
  display:block;
}        

canvas {
  width: 100%;
  height: 100%;
}

JavaScript

var ctx = document.getElementById('canvas').getContext('2d');
var timer = 0;


function draw() {
  ctx.canvas.width = 800;
  ctx.canvas.height = 800;
  ctx.beginPath();
  ctx.arc(400, 400, 105 * Math.pow(Math.sin(timer / 150), 2), 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(400, 400, 180  * Math.pow(Math.sin(timer / 100), 2) , 0, Math.PI * 2, false); 
  ctx.stroke();
} 

function animate() {
	requestAnimationFrame(animate);
  
  timer++;
  draw();
}

animate();