CSS Motion Path com SVG: guia pratico para web

CSS Motion Path com SVG

CSS Motion Path faz um elemento se mover por uma forma definida. Para quem trabalha com SVG, isso permite transformar uma curva, rota ou linha do design em uma animacao real no navegador.

Resumo

offset-path define o caminho.
offset-distance controla o progresso no caminho.
Dados de path SVG podem ser usados em CSS path().
Layouts responsivos precisam de testes de alinhamento.
prefers-reduced-motion deve ser tratado desde o inicio.

Exemplo basico

.marker {
  offset-path: path("M20 120 C120 20 220 220 340 80");
  animation: travel 4s linear infinite;
}

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

O valor dentro de path() usa sintaxe SVG. Por isso o recurso combina bem com mapas, icones, ilustracoes de produto, onboarding e visualizacoes de dados.

Quando usar

Use em tours de produto, marcadores em graficos, rotas de entrega, icones seguindo curvas ou indicadores de progresso. Extraia a rota com SVG Path Extractor, revise o arquivo no SVG Viewer e otimize com SVG Optimizer.

Padrao HTML e CSS

<svg viewBox="0 0 360 160" aria-hidden="true">
  <path d="M20 120 C120 20 220 220 340 80" fill="none" stroke="currentColor" />
</svg>

<span class="dot" aria-label="Upload progress"></span>

.dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #14b8a6;
  offset-path: path("M20 120 C120 20 220 220 340 80");
  offset-distance: 0%;
  offset-rotate: auto;
  animation: move-dot 3200ms ease-in-out infinite;
}

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

offset-rotate: auto gira o elemento conforme a direcao do caminho. Use em setas ou objetos direcionais, mas evite em textos.

Responsivo e acessivel

CSS path() nao escala automaticamente como uma viewBox SVG. Mantenha uma area de animacao previsivel, use coordenadas alinhadas ao design e teste em celular, tablet e desktop.

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
    offset-distance: 100%;
  }
}

Movimento deve orientar, nao atrapalhar. Evite loops fortes em paginas de leitura, nao cubra controles e nunca dependa apenas da animacao para comunicar estado.

Workflow SVGView

Abra o SVG no SVG Viewer e confira a viewBox.
Extraia o caminho com SVG Path Extractor.
Limpe SVGs externos com SVG Sanitizer.
Formate o markup com SVG Formatter.
Otimize com SVG Optimizer e teste novamente.

Conclusao

CSS Motion Path transforma caminhos SVG em movimento de interface claro e sustentavel. Comece com uma rota simples, mantenha a animacao util e valide responsividade e acessibilidade antes de publicar.

CSS Motion Path com SVG: guia pratico para web