JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id=c width=400 height=400></canvas>

JavaScript

var theta = 0,d=1;multi=1,round=Math.round,sqrt=Math.sqrt,clr=0;
var dd = function () {
  if(clr)c.getContext('2d').clearRect(0,0,400,400);
  c.getContext('2d').beginPath();
  x = (80 * Math.sin(d*10)) * Math.sin(theta);
  y = (80 * Math.sin(d*10)) * Math.cos(theta);
  col = [round(100-x),round(200-y),round(100+y)];
  c.getContext('2d').fillStyle = 'rgba('+col.join()+',1)';
  c.getContext('2d').fillRect(x+160,y+160,50,50);
  c.getContext('2d').rect(x+160,y+160,50,50);
  c.getContext('2d').stroke();
  theta+=multi/100;
  window.requestAnimationFrame(dd);  
}
dd();
setInterval(function(){multi+=0.0012345},32);
setInterval(function(){d+=0.027},100);
setInterval(function(){clr=!clr},12000);