Design Atlas
한국어
✦ Visual effects

Orbiting circles

궤도 원

Several small circles orbiting a central node at different radii and speeds — a place to scatter integration logos or icons.

Also known as: Orbit diagramRotating satellite icons
···
html
<div class="orbit-scene">
  <div class="center">HUB</div>
  <div class="ring r1"><div class="dot d1">UI</div></div>
  <div class="ring r2"><div class="dot d2">AI</div></div>
  <div class="ring r3"><div class="dot d3">3D</div></div>
</div>
css
.orbit-scene{position:relative;width:min(280px,88%);aspect-ratio:1}
.center{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;
  box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 45%,transparent)}
.ring{position:absolute;border-radius:50%;border:1px dashed var(--line)}
.r1{inset:20%;animation:spin 6s linear infinite}
.r2{inset:6%;animation:spin-rev 9.5s linear infinite}
.r3{inset:-8%;animation:spin 14s linear infinite}
.dot{position:absolute;top:-14px;left:50%;translate:-50% 0;width:28px;height:28px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--fg);
  display:grid;place-items:center;font-size:10px;font-weight:700}
.d1{animation:spin-rev 6s linear infinite}
.d2{animation:spin 9.5s linear infinite}
.d3{animation:spin-rev 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-rev{to{transform:rotate(-360deg)}}

The key trick is a double rotation that cancels out. Spin the outer orbit (the parent) continuously and the dot inside travels around in a circle with it — but its content (an icon, a letter) tilts along with it too. Counter-rotate the dot itself at exactly the parent's speed in the opposite direction, and its position keeps travelling along the orbit while its content stays upright the whole time.

Giving each orbit a different radius, direction, and speed keeps the layered rings from falling into the same rhythm, which is what makes it read as organic rather than mechanical. Leaving the orbit paths visible as faint dashed circles also communicates the structure — these things belong to one system.

The most common layout: the central node represents the flagship product, and the orbiting dots represent connected tools or partners.

When to use

Use for a partner-logo showcase, a tech-stack overview, or a platform ecosystem diagram. More than three orbits starts to look cluttered — keep it restrained.