Choose an SVG and its lines draw themselves, one after another. The animation is CSS written into the file itself, so the saved SVG plays on its own in a browser, in an img tag and as a CSS background.

Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.

How to animate the lines of an SVG

Choose your SVG, drop it on the box, or paste SVG code. It starts drawing itself straight away; “Play again” runs it from the start.
Pick how the lines are drawn: all at once, one after another, or from the middle outwards. Pick a speed, and whether it plays once or keeps looping.
If the drawing has fills, choose whether they fade in after the lines or are there from the start.
Download the SVG. It is saved under the same name with “-animated” added. “Copy the CSS” gives the style block alone.

How a line draws itself

A stroke can be dashed, and a dash pattern can be slid along its line. Make one dash exactly as long as the line, follow it with a gap that is longer still, and slide the pattern back by the length of the dash: only the gap is over the line, and nothing shows. Slide it forward again and the dash uncovers the line from its start to its end. That is the whole trick, written as stroke-dasharray and stroke-dashoffset inside @keyframes.

It only works if the dash is at least as long as the line, so every shape is measured in your browser. The house in the sample is a rectangle 88 by 62, so its edge is 300 units long. The tool writes stroke-dasharray: 300.3 306.306 and starts the offset at 303.303. The dash is a thousandth longer than the line because browsers do not agree on the length of a curve to the last digit, and a dash that is short leaves a gap at the end of the line. The gap and the starting offset are a little larger again, so that nothing at all shows before the line starts, however a browser rounds the numbers.

Curves need care. The usual recipe asks the browser with getTotalLength(), but Chrome measures a curve in straight steps sized for the drawing as written: for a circle of radius 20 it answers 124.85, and the edge is really 125.66 long. Enlarge that picture and the missing piece shows as a gap where the circle should close. So this tool works circles, ellipses and rounded rectangles out from their sizes, and measures each path on a copy enlarged until the steps are too fine to matter. It never writes a dash shorter than the browser’s own answer.

Rectangles, circles, ellipses, lines, polylines and polygons are measured and animated the same way as paths. Nothing is turned into a path, and no shape is changed: each animated shape gets two class names, and one <style> element is added at the top of the file.

The choices

One after another draws the lines in the order the file lists them. Each gets time in proportion to its length, so the pen moves at one speed, and a very short line still gets a quarter of an even share so that it can be seen.
All at once starts every line together and finishes them together, so long lines move faster than short ones.
From the middle outwards starts the lines nearest the middle of the picture first and the ones at the edges last. Each takes half the time, so they overlap.
Speed is the time from the first line starting to the last one finishing: 1.5 seconds for quick, 3 for steady, 6 for slow. Under “Fine-tune” you can type any number of seconds, choose the easing, and set the second at which each line starts.
Once or looping. Once, the file draws itself and rests as the finished drawing. Looping, it holds the finished drawing for one second and starts again.
Fills either fade in after the last line is drawn, over a quarter of the drawing time (never under 0.4 or over 1.2 seconds), or are there from the start.

What is left out

Shapes with a fill and no stroke. There is no line to draw. They fade in with the other fills, or stay as they are. “Give fills an outline” draws the edge of each one in its own fill colour, then fades the fill in and the outline away, so the finished picture is still the one you gave. A file with no strokes at all is refused until you press it.
Text. Letters have no line to follow until they are turned into outlines in a drawing program. Text is shown from the start.
Copies made with <use>, and shapes that are only definitions inside <defs> or <symbol>. They are shown from the start.
Anything that already has an animation, in CSS or as an <animate> element. It keeps the one it has.
Lines that are already dashed. The dash pattern is what the animation is made of, so a dashed line cannot keep its dashes and draw itself. The same goes for a line with vector-effect="non-scaling-stroke", whose dashes are counted in screen pixels.
The pieces of one path are drawn together. A dash pattern starts again wherever a path lifts the pen, so a path of several pieces draws all of them at once. The tool sets the dash by the longest piece and says so beside the result.

Where the animated file plays

The animation is plain CSS inside the SVG, so it runs wherever a browser shows the file: opened directly, in an <img> tag, as a background-image, or pasted inline into a page. It starts when the file is loaded. An SVG shown as an image cannot be clicked or hovered, so it cannot wait for either; for that, put the SVG inline and add the class from your own script.

The dashes exist only inside the keyframes. A program that does not run CSS animations therefore draws the file exactly as it was, and so does a browser once a file set to play once has finished. That is why a closed shape shows its corners properly at the end, which a dash left in place would spoil.

The file also carries a prefers-reduced-motion rule. People who have asked their phone or computer for less motion see the finished drawing at once, with nothing moving.

Questions

Does the animation play in an img tag?

Yes. CSS inside an SVG file runs when the file is shown with <img> or as a CSS background, and this animation needs no script. It cannot react to a click or a hover there, because nothing inside an image can.

Why does it say my file has no lines to draw?

Because none of its shapes has a stroke. Logos and icons are often drawn with fills alone. Press “Give fills an outline” and the edge of each shape is drawn, then the fill fades in.

Can I keep the CSS in my own stylesheet?

Yes, if the SVG is inline in the page. Download the file, paste its code into your HTML, cut the <style> element out of it and put its contents, which “Copy the CSS” also gives you, into your stylesheet. The shapes keep their class names. CSS in a page cannot reach an SVG shown with <img>, so there the style has to stay in the file.

How do I make it start when it scrolls into view?

Not with the file alone: an animation in a file starts when the file loads. Put the SVG inline, add animation-play-state: paused to its animated class in your stylesheet, and have a few lines of script set it to running when the picture comes into view.

Why does one path draw in several places at once?

The path is made of separate pieces, and a dash pattern starts again at each piece. To draw them one after another, split the path into one path for each piece in a drawing program first.

SVG line animation generator