Online Tool Store
SVG Animator
Anima elementi SVG con keyframe CSS e transizioni, imposta timing, easing e conteggi cicli, quindi esporta file SVG animati.
🔒 Questo strumento funziona interamente nel tuo browser. I tuoi file non vengono mai caricati su un server.
Design e Colore
SVG Animator
Preview
Draw works best on stroked <path> shapes. This SVG looks fill-only, so the outline may not appear to draw — the original artwork is left intact.
Generated CSS
Everything runs in your browser. Your SVG is never uploaded to a server.
Come funziona l'Animatore SVG
- Aggiungi l'SVG e scegli il tipo di animazione.
- Imposta durata ed easing — gli effetti draw-on si leggono meglio tra uno e due secondi.
- Mantieni la protezione reduced-motion, poi incolla l'SVG e il suo CSS nella tua pagina.
Il metodo
Un effetto draw-on funziona impostando il pattern del tratto sulla lunghezza totale del percorso e animando l'offset da quella lunghezza a zero.
stroke-dasharray: L; stroke-dashoffset: L → 0, dove L è la lunghezza del percorso
Sbagliare L è il motivo per cui le animazioni draw-on a volte iniziano parzialmente disegnate o finiscono in anticipo — il pattern del tratto deve corrispondere alla lunghezza reale del percorso.
FAQ
Perché la mia animazione draw-on inizia a metà?
Perché il valore dasharray non corrisponde alla vera lunghezza del percorso. Misura il percorso con getTotalLength e usa quel numero, invece di stimarlo.
L'SVG dovrebbe essere animato con CSS o SMIL?
CSS, per qualsiasi cosa nuova. L'animazione SMIL è deprecata in alcuni motori e il supporto è incoerente; i keyframe e le trasformazioni CSS sono ben supportati e più facili da controllare.
Perché rispettare prefers-reduced-motion?
Perché il movimento provoca nausea e sintomi vestibolari in alcune persone, e la preferenza del sistema operativo è il modo in cui chiedono meno di quello. Rispettarla è una media query di due righe.
Come ci confrontiamo
| Caratteristica | Online Tool Store | Un'app di design | Un PDF guida di stile |
|---|---|---|---|
| Protezione reduced-motion inclusa | ✓ | ✗ | Raramente |
| CSS invece di SMIL | ✓ | Varia | ✓ |
| Nessun software di animazione | ✓ | ✗ | ✗ |
| Il file resta sul tuo dispositivo | ✓ | ✓ | ✗ |
L'Animatore SVG avvolge ogni animazione in una query reduced-motion per impostazione predefinita, il passo di accessibilità che l'animazione SVG scritta a mano quasi sempre salta.