SVG animator
Make the lines of a drawing trace themselves, or its shapes fade into place — then take the animated file, or just the CSS. Nothing is uploaded.
Drop an SVG here or click to choose
Or paste the code below — either way it is read on this device
Drop an SVG or paste its code to see it move here.
The animated file is built from a cleaned copy of your drawing: scripts, event handlers, foreign objects and links to files on other servers are removed before anything is animated, and the preview plays inside a locked-down frame with scripting switched off rather than being added to this page. Your shapes keep their own geometry, colours and structure — each animated one only gains a class name, one style block is added at the top, and the only exception is the borrowed outline, which stays in the finished drawing when you ask for it. The stylesheet ends with a reduced-motion rule, so anyone who has asked their system for less motion sees the finished drawing instead of the animation.
Animate an SVG in three steps
- Drop an SVG file in, or paste its code into the box.
- Pick an effect, then adjust speed, the gap between shapes and the easing until it reads the way you want.
- Download the animated SVG, or copy the stylesheet into a drawing you have already inlined.
One trick, and why it needs a line
The self-drawing effect everybody recognises is a dashed line with a single dash. Give an outline a dash exactly as long as the outline itself and shift it out of view by the same amount, and the shape disappears; animate that shift back to zero and the line slides into place as though a pen were tracing it. It is one property moving, which is why it stays smooth on a phone where a heavier effect would not.
The catch is in the first word. It needs an outline. A great many logos have none — they are solid shapes with a fill and no stroke, and there is no line for the pen to follow. Tools that hide this hand you a file that looks broken and no explanation. This one measures first and says so, then offers the two honest ways forward: fade the shapes in instead, or lend each bare shape a line in the colour it is already filled with, so the mark outlines itself and the colour arrives behind it.
Lengths are measured rather than estimated, because an estimate is visible. A dash a few
units short leaves a gap the animation never closes; a few units long and the line finishes
before the clock does. Every shape is measured from its own geometry, and a shape that
declares its own pathLength is taken at its word, since that is the unit the
browser counts dashes in.
Two ways to use what comes out
The animated SVG is a single file with the stylesheet inside it. Nothing else has to load
for it to move, which makes it the version to hand to somebody else. Opened as a document —
a browser tab, an object or an iframe — it plays. Dropped into an
img tag or a CSS background it usually plays too, but that part is the
browser's call rather than the file's: an image's animation can be held still, and Chrome
does exactly that while the tab sits in the background. If the movement has to be certain,
embed the file as a document.
The CSS on its own is for the other case: the SVG is already inlined in your markup, where you can reach its shapes with your own styles and scripts. Copy the stylesheet, add the class names it references to the matching elements, and you have the same animation with the drawing still part of the document. That is the arrangement worth having if you want the animation to start on scroll, or on hover, rather than the moment the picture appears.
Both versions carry the same prefers-reduced-motion rule. Motion that cannot be
turned off is a genuine accessibility problem — for some people it causes nausea, for others
it simply makes text impossible to read — and the browser already knows who has asked for
less of it. Four lines at the end of the stylesheet answer that question, and they are in
every file this tool produces.
What it will not do
This animates shapes, not scenes. There is no timeline, no motion path, no morphing between two drawings and no way to move a shape across the canvas — those need either a real animation tool or a JavaScript library, and pretending otherwise with a wall of sliders would make the simple case worse without making the hard case possible.
It also works on a cleaned copy of your drawing. Scripts, event handlers, foreign objects and anything pointing at another server are removed before the animation is added, for the same reason the SVG viewer refuses to render them. The difference is that the viewer hands your original bytes back untouched, while this tool is here to build a new file — so what you download is what the preview showed you, and an SVG that depends on a remote font or a script comes back without that piece.
Frequently asked questions
Why does nothing move when I choose "Draw the lines"?
Because the drawing effect needs an outline to draw along, and most logos are built from filled shapes with no stroke at all. There is nothing to trace. Two ways out: switch to Fade in, which works on any shape, or tick "Give flat shapes an outline to draw" — that lends every bare shape a line in its own fill colour, so the mark draws itself and then, on the "draw then fill" setting, colours in behind it. The tool tells you when it finds no strokes rather than leaving you tapping Play again at a still picture.
Does the file I download really animate on its own?
The animation is a stylesheet written inside the SVG, so the movement travels with the file: no JavaScript, no library, nothing to load alongside it. Opened as a document — a browser tab, an object or iframe embed — it plays. Used as a picture, in an img tag or a CSS background, it is down to the browser, because a browser decides for itself when to run an image's animation: Chrome, measured here, holds SVG image animation still while the tab is in the background. That is exactly why the preview on this page is a frame rather than an image. Software that treats SVG as a static drawing — print workflows, most design tools, thumbnail generators — shows the finished frame.
How does the drawing effect work?
It is a dashed line with one enormous dash. Every outline is given a dash pattern exactly as long as the outline itself, then pushed out of sight by an equal offset, so the shape renders as a gap. Animating that offset back to zero slides the dash into place and the line appears to be drawn. That is why the real length matters: a guess that runs short leaves a permanent gap, and one that runs long makes the line arrive late.
How are the lengths measured?
By the browser, from the geometry, using getTotalLength. Shapes that predate wide support for that call — rectangles, circles, ellipses, lines, polygons — fall back to their perimeter worked out from their own numbers, which for those shapes is exact rather than approximate, apart from corner rounding on a rectangle. If a shape declares its own pathLength, that value is used instead, because it is the unit the browser measures dashes in.
What happens to text, photos and reused shapes?
They have no outline to trace, so the drawing effect leaves them exactly as they were. Under "draw then fill" they fade in alongside the fills instead of being stranded, and under Fade in they behave like everything else. Text stays text — nothing is converted to outlines — and an embedded photograph stays an embedded photograph, so an SVG that is mostly a wrapper around a JPEG can only fade.
Is the file I get back still my file?
Structurally, yes: your shapes keep their geometry, their ids and their grouping, and each animated one gains two class names while a single style block goes in at the top. Two things do change. Anything the cleaner takes out before the drawing is animated — scripts, event handlers, foreign objects and references to files on other servers — is gone, which is the one real difference from the SVG viewer, where your original text comes back untouched. And if you asked for the borrowed outline, that line is a plain style rule rather than part of the movement, so it is still there once the animation has finished. Everything else is yours, and the file that comes out is the file the preview showed.
What about people who do not want animation?
The generated stylesheet ends with a prefers-reduced-motion block that switches the animation off and shows the finished drawing. Someone who has asked their operating system for less motion — because animation makes them ill, or distracts them — gets the artwork rather than nothing at all. It costs four lines and it is in every file this tool makes, including the CSS on the clipboard.