SVG Animator
SVG drawing traced stroke by stroke, then filled or repeated, on entry or on click
The examples are only part of the story. Every tile also has the advanced options: animations, mouse effects, visibility by device or by date, positioning and more.
01
Just added
This is how it looks as soon as you add it to the page, before any changes.
02
A bakery's logo, hand-drawn
SVG code of the logo (wheat ear and loaf) drawn one piece at a time in red, with no fill, when it comes into view; inside a cream circle.
03
A mountain trail on a map
Peak outline, sun, trail and finish flag drawn one after another (260 ms delay) in light on blue, thick stroke.
04
An architecture firm's signature
A signature drawn in reverse (from end to start) in a single slow, linear gesture, dark ink and round caps, on a light card over lined paper.
05
A real estate agency's service icons
Three icons side by side: the stroke draws them, then a soft fill fades in; each in its own theme color, in white boxes.
06
A village skyline, in a loop
Towers, dome and houses redrawn endlessly (loop with a 1.2 s pause) in orange on night, thick stroke and rounded lines.
07
Ursa Major for a planetarium
“Gradual appearance” animation in random order: the stars and the constellation lines light up one at a time, in light tones on a night glow.
