offset-path with shapes (motion path)

Baseline 2024 para `offset-path` com formas básicas e coord-box (Chrome 116, Safari 16, Firefox 122). `shape()` em offset-path é Baseline 2026 (fx-033).

Chrome 116Edge 116Safari 16Firefox 122

Move um elemento ao longo de um caminho (circle, inset, polygon, path SVG ou `shape()`), rotacionando-o automaticamente para encarar a direção do movimento. Efeitos de órbita e progresso ao longo de uma trilha sem 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: Navegadores sem suporte deixam o elemento estático na posição normal.

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

Prompt

Anime ao longo de uma trilha com motion path: defina `offset-path` como uma forma básica (`circle()`, `inset()`, `polygon()`, `path()` ou `shape()`), mantenha `offset-rotate: auto` para orientar o elemento ao longo do caminho, e anime `offset-distance` de 0% a 100%. Não calcule posições em JavaScript.