Orbiting Circles

<!-- Orbiting Circles · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="orbit-root"><div class="orbit-center">&#9889;</div><div class="orbit-path" style="--r:50px;--dur:12s"><span class="orbit-item">&#9883;</span></div><div class="orbit-path" style="--r:50px;--dur:12s;--delay:-6s"><span class="orbit-item">&#127775;</span></div><div class="orbit-path orbit-reverse" style="--r:80px;--dur:18s"><span class="orbit-item">&#128142;</span></div><div class="orbit-path orbit-reverse" style="--r:80px;--dur:18s;--delay:-9s"><span class="orbit-item">&#128293;</span></div></div>
</div>

/* Orbiting Circles · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.orbit-root{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#0e0e18,#05050a);display:flex;align-items:center;justify-content:center}
.orbit-center{font-size:28px;z-index:2}
.orbit-path{position:absolute;top:50%;left:50%;width:0;height:0;animation:orbit-spin var(--dur) linear infinite;animation-delay:var(--delay,0s)}
.orbit-path.orbit-reverse{animation-direction:reverse}
.orbit-path::before{content:"";position:absolute;top:50%;left:50%;width:calc(var(--r)*2);height:calc(var(--r)*2);transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(140,140,180,.18)}
.orbit-item{position:absolute;top:0;left:var(--r);transform:translate(-50%,-50%);font-size:18px;animation:orbit-counter var(--dur) linear infinite reverse;animation-delay:var(--delay,0s)}
.orbit-reverse .orbit-item{animation-direction:normal}
@keyframes orbit-spin{to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes orbit-counter{to{transform:translate(-50%,-50%) rotate(1turn)}}