<div class="letters">
  <p class="letters__letter letters__letter--blue">A</p>
  <p class="letters__letter letters__letter--green">A</p>
  <p class="letters__letter letters__letter--red">A</p>
</div>
@keyframes circle {
  0% {
    transform: rotate(0deg) translate(-15px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translate(-15px)  rotate(-360deg);
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: black;
}

.letters {
  
  height: 21em;
  width: 13em;
  
  &__letter {
    position: absolute;
    font-size: 18em;
    font-weight: bold;
    margin: 0;
    animation: circle 3s infinite linear;
    mix-blend-mode: screen;
    
    &--blue {
      color: #0801fb;
      animation-delay: 0s;
    }
    
    &--green {
      color: #1ffe27;
      animation-delay: -1s;
    }
    
    &--red {
      color: #fd1a20;
      animation-delay: -2s;
    }
  }
  
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.