JSFiddle - React, Tailwind, and code Playground

by Kelvin Russell

HTML

<script src="https://kelvin.onl/derp/die.js"></script>
<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*8)) * Math.sin(theta);
  y = (80 * Math.sin(d*8)) * 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/10;
  window.requestAnimationFrame(dd);  
}
dd();
setInterval(function(){multi+=0.000012345},0);
setInterval(function(){d+=0.0012345},0);