Online Tool Store
SVG Animator
Animeer SVG-elementen met CSS keyframes en transitions, stel timing, easing en loop-aantallen in, exporteer dan geanimeerde SVG-bestanden.
🔒 Deze tool werkt volledig in je browser. Je bestanden worden nooit naar een server geüpload.
Ontwerp & Kleur
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.
Zo werkt de SVG-animator
- Voeg de SVG toe en kies het animatietype.
- Stel duur en easing in — draw-on-effecten lezen het best tussen één en twee seconden.
- Behoud de reduced-motion-bescherming en plak dan de SVG en zijn CSS in je pagina.
De methode
Een draw-on-effect werkt door het streeppatroon in te stellen op de volledige padlengte en de offset van die lengte naar nul te animeren.
stroke-dasharray: L; stroke-dashoffset: L → 0, waarbij L de padlengte is
L verkeerd krijgen is waarom draw-on-animaties soms half getekend beginnen of te vroeg eindigen — het streeppatroon moet overeenkomen met de werkelijke padlengte.
FAQ
Waarom begint mijn draw-on-animatie halverwege?
Omdat de dasharray-waarde niet overeenkomt met de werkelijke lengte van het pad. Meet het pad met getTotalLength en gebruik dat getal, in plaats van het te schatten.
Moet SVG met CSS of SMIL worden geanimeerd?
CSS, voor alles nieuws. SMIL-animatie is in sommige engines verouderd en de ondersteuning is inconsistent; CSS-keyframes en -transformaties worden goed ondersteund en zijn eenvoudiger te sturen.
Waarom prefers-reduced-motion respecteren?
Omdat beweging bij sommige mensen misselijkheid en vestibulaire symptomen veroorzaakt, en de besturingssysteeminstelling is hoe ze om minder daarvan vragen. Het respecteren is een media query van twee regels.
Hoe we ons verhouden
| Kenmerk | Online Tool Store | Een ontwerp-app | Een stijlgids-PDF |
|---|---|---|---|
| Reduced-motion-bescherming inbegrepen | ✓ | ✗ | Zelden |
| CSS in plaats van SMIL | ✓ | Verschilt | ✓ |
| Geen animatiesoftware nodig | ✓ | ✗ | ✗ |
| Bestand blijft op je apparaat | ✓ | ✓ | ✗ |
De SVG-animator omhult standaard elke animatie met een reduced-motion-query, de toegankelijkheidsstap die handgeschreven SVG-animatie bijna altijd overslaat.