offset-path with shapes (motion path)

Baseline 2024 for `offset-path` with basic shapes and coord-box (Chrome 116, Safari 16, Firefox 122). `shape()` in offset-path is Baseline 2026 (fx-033).

Chrome 116Edge 116Safari 16Firefox 122

Moves an element along a path (circle, inset, polygon, SVG path or `shape()`), auto-rotating it to face the direction of travel. Orbit and progress-along-track effects with no JS.

CSS

.fx-021 {
  position: relative;
  width: 160px;
  height: 160px;
  border: 2px dashed #bbb;
  border-radius: 50%
}
.fx-021 span {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #2563eb;
  border-radius: 4px 4px 12px 4px;
    offset-path: circle(50% at 50% 50%);
  offset-rotate: auto;
  animation: fx-021-orbit 4s linear infinite
}
@keyframes fx-021-orbit {
  to {
    offset-distance: 100%
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx-021, .fx-021 * { animation: none; transition: none; }
}

HTML

<div class="fx-021"><span></span></div>

Fallback: Unsupported browsers leave the element static at its normal position.

Source: developer.mozilla.org/en-US/docs/Web/CSS/offset-path

Prompt

Animate along a track with motion path: set `offset-path` to a basic shape (`circle()`, `inset()`, `polygon()`, `path()` or `shape()`), keep `offset-rotate: auto` to orient the element along the path, and animate `offset-distance` from 0% to 100%. Do not compute positions in JavaScript.