<div class="clones-1"></div>
<div class="clones-2"></div>
<div class="clones-3"></div>
<div class="clones-4"></div>
<div class="clones-5"></div>
<div class="clones-6"></div>
<div class="clones-7"></div>
<div class="clones-8"></div>
<div class="clones-9"></div>
<div class="clones-10"></div>

.clones-1 {
  height:40px;
  width: calc(0.866*40px);
  display: grid;
  background: conic-gradient(from -121deg at right,#0000, #BF1E62 1deg 60deg,#0000 61deg);
  animation: cl1-0 2s infinite;
  transform-origin: 33% 50%;
}
.clones-1:before,
.clones-1:after {
  content: "";
  grid-area: 1/1;
  background: conic-gradient(from -121deg at right,#0000, #FFA588 1deg 60deg,#0000 61deg);
  animation: inherit;
  animation-name: cl1-1;
}

.clones-1:after {
  --s:30px;
  background: conic-gradient(from -121deg at right,#0000, #027B7F 1deg 60deg,#0000 61deg);
}

@keyframes cl1-0{
  0%   {transform:translate(-30px) rotate(0)      translate(0)    rotate(0)}
  25%  {transform:translate( 30px) rotate(0)      translate(0)    rotate(0)}
  50%  {transform:translate( 30px) rotate(180deg) translate(0)    rotate(0)}
  75%  {transform:translate( 30px) rotate(180deg) translate(60px) rotate(0)}
  100% {transform:translate( 30px) rotate(180deg) translate(60px) rotate(180deg)}
}

@keyframes cl1-1{ 
  0%,25%,50%,75%,100% {transform: translate(0)}
  12.5%,62.5% {transform: translate(var(--s,15px))}
}

.clones-2 {
  height:40px;
  width: calc(0.866*40px);
  display: grid;
  background: conic-gradient(from -121deg at right,#0000, #BF1E62 1deg 60deg,#0000 61deg);
  animation: cl2 2s infinite linear;
  transform-origin: 33% 50%;
}
.clones-2:before,
.clones-2:after {
  content: "";
  grid-area: 1/1;
  background: conic-gradient(from -121deg at right,#0000, #FFA588 1deg 60deg,#0000 61deg);
  transform-origin: inherit;
  animation: inherit;
}

.clones-2:after {
  background: conic-gradient(from -121deg at right,#0000, #027B7F 1deg 60deg,#0000 61deg);
  animation-duration: 3s;
}

@keyframes cl2{
  100% {transform: rotate(1turn)}
}

.clones-3 {
  width:80px;
  height: calc(0.866*80px);
  background: repeating-conic-gradient(from -30deg,#027B7F 0 60deg,#FFA588 0 120deg,#BF1E62 0 180deg); 
  animation: cl3 1.5s infinite alternate;
}

@keyframes cl3 {
  0%,
  10%  {clip-path: polygon(50% 50%,25% 100%,25% 100%,25% 100%,25% 100%,75% 100%,75% 100%,75% 100%)}
  33%,
  43%  {clip-path: polygon(50% 50%,0   50% ,0   50% ,0   50% ,25% 100%,75% 100%,100% 50%,100% 50%)}
  66%,
  76%  {clip-path: polygon(50% 50%,25% 0   ,25% 0   ,0   50% ,25% 100%,75% 100%,100% 50%,75%  0  )}
  95%,
  100% {clip-path: polygon(50% 50%,75% 0   ,25% 0   ,0   50% ,25% 100%,75% 100%,100% 50%,75%  0  )}
}

.clones-4 {
  width: 40px;
  height: calc(0.866*40px);
  display: grid;
  background: conic-gradient(from 149deg at top,#0000, #BF1E62 1deg 60deg,#0000 61deg);
  animation: cl4 2s infinite cubic-bezier(0.5,500,0.5,-500);
  transform-origin: top;
}
.clones-4:before,
.clones-4:after {
  content: "";
  grid-area: 1/1;
  background: conic-gradient(from 149deg at top,#0000, #FFA588 1deg 60deg,#0000 61deg);
  transform-origin: inherit;
  animation: inherit;
}

.clones-4:after {
  background: conic-gradient(from 149deg at top,#0000, #027B7F 1deg 60deg,#0000 61deg);
  animation-timing-function: cubic-bezier(0.5,800,0.5,-800);
}

@keyframes cl4{
  100% {transform: rotate(0.2deg)}
}

.clones-5 {
  width: 32px;
  height: 64px;
  background: 
    radial-gradient(farthest-side at bottom,#F10C49 90%,#0000),
    radial-gradient(farthest-side at top   ,#F10C49 90%,#0000),
    radial-gradient(farthest-side at bottom,#f4dd51 90%,#0000),
    radial-gradient(farthest-side at top   ,#f4dd51 90%,#0000),
    radial-gradient(farthest-side at bottom,#e3aad6 90%,#0000),
    radial-gradient(farthest-side at top   ,#e3aad6 90%,#0000);
  background-size: 100% 25%;
  background-repeat: no-repeat;
  animation: cl5 2s infinite;
}

@keyframes cl5{
  0%     {background-position:0 calc(1*100%/3),0 calc(2*100%/3),0 calc(1*100%/3),0 calc(2*100%/3),0 calc(1*100%/3),0 calc(2*100%/3)}
  16.67% {background-position:0 calc(0*100%/3),0 calc(3*100%/3),0 calc(1*100%/3),0 calc(2*100%/3),0 calc(1*100%/3),0 calc(2*100%/3)}
  33.33% {background-position:0 calc(0*100%/3),0 calc(3*100%/3),0 calc(0*100%/3),0 calc(3*100%/3),0 calc(1*100%/3),0 calc(2*100%/3)}
  50%    {background-position:0 calc(0*100%/3),0 calc(3*100%/3),0 calc(0*100%/3),0 calc(3*100%/3),0 calc(0*100%/3),0 calc(3*100%/3)}
  66.67% {background-position:0 calc(1*100%/3),0 calc(2*100%/3),0 calc(0*100%/3),0 calc(3*100%/3),0 calc(0*100%/3),0 calc(3*100%/3)}
  83.33% {background-position:0 calc(1*100%/3),0 calc(2*100%/3),0 calc(1*100%/3),0 calc(2*100%/3),0 calc(0*100%/3),0 calc(3*100%/3)}
  100%   {background-position:0 calc(1*100%/3),0 calc(2*100%/3),0 calc(1*100%/3),0 calc(2*100%/3),0 calc(1*100%/3),0 calc(2*100%/3)}
}

.clones-6 {
  width: 64px;
  height: 64px;
  background: 
    radial-gradient(farthest-side at bottom right,#F10C49 90%,#0000),
    radial-gradient(farthest-side at bottom left ,#F10C49 90%,#0000),
    radial-gradient(farthest-side at top    right,#F10C49 90%,#0000),
    radial-gradient(farthest-side at top    left ,#F10C49 90%,#0000),

    radial-gradient(farthest-side at bottom right,#f4dd51 90%,#0000),
    radial-gradient(farthest-side at bottom left ,#f4dd51 90%,#0000),
    radial-gradient(farthest-side at top    right,#f4dd51 90%,#0000),
    radial-gradient(farthest-side at top    left ,#f4dd51 90%,#0000),

    radial-gradient(farthest-side at bottom right,#e3aad6 90%,#0000),
    radial-gradient(farthest-side at bottom left ,#e3aad6 90%,#0000),
    radial-gradient(farthest-side at top    right,#e3aad6 90%,#0000),
    radial-gradient(farthest-side at top    left ,#e3aad6 90%,#0000);
  background-size: 25% 25%;
  background-repeat: no-repeat;
  animation: cl6 2s infinite;
}

@keyframes cl6{
  0% {background-position: 
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
  16.67% {background-position: 
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
  33.33% {background-position: 
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
  50% {background-position: 
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
  66.67% {background-position: 
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
  83.33% {background-position: 
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
  100% {background-position: 
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
        calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
}

.clones-7 {
  width: 60px;
  height: 60px;
  background: 
    linear-gradient(45deg,#60B99A 50%,#0000 0),
    linear-gradient(45deg,#0000 50%,#60B99A 0),

    linear-gradient(-45deg,#f77825 50%,#0000 0),
    linear-gradient(-45deg,#0000 50%,#f77825 0),

    linear-gradient(#554236 0 0);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  animation: cl7 1s infinite alternate;
}
@keyframes cl7{
  0%,
  20%  {background-position:50% 50%,50% 50%,50%  50% ,50% 50%,50% 50%;
        background-size:50% 50%,50% 50%,50% 50%,50% 50%,50% 50%}
  80%,
  100% {background-position:0  100%,100%  0,100% 100%,0   0  ,50% 50%;
        background-size:50% 50%,50% 50%,50% 50%,50% 50%,100% 100%}
}

.clones-8 {
  width: 60px;
  height: 60px;
  background: 
    linear-gradient(45deg,#60B99A 50%,#0000 0),
    linear-gradient(45deg,#0000 50%,#60B99A 0),

    linear-gradient(-45deg,#f77825 50%,#0000 0),
    linear-gradient(-45deg,#0000 50%,#f77825 0),

    linear-gradient(#554236 0 0);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  animation: cl8 1.5s infinite;
}
@keyframes cl8{
  0%   {background-position:50% 50%,50% 50%,50%  50% ,50% 50%,50% 50%}
  25%  {background-position:0  100%,100%  0,50%  50% ,50% 50%,50% 50%}
  50%  {background-position:0  100%,100%  0,100% 100%,0   0  ,50% 50%}
  75%  {background-position:50% 50%,50% 50%,100% 100%,0   0  ,50% 50%}
  100% {background-position:50% 50%,50% 50%,50%  50% ,50% 50%,50% 50%}
}

.clones-9 {
  width: 60px;
  height: 60px;
  background: 
    linear-gradient(#60B99A 0 0) calc(1*100%/3) 50%/25% 50%,
    linear-gradient(#60B99A 0 0) calc(2*100%/3) 50%/25% 50%,

    linear-gradient(#f77825 0 0) 50% calc(1*100%/3)/50% 25%,
    linear-gradient(#f77825 0 0) 50% calc(2*100%/3)/50% 25%,

    linear-gradient(#554236 0 0) calc(1*100%/3) calc(1*100%/3)/25% 25%,
    linear-gradient(#554236 0 0) calc(2*100%/3) calc(1*100%/3)/25% 25%,
    linear-gradient(#554236 0 0) calc(1*100%/3) calc(2*100%/3)/25% 25%,
    linear-gradient(#554236 0 0) calc(2*100%/3) calc(2*100%/3)/25% 25%;
  background-repeat: no-repeat;
  animation: cl9 1s infinite alternate;
}

@keyframes cl9 {
  90%,100%{background-position: 0 50%,100% 50%,50% 0,50% 100%,0 0,100% 0,0 100%,100% 100%}
}

.clones-10 {
  width: 60px;
  height: 60px;
  background:
    linear-gradient(#f77825 0 0),
    linear-gradient(#f77825 0 0),
    linear-gradient(#f77825 0 0),
    linear-gradient(#f77825 0 0),

    linear-gradient(#60B99A 0 0),
    linear-gradient(#60B99A 0 0),

    linear-gradient(#554236 0 0),
    linear-gradient(#554236 0 0);
  background-size: 25% 25%,25% 25%,25% 25%,25% 25%,25% 50%,25% 50%,50% 25%,50% 25%;
  background-repeat: no-repeat;
  animation: cl10 1.5s infinite alternate;
}

@keyframes cl10 {
  0%,
  10%  {background-position: 
            calc(1*100%/3) calc(1*100%/3),calc(2*100%/3) calc(1*100%/3),calc(1*100%/3) calc(2*100%/3),calc(2*100%/3) calc(2*100%/3),
            calc(1*100%/3) 50%,calc(2*100%/3) 50%,50% calc(1*100%/3),50% calc(2*100%/3)}
  33%  {background-position: 
            calc(0*100%/3) calc(0*100%/3),calc(3*100%/3) calc(0*100%/3),calc(0*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3),
            calc(1*100%/3) 50%,calc(2*100%/3) 50%,50% calc(1*100%/3),50% calc(2*100%/3)}
  66%  {background-position: 
            calc(0*100%/3) calc(0*100%/3),calc(3*100%/3) calc(0*100%/3),calc(0*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3),
            calc(0*100%/3) 50%,calc(3*100%/3) 50%,50% calc(1*100%/3),50% calc(2*100%/3)}
  90%,
  100%  {background-position: 
            calc(0*100%/3) calc(0*100%/3),calc(3*100%/3) calc(0*100%/3),calc(0*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3),
            calc(0*100%/3) 50%,calc(3*100%/3) 50%,50% calc(0*100%/3),50% calc(3*100%/3)}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}