JSFiddle - React, Tailwind, and code Playground

by Kelvin Russell

HTML

<script src="https://kelvin.onl/derp/die.js"></script>
<body bgcolor=black>
<canvas id=c width=500 height=500></canvas>

JavaScript

var i=new Image(),ic,id;
var round=Math.round,sqrt=Math.sqrt;
var r=-200,a=0;
var dd = function () {
   c.getContext('2d').translate(200,200);
   c.getContext('2d').rotate(0.01*Math.PI/180);
  c.getContext('2d').clearRect(0,0,500,500);
  c.getContext('2d').beginPath();
  for(d=20;d<200;d+=5) {
    for(j=0;j<360;j+=5) {
      theta =j+a*(Math.PI/180);
      y = round(d * Math.sin(theta));
      x = round(d * Math.cos(theta));
      if(ic) {
        offset = (j*4 + ((d+r) *360*4));
	rgba = [id[offset],id[offset+1],id[offset+2],1];
        c.getContext('2d').fillStyle='rgba('+rgba.join()+')';
        c.getContext('2d').fillRect(x+200,y+200,10,10);
        //console.log(rgba);
      }
    }
  }
      c.getContext('2d').translate(-200,-200);

  c.getContext('2d').stroke;
        c.getContext('2d').fillStyle='rgba(200,180,123,0.5)';
        c.getContext('2d').font = '80px verdana'
        c.getContext('2d').fillText('ears',120,120);
        c.getContext('2d').fillText('melting',160,180);
        c.getContext('2d').fillStyle='rgba(200,180,123,0)';
  window.requestAnimationFrame(dd);  
}
//purple coolness// imgsrc='//connect.agariomods.com/img_mvl84.png';
//imgsrc='//connect.agariomods.com/img_o.png';
//red yellow//imgsrc='//connect.agariomods.com/img_onerepublic.png';
imgsrc='//connect.agariomods.com/img_the werewolf.png';
//imgsrc='//connect.agariomods.com/img_nikeflamme971.png';
i.src=imgsrc;
i.crossOrigin = "Anonymous";
i.onload=function(){
console.log('loaded image');
ic=document.createElement('canvas');
ic.getContext('2d').width = 360;
ic.getContext('2d').height= 360;
ic.getContext('2d').drawImage(this,0,	0,360,	360);
id=ic.getContext('2d').getImageData(0,0,360,360).data;
};
dd();
setInterval(function(){
 r-=2; 
if(r<-150) r=120;
},0);
setInterval(function(){
 a-=0.1;
if(a<-720) a=0;
},10);