JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="diamond" width="100" height="100"></canvas>

JavaScript

var canvas = document.getElementById("diamond");
    var context = canvas.getContext("2d"); 

var diamond = function (x,y, color){
    x = x || 0;
    y = y || 0;
    color = color || "#F2673D";
    context.beginPath();
    context.moveTo(25 + x,15 + y);   
    context.lineTo(40 + x,25 + y);
    context.lineTo(25 + x,35 + y);
    context.lineTo(10 + x,25 + y);     

    context.lineWidth = 0;
    context.fillStyle = color;     

    context.closePath(); 

    context.fill();     
}

function clearCanvas() {
	context.clearRect(0, 0, canvas.width, canvas.height);
}

function move(p){
  if (p < 200 ){
    setTimeout(function(){
      clearCanvas();
      diamond(p, p, "#F2673D");    
      p += 10;
     move(p);
    }, 1000);
  }
}

move(10);