Circle path

Quick implementation

.orbit-element {
  offset-path: circle(5rem);
  offset-distance: 0%;
  animation: orbit 4s linear infinite;
}

@keyframes orbit {
  to {
    offset-distance: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-element {
    animation: none;
  }
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer building a decorative animation.

Goal: Animate a small element along a circular path using CSS offset-path — no JavaScript.

Technical constraints:
- Use offset-path: circle() to define the circular path.
- Animate offset-distance from 0% to 100% for a full orbit.
- Use linear timing for constant orbital speed.
- The element should rotate to face its direction of travel (offset-rotate: auto) or stay upright (offset-rotate: 0deg).
- Include prefers-reduced-motion media query.

Edge cases:
- offset-path is GPU-accelerated in modern browsers but check Safari support.
- The circle() function centers relative to the element's containing block.
- Multiple orbiting elements can use animation-delay for staggered positions.

Why this matters in 2026

Before offset-path, circular motion required trigonometry in JavaScript or complex CSS transform chains. The offset-path API gives you motion along any path — circles, ellipses, SVG paths — in pure CSS. It's GPU-accelerated and declarative, making it ideal for loading spinners, orbital diagrams, or decorative background elements.

The logic

offset-path: circle(5rem) defines an invisible circular track with a 5rem radius. offset-distance positions the element along that track — 0% is the start, 100% is a full revolution. Animating offset-distance from 0% to 100% with linear timing creates smooth, constant-speed orbital motion. The element's position is calculated by the browser on the GPU, so it's jank-free.

Accessibility & performance

Motion along a path can be disorienting for users with vestibular disorders. The prefers-reduced-motion query halts the animation entirely. Performance-wise, offset-distance is a composited property — the browser animates it on the GPU without triggering layout or paint, making it as performant as transform animations.