<div class="rings">
  <div class="ring">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
  <div class="ring">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
  <div class="ring">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
  <div class="ring">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
  <div class="ring">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
</div>

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-image: radial-gradient(circle at center, #eee, #bbb 500px);
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  perspective-origin: 50% calc(50% - 320px);
  overflow: hidden;
}

.rings {
  position: relative;
  transform-style: preserve-3d;
}

.ring {

  $size: 200;
  $thickness: 32;

  position: absolute;
  transform-style: preserve-3d;
  width: #{$size}px; height: #{$size}px;

  @keyframes ring {
    from { transform: translate(-50%, -50%) rotateY(60deg); }
    to   { transform: translate(-50%, -50%) rotateY(-60deg); }
  }

  &:nth-child(1) { top: #{$size * -0.2}px; left: #{$size * -1.2}px; }
  &:nth-child(2) { top: #{$size *  0.2}px; left: #{$size * -0.6}px; }
  &:nth-child(3) { top: #{$size * -0.2}px; left: #{$size *    0}px; }
  &:nth-child(4) { top: #{$size *  0.2}px; left: #{$size *  0.6}px; }
  &:nth-child(5) { top: #{$size * -0.2}px; left: #{$size *  1.2}px; }

  & > div {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
  }

  @for $r from 0 to 5 {
    $clr: nth([#0085c7, #f4c300, #222222, #009f3d, #df0024], $r + 1);
    $t: 0;

    &:nth-child(#{$r + 1}) {
      $speed: #{3 + random(300) / 100}s;
      $delay: #{0 - random(600) / 100}s;

      animation: ring $speed $delay infinite ease-in-out alternate;

      @for $i from 0 to 16 {
        & > div:nth-child(#{$i + 1}) {
          $t: $t + (($thickness - $t) * 0.2);
          width: #{$size + $t}px; height: #{$size + $t}px;
          border: #{$t}px solid darken($clr, $i * 2);
          transform: translate(-50%, -50%) translateZ(#{8 + $i * -2}px);
        }
      }

      & > div:nth-child(17) {
        width: #{$size + $thickness}px; height: #{$size + $thickness}px;
        border: #{$thickness}px solid #0005;
        filter: blur(15px);
        animation: shadow $speed $delay infinite ease-in-out alternate;

        @keyframes shadow {
          from { transform: translate(-50%, -50%) rotateY(-60deg) translateZ(-320px) rotateY(60deg); }
          to   { transform: translate(-50%, -50%) rotateY(60deg)  translateZ(-320px) rotateY(-60deg); }
        }
      }
    }
  }
}