JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id=c width="250" height="250">
<!--

convert ../triune_infinite+density.gif  -coalesce -layers dispose -resize 0x250^ +repage test.gif


convert test.gif -gravity Center -crop 260x260+0+0 +repage  test.gif

montage ./test.gif -tile x1 -geometry +0+0 -alpha On -background 'rgba(0,0,0,1)' -quality 90 -define webp:lossless=true ./test.webp

-->

JavaScript

var x = new Image();
x.src = 'https://live.iomods.com:8000/test.webp';
var index = 0;
var ctx = c.getContext('2d');

function update () {
  ctx.drawImage(x, 5+(index*260), 0, 260, 260, 0, 0, 260, 260);
  index++;
  if (index == 24) index = 0;
}

setInterval(update,16);