<div class="holder">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

* {
  box-sizing: border-box;
}

@keyframes rota {
  from {
    transform: rotate(270deg);
    filter: hue-rotate(0);
  }
  50% {
    transform: rotate(90deg);
    filter: hue-rotate(75deg);
    //border-radius: 0% 22.5% 0 33%;
  }
  75% {
    transform: rotate(180deg);
    filter: hue-rotate(130deg);
  }

  85% {
    transform: rotate(270deg);
    filter: hue-rotate(270deg);
  }
  
  to {
    transform: rotate(360deg);
    filter: hue-rotate(0);
  }
}

body {
  background: #333;
}

.holder {
  mix-blend-mode: lighten;
  background: rgba(22,22,22,0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15vmax;
  margin-left: -15vmax;
  width: 30vmax;
  height: 30vmax;
}

.circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 30vmax;
  height: 30vmax;
}

.circle:before {
  position: absolute;
  top: 7.5vmax;
  left: 7.5vmax;
  width: 15vmax;
  height: 15vmax;
  content: '';
  color: rgba(255,255,255,0.9);
  font-size: 200%;
  font-family: monospace;
  border: 5px solid rgba(255,200,200,0.75);
  border-radius: 0% 12.5% 0 25%;
  transform-origin: 50%;
  transform: rotate(270deg);

  animation: rota 5s alternate infinite ease-in-out;
}


@for $i from 0 through 20 {
  .circle:nth-child(#{$i}):before {
    animation-delay: #{$i * 0.0045s};
    border-color: hsla($i * 36, 100%, 90%, 0.1);
  }
}