CSS Motion Path con SVG: guida pratica

CSS Motion Path con SVG

CSS Motion Path permette a un elemento di muoversi lungo una forma definita. Per chi lavora con SVG, significa poter trasformare una curva o una rotta gia disegnata in un'animazione del browser.

In breve

offset-path definisce la traiettoria.
offset-distance controlla l'avanzamento.
I dati di un percorso SVG possono essere usati in CSS path().
Le animazioni responsive vanno provate su piu dimensioni.
prefers-reduced-motion e una buona pratica obbligata.

Esempio base

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

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

La sintassi dentro path() e la stessa dei percorsi SVG. Per questo Motion Path si adatta bene a icone, mappe, illustrazioni di prodotto e visualizzazioni dati.

Quando usarlo

Usalo per tour di prodotto, marker su grafici, rotte su mappe, icone che seguono curve e indicatori di progresso. Prima estrai la rotta con SVG Path Extractor, controlla il file in SVG Viewer, poi ottimizza con SVG Optimizer.

Pattern pratico

<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 ruota l'elemento lungo la direzione del percorso. Va bene per frecce o veicoli, meno per testi e badge.

Responsive e accessibilita

CSS path() non scala automaticamente come una viewBox SVG. Mantieni stabile l'area animata, usa coordinate coerenti con il design e prova mobile, tablet e desktop.

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

Il movimento deve guidare l'attenzione senza coprire contenuti o controlli. Non usare l'animazione come unico segnale di stato.

Workflow SVGView

Apri l'SVG in SVG Viewer e verifica la viewBox.
Estrai il percorso con SVG Path Extractor.
Pulisci file esterni con SVG Sanitizer.
Formatta il markup con SVG Formatter.
Ottimizza con SVG Optimizer e riprova l'animazione.

Conclusione

CSS Motion Path trasforma i percorsi SVG in animazioni pulite e mantenibili. Parti da una rotta semplice, assegna all'animazione uno scopo chiaro e verifica accessibilita e responsive prima del rilascio.

CSS Motion Path con SVG: guida pratica