JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pixels1" class="pixels"></div>

CSS

.pixels{
 background-color:hsla(0,0%,0%,0);
 padding:2px 0 0 2px;
 overflow:auto;
 clear:both;
 position:absolute;
}
.pixels>div{
 background-color:hsla(210,100%,50%,1);
 float:left;
 width:16px;
 height:16px;
 padding:0;
 margin:0 2px 2px 0;
 position:relative;
 box-shadow:0 1px 2px 0 hsla(0,0%,0%,.5);
}
.pixels>div:before{
 left:0;top:0;
 position:absolute;
 width:12px;
 height:12px;
 background-color:hsla(0,0%,0%,0);
 content:'';
 border:2px solid hsla(0,0%,100%,1);
}
.pixels>div:after{
 left:0;top:0;
 position:absolute;
 width:12px;
 height:12px;
 background-color:hsla(0,0%,0%,0);
 content:'';
 border-radius:50%;
 border:2px solid hsla(0,0%,100%,1);
}

JavaScript

var shift=0,
scale=1,
pixels=10,
duration=6000,
start=Date.now(),
now,
board=document.getElementById('pixels1');

for(var i=0;i<pixels;i++){
 board.appendChild(document.createElement('div'));
}

function A(){
 now=Date.now()-start;
 for(var i=0;i<pixels;i++){
  var scaled=pixels*scale;
  board.childNodes[i].style.backgroundColor='hsla('+(((360/scaled*i)+shift)%360)+',100%,50%,1)';
 }
 shift=(now/duration*360|0)%360;
 if(now>duration){start=Date.now()};
}

window.setInterval(A,16);