JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<script src="https://cdn.tailwindcss.com"></script>
<div class="w-screen h-screen flex items-center justify-center bg-slate-50">
 <div class="bg-slate-900/80 p-4 rounded border border-slate-700/70 ring-1 ring-slate-400/70 ring-inset shadow-2xl flex flex-col gap-2">
   <div class="h-[16px] flex gap-2 items-center">
     <div class="h-[16px] w-[10px] bg-green-500/90"></div>
     <div class="flex gap-5 items-center">
       <span class="text-white font-mono">Transacción a1s548sf se ha completado.</span>
       <span class="text-slate-400 font-mono text-sm">24/02/2023</span>
     </div>
   </div>
   <div class="h-[16px] flex gap-2 items-center">
     <canvas id="canvas" width="16" height="16" ></canvas>
     <div class="flex gap-5 items-center">
       <span class="text-white font-mono">Generando hash de la transacción.</span>
       <span class="text-slate-400 font-mono text-sm">24/02/2023</span>
     </div>
   </div>
 </div>
</div>

<div class="w-0 h-0 opacity-0 overflow-hidden">
  <canvas id="canvasTemp" width="16" height="16"></canvas>
</div>

JavaScript

let ctx = canvas.getContext("2d");
let ctxTemp = canvasTemp.getContext("2d");

let x = 0;
let y = 0;
let xRange = [0, 11];
let yRange = [0, 11];
let xDirection = true;
let yDirection = true;
let toggle = true;
let size = 5;
let i = 0;

function animation() {
	i++;
  if (toggle) {
    x += xDirection ? 1 : -1;
    if (xRange.includes(x)) {
      xDirection = !xDirection;
      toggle = !toggle;
    }
  } else {
    y += yDirection ? 1 : -1;
    if (yRange.includes(y)) {
      yDirection = !yDirection;
      toggle = !toggle;
    }
  }
  
  ctxTemp.clearRect(0, 0, 500, 500);
	ctxTemp.globalAlpha = 0.83;
	ctxTemp.drawImage(canvas, 0, 0);
  
	ctx.clearRect(0, 0, 500, 500);
	ctx.drawImage(canvasTemp, 0, 0);

  let halfSize = (size - 1) >> 1;

  ctx.fillStyle = `hsl(${(new Date().getMilliseconds() * (1/3)) % 360}, 100%, 85%)`;
  ctx.beginPath();
  // ctx.rect(x, y, size, size);
  let half = size * 1.5
  //ctx.rect(Math.sin(i) * size + half, Math.cos(i) * size + half, size, size);
  ctx.arc(-Math.sin(i * 0.2) * size + half, Math.cos(i * 0.2) * Math.sin(i * 0.2) * size + half, size / 2, 0, Math.PI * 2);
  ctx.fill();

}

setInterval(animation, 30);