Spiral Path
A cyan dot starts from the center and winds outward, clockwise, along a turn and a quarter that keeps widening, in 6 s at constant speed, then starts over from the center: the only path in the category that grows as it turns — pure CSS with offset-path, stopped at the end of the spiral when the visitor limits animation.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. 3D has 50 effects, including 8 free. Explore the category →
3 usage examples
How it works
At least 300 px tall, on a #0a0a0f background, .fx-0035-root centers a 260 px square scene, .mp-spiral-scene. An <svg> covers it (viewBox="0 0 260 260", one unit per pixel) and traces the spiral in cyan at 12% with a 1.5 px line: a barely visible guide. Eight Bézier curves leave (130, 130), climb to the right, loop a first time up close, then a second time further out to finish at the top right, at (210, 70). Length: 432 px, inside a 120 × 90 px box shifted up and to the right.
The 12 px cyan dot, haloed by a box-shadow, starts from the scene's upper left corner and takes that same drawing, repeated as is in its offset-path: path(…): it never strays more than 0.1 px from the line, in all three browsers tested. Over 6 s, mpOrbit carries its offset-distance from 0 to 100% in linear, about 72 px per second from the core to the outer turn. At the end, it reappears in the center and starts again: the path is open and does not return to its start.
No JavaScript, no id: each copy of the block on a page turns for itself. When the visitor limits animation, a media query restricted to .fx-0035-root removes the animation and leaves the dot on the outer turn, at the end of the spiral (offset-distance: 100%): the still image shows where the motion leads.
Accessibility
- Limited animation: with
prefers-reduced-motion: reduce, the dot freezes at the end of the spiral. Checked in Chromium, Firefox and WebKit: no active animation, no pixel changed during 800 ms. - Faint path: the spiral in cyan at 12% can barely be seen on the dark background; only the dot shows clearly. If the spiral's shape carries the meaning (a shell, a staircase), give it thickness and contrast, as in the examples.
- Jump to the center: on every lap, the dot vanishes from the end of the spiral and reappears in the center. The jump is sharp but infrequent (every 6 s); there is no flashing.
- Nothing to click: neither mouse, finger nor keyboard acts on the spiral. If the nearby text says what matters, hide the root from screen readers with
aria-hidden="true".
Browser compatibility
Pure CSS: offset-path: path(), animated offset-distance, inline SVG for the line. No dependency, no JavaScript. Measured in Chromium 151, Firefox 153 and WebKit 26.5: dot centered on the line (less than 0.1 px off), same duration, stop under reduced motion, two independent copies.
Without offset-path (Safari before 16), the dot stays still in the scene's top left corner and the spiral shows on its own (measured by removing the property). @supports not (offset-path: path("M 0 0")) lets you hide it.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0035-root">
<div class="mp-spiral-scene"> <!-- 260 × 260 px -->
<svg viewBox="0 0 260 260" fill="none">
<path d="M130,130 C130,110 150,90 160,80 … C165,50 195,55 210,70" …></path>
</svg>
<div class="mp-spiral-dot"></div> <!-- same path in offset-path -->
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Duration (CSS — 6s in animation) |
6 s | Longer, and the dot winds more calmly; the jump to the center happens less often. |
Path (HTML + CSS — d attribute and offset-path) |
a turn and a quarter, from (130, 130) to (210, 70) | Write the same spiral in both places, in the 260 × 260 px coordinate system. For a centered or more regular spiral, an SVG spiral generator gives a d you can paste as is into path("…"). |
Line visibility (CSS — .mp-spiral-scene path { stroke: …; stroke-width: … }) |
cyan at 12%, 1.5 px | The CSS rule wins over the SVG attributes: 3 to 9 px and a strong color turn the spiral into a drawing (a shell, batter). |
Enlarge (CSS — transform: scale() on .mp-spiral-scene) |
none | offset-path is in pixels: a scale() enlarges line and path together. |
Direction (CSS — reverse in animation) |
from the center outward | With reverse, the dot starts at the end and winds toward the center: a swirl pulling in, a draining sink. |
Color (CSS — background and box-shadow of .mp-spiral-dot) |
cyan #06b6d4 |
The glow is a 12 px box-shadow in the same hue at 60%: change both together. |
FAQ
alternate to the animation: the dot goes back, from the rim toward the center, before heading out again.
