JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
//{\displaystyle \operatorname {distance} (P,\theta ,(x_{0},y_{0}))=|\cos(\theta )(P_{y}-y_{0})-\sin(\theta )(P_{x}-x_{0})|}
function distanceToPoint(px, py, angle) {
	const cx = width / 2;
  const cy = height / 2;
  return Math.abs((Math.cos(angle) * (px - cx)) - (Math.sin(angle) * (py - cy)));
}

function render(time) {
	context.fillStyle = 'yellow';
  context.fillRect(0, 0, width, height);
	const angle = time / 1000;
	const dist = Math.max(
  	distanceToPoint(0, 0, angle),
    distanceToPoint(0, height, angle)
  );
  const ox = Math.cos(angle) * dist;
  const oy = Math.sin(angle) * dist;
  const gradient = context.createLinearGradient(
  	width / 2 + ox,
    height / 2 + oy,
  	width / 2 - ox,
    height / 2 - oy
  )
  gradient.addColorStop(0, 'yellow');
  gradient.addColorStop(0.01, 'white');
  gradient.addColorStop(0.99, 'black');
  gradient.addColorStop(1, 'yellow');
  context.fillStyle = gradient;
  context.fillRect(0, 0, width, height);
  requestAnimationFrame(render);
}
 requestAnimationFrame(render);