CSS Motion Path con SVG: guia practica

CSS Motion Path con SVG

CSS Motion Path permite mover un elemento sobre una ruta definida. En lugar de simular una curva con muchos translate(), puedes reutilizar datos de una ruta SVG como trayectoria de animacion.

Resumen rapido

offset-path define la ruta.
offset-distance controla el avance sobre esa ruta.
Los datos d de SVG pueden usarse dentro de CSS path().
En responsive, prueba que la ruta siga alineada con el arte.
Respeta siempre prefers-reduced-motion.

La idea basica

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

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

El valor de path() usa sintaxis SVG. Por eso encaja tan bien con iconos, rutas de mapas, ilustraciones de producto y pequenas guias visuales creadas en herramientas de diseño.

Cuándo usarlo

Funciona bien para tours de producto, puntos que recorren un grafico, rutas de entrega, iconos que siguen una curva o indicadores de progreso visual. Antes de animar, extrae la ruta con SVG Path Extractor, revisa el archivo en SVG Viewer y optimiza con SVG Optimizer.

Ejemplo sencillo

<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 el elemento segun la direccion de la ruta. Es util para flechas o vehiculos, pero no para etiquetas de texto.

Responsive y accesibilidad

CSS path() no escala automaticamente como un viewBox SVG. Mantén un contenedor predecible, usa el mismo sistema de coordenadas que el diseño y prueba en movil, tablet y escritorio.

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

La animacion debe orientar, no bloquear. Evita bucles intensos en paginas de lectura, no cubras botones o formularios, y nunca comuniques un estado solo con movimiento.

Flujo recomendado con SVGView

Abre el SVG en SVG Viewer y confirma el viewBox.
Extrae la ruta con SVG Path Extractor.
Limpia SVG externos con SVG Sanitizer.
Formatea el marcado con SVG Formatter.
Optimiza con SVG Optimizer y prueba otra vez.

Conclusion

CSS Motion Path convierte rutas SVG en movimiento de interfaz claro y mantenible. Empieza con una ruta simple, limita la animacion a una funcion concreta y valida la experiencia antes de publicarla.

CSS Motion Path con SVG: guia practica