JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<canvas id="canvas"></canvas>

CSS

canvas{
  outline:1px solid blue;
}

JavaScript

var canvas = $("#canvas").get(0);
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height= 500;
var PI = Math.PI;

//Параметры звезды
    var R1 = 200, R2 = 100, count = -1, XC = 250, YC = 250;
    var step = 0.2 * PI, angle = 1.6 * PI;
    var P = [];
    while (++count < 10)    {
    	P[count] = {
      x: XC + R1 * Math.sin(angle),
      y: YC - R1 * Math.cos(angle)
      };
        angle += step;
        P[++count] = {
        x:XC + R2 * Math.sin(angle) ,
        y:YC - R2 * Math.cos(angle)
        };
        angle += step;
    }
    P[count] = P[0];
    
    
    
    //Рисуем
    var iterator = 0;
    (function(){
    	ctx.clearRect(0,0,500,500);
          //Рисуем звезду
        ctx.beginPath();
        for(var i = 0; i < Math.min(iterator,P.length);i++){
          if(i == 0)
            ctx.moveTo(P[i].x,P[i].y);
          else
            ctx.lineTo(P[i].x,P[i].y);
        }
        ctx.strokeStyle = "#F00";
        	ctx.stroke();
        ctx.closePath();
        
        //Раздвигаем половины
        if(iterator-1 > P.length){
        	var data = ctx.getImageData(0,0,250,500);
          var data2 = ctx.getImageData(250,0,250,500);
          ctx.clearRect(0,0,500,500);
          ctx.putImageData(data,-((iterator - P.length)*3),0);
          ctx.putImageData(data2,250+((iterator - P.length)*3),0);
        }
        
				iterator = (iterator + 1)%(P.length+100);
        setTimeout(arguments.callee,iterator > P.length?20:200);
    })()