offset-path with shapes (motion path)

Baseline 2024 para `offset-path` con formas básicas y coord-box (Chrome 116, Safari 16, Firefox 122). `shape()` en offset-path es Baseline 2026 (fx-033).

Chrome 116Edge 116Safari 16Firefox 122

Mueve un elemento a lo largo de un trazado (círculo, inset, polígono, path SVG o `shape()`), rotándolo automáticamente para que mire en la dirección del recorrido. Efectos de órbita y de progreso sobre una pista sin 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: Los navegadores sin soporte dejan el elemento estático en su posición normal.

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

Prompt

Anima a lo largo de una pista con motion path: pon en `offset-path` una forma básica (`circle()`, `inset()`, `polygon()`, `path()` o `shape()`), mantén `offset-rotate: auto` para orientar el elemento a lo largo del trazado y anima `offset-distance` de 0% a 100%. No calcules posiciones en JavaScript.