Orbiting Circles
Icons orbit a center on two radii, one reversed.
⚡
⚛
🌟
💎
🔥
How to use it
- Paste the HTML where the components should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- 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">⚡</div><div class="orbit-path" style="--r:50px;--dur:12s"><span class="orbit-item">⚛</span></div><div class="orbit-path" style="--r:50px;--dur:12s;--delay:-6s"><span class="orbit-item">🌟</span></div><div class="orbit-path orbit-reverse" style="--r:80px;--dur:18s"><span class="orbit-item">💎</span></div><div class="orbit-path orbit-reverse" style="--r:80px;--dur:18s;--delay:-9s"><span class="orbit-item">🔥</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)}}More components
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →