the ring

by Julien Etienne

HTML

<svg width="100%" height="100%" viewBox="0 0 20 20" class="nav">
  <circle class="ring-a" cx="10" cy="10" r="3" fill="transparent" stroke="rgba(200,100,0,0.8)" stroke-width="0.5" stroke-dasharray="0 0" stroke-dashoffset="0"></circle>
  <circle class="ring-b" cx="10" cy="10" r="3.5" fill="transparent" stroke="rgba(0,150,200,0.8)" stroke-width="0.5" stroke-dasharray="0 0" stroke-dashoffset="0"></circle>
  <circle class="ring-c" cx="10" cy="10" r="4" fill="transparent" stroke="rgba(0,200,100,0.8)" stroke-width="0.5" stroke-dasharray="0 0" stroke-dashoffset="0"></circle>

  <circle class="ring-d" cx="10" cy="10" r="5" fill="transparent" stroke="rgba(100,200,100,0.8)" stroke-width="0.1" stroke-dasharray="20 30" stroke-dashoffset="100"></circle>
  <circle class="ring-e" cx="10" cy="10" r="5.5" fill="transparent" stroke="rgba(100,200,100,0.8)" stroke-width="0.1" stroke-dasharray="25 30" stroke-dashoffset="100"></circle>
  <circle class="ring-f" cx="10" cy="10" r="6" fill="transparent" stroke="rgba(100,200,100,0.8)" stroke-width="0.2" stroke-dasharray=" 3" stroke-dashoffset="100"></circle>

  <circle class="ring-g" cx="10" cy="10" r="7" fill="transparent" stroke="rgba(200,200,100,0.8)" stroke-width="0.2" stroke-dasharray="3 7 6" stroke-dashoffset="100"></circle>
  <circle class="ring-g" cx="10" cy="10" r="7.15" fill="transparent" stroke="rgba(200,200,100,0.8)" stroke-width="0.2" stroke-dasharray="47" stroke-dashoffset="100"></circle>
  <circle class="ring-i" cx="10" cy="10" r="8" fill="transparent" stroke="rgba(200,200,100,0.8)" stroke-width="0.5" stroke-dasharray="1 2 1 0.5 0.25 0.125 1" stroke-dashoffset=""></circle>
</svg>

CSS

body {
    background: #222;
  position: absolute;
}

@keyframes spinner-a {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }

  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

@keyframes spinner-b {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }

  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

@keyframes spinner-d {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes spinner-reverse {
  0% {
    transform: rotate3d(0, 0, 1, 360deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.nav {}

svg {
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
}

.ring-a {
  animation: spinner-a 2000ms infinite linear;
  perspective: 3000px;
  transform-origin: 10px 10px;
  transform-style: preserve-3d;
}

.ring-b {
  animation: spinner-b 3000ms infinite linear;
  perspective: 3000px;
  transform-origin: 10px 10px;
  transform-style: preserve-3d;
}

.ring-c {
  animation: spinner-b 4000ms infinite linear;
  perspective: 6000px;
  transform-origin: 10px 10px;
  transform-style: preserve-3d;
}

.ring-d {
  animation: spinner-d 2000ms infinite linear;
  perspective: 6000px;
  transform-origin: 10px 10px;
  transform-style: preserve-3d;
}

.ring-e {
  animation: spinner-reverse 2200ms infinite linear;
  perspective: 6000px;
  transform-origin: 10px 10px;
  transform-style: preserve-3d;
}

.ring-f {
  animation: spinner-d 2400ms infinite linear;
  perspective: 6000px;
  transform-origin: 10px 10px;
  transform-style: preserve-3d;
}

.ring-g {
  animation: spinner-d 7000ms infinite linear;
  perspective: 6000px;
  transform-origin: 10px 10px;
  transform-style: preserve-3d;
}

.ring-i {
  animation: spinner-reverse 3000ms infinite linear;
  perspective: 6000px;
  transform-origin: 10px 10px;
  transform-style: preserve-3d;
}