Gear Mesh Loop

<div class="nuda-ai2-gear-mesh" role="img" aria-label="Gears turning">
  <svg class="nuda-ai2-gear-mesh__svg" viewBox="0 0 34 24" aria-hidden="true">
    <defs>
      <path id="ai2-gear-mesh-shape" fill-rule="evenodd"
        d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
    </defs>
    <g transform="translate(0,0) scale(0.92)">
      <g class="nuda-ai2-gear-mesh__gear-a">
        <use href="#ai2-gear-mesh-shape" />
      </g>
    </g>
    <g transform="translate(16,7) scale(0.5)">
      <g class="nuda-ai2-gear-mesh__gear-b">
        <use href="#ai2-gear-mesh-shape" />
      </g>
    </g>
  </svg>
</div>

.nuda-ai2-gear-mesh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 48px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #e4ff54;
}

.nuda-ai2-gear-mesh__svg {
  width: 40px;
  height: 32px;
  fill: currentColor;
  stroke: none;
}

.nuda-ai2-gear-mesh__gear-a {
  transform-origin: 12px 12px;
  animation: nuda-ai2-gear-mesh-cw 6s linear infinite;
}

.nuda-ai2-gear-mesh__gear-b {
  transform-origin: 12px 12px;
  animation: nuda-ai2-gear-mesh-ccw 3.6s linear infinite;
}

@keyframes nuda-ai2-gear-mesh-cw {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes nuda-ai2-gear-mesh-ccw {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ai2-gear-mesh__gear-a,.nuda-ai2-gear-mesh__gear-b {
    animation: none !important;
  }
}