JSFiddle - React, Tailwind, and code Playground

by Eshy Lavi

HTML

<html>
<body>


<canvas id="c" width="1191" height="811" style="border:4px solid white;"></canvas>


</body>
<script>
	var canvas= document.getElementById('c');
var       ctx = canvas.getContext("2d");



function init(){
	
 window.requestAnimationFrame(draw);
}
var uu=2;
var y0=0;var x0=0;
var sgn=1;
var _r=121;var _g=222; var _b=23; var _dr=0.524;var _db=0.0001;var _dg=3.03;
var _a=0.5;
var facta=3;
var segis=883;
var tht=0;
var dtht=12.25;//0.025;
var ra0=100;
var myR=100;
var myr=100;
var mycnst=0.01;
var mymidx=300;
var mymidy=200;
var myc2=99 ;
ctx.fillStyle='rgba(0,0,0,1)';
 ctx.fillRect(0,0,1191,811);

function draw(){
	

 ctx.lineWidth=12;
 ctx.strokeStyle="rgba("+_r+","+_g+","+_b+","+_a+")"; 
 ctx.shadowBlur = 10;
 ctx.shadowColor = "rgba("+_r+","+_g+","+_b+","+_a+")";
 
 _r=_r+_dr;
 _g=_g+_dg;
 _b=_b+_db;
 
 if (_r<1||_r>255){_dr*=-1; _r=_r+_dr;}
 if (_g<1||_g>255){_dg*=-1; _g=_g+_dg;}
 if (_b<1||_b>255){_db*=-1; _b=_b+_db;}

ctx.globalCompositeOperation='source-over';

ctx.beginPath();
  
  tht=tht+dtht;
//	if (Math.floor(tht/Math.PI)%22==0){
 //

//myc2=myc2+0.0005;
//}
mycnst=mycnst+0.0001;myc2=myc2-0.000001;
         ctx.moveTo(x0+mymidx,y0+mymidy);
	x0=(myR-myc2*Math.sin(tht/mycnst))*Math.cos(tht);
	y0=(myR-myc2*Math.sin(tht/mycnst))*Math.sin(tht);

         ctx.lineTo(x0+mymidx, y0+mymidy);
      ctx.stroke();



 window.requestAnimationFrame(draw);
}
init();
</script>
<html>