JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=300 height=300>

JavaScript

var canvas, context, y = 1, dir = -0.01, r;

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');

function loop() {
  y += dir;
  if (y < -1) {
  	y = -1;
    dir = 0.01;
  }
  if (y > 1) {
  	y = 1;
    dir = -0.01;
  }
  r = 150 + 150 * (Math.asin(y)) / (Math.PI / 2);
  // green
  context.globalCompositeOperation = 'source-over';
  context.fillStyle = 'green';
	context.fillRect(0, 0, 300, 300);
  // lime
  context.fillStyle = 'lime';
	context.fillRect(0, r, 300, 300);
  // circle
  context.globalCompositeOperation = 'destination-in';
  context.beginPath();
  context.arc(150, 150, 150, 0, 2 * Math.PI);
  context.fill();

  window.requestAnimationFrame(loop);
}

loop();