Guides · · Maxwell Prehoda
13 SVG Animation Examples, and the Technique Behind Each One
Almost every good SVG animation uses one of five techniques: a stroke that draws itself, a shape that morphs into another, a filter that makes shapes merge, animation baked into the file with SMIL, or an After Effects export played back by Lottie. Pick the technique first and the tool almost picks itself.
So this list is organized by technique, not by how pretty the CodePen is. Each entry names the person or project that made the technique famous, links to their work, says when it is the right pick and what will bite you. Where we have a pure CSS version in our directory, it plays live under the entry so you can copy it.
1. Jake Archibald's animated line drawing: Best for learning the self-drawing line trick at the source
Platform: Article, SVG + CSS transitions, no library
In July 2013 Jake Archibald wrote up the trick nearly every "draw on scroll" or signature animation still uses: give a path a single dash as long as the path itself, offset that dash by the same length so the line is hidden, then transition stroke-dashoffset back to zero. He measured the path with getTotalLength() (about 988 units for his squiggle) and animated it with a plain CSS transition.
It is still the clearest explanation of why the effect works, and it is short. The parts that have aged are the workarounds: forcing layout with getBoundingClientRect between two style writes, and fallbacks for Internet Explorer.
Our Draw and Erase Circle Loader below is a pure CSS version of the same idea: only stroke-dashoffset moves, on one SVG circle, and the tail chases the head round to erase it.
Watch out for: Skip the JavaScript measuring step in new code. Set pathLength="1" or "100" on the path and your dash values become round numbers that survive resizing.
2. Josh W. Comeau's Friendly Introduction to SVG: Best for designers who learn strokes by dragging sliders
Platform: Interactive article, SVG + CSS
Josh Comeau's guide (published July 2025, updated August 2026) treats SVG attributes as what they are: CSS properties you can transition. It has sliders for dash size, gap size and dash offset, a spinner made by animating dash length and offset together, a "Draw shape" button for the drawing effect, and a section on the pathLength attribute that lets you write dash values on a scale of 100 instead of measuring.
It also shows a circle whose r and cy transition on hover, which surprises people who think SVG geometry needs JavaScript. His own demos respect Reduce Motion, which is a good habit to copy.
Our Infinity Loader below uses exactly the pathLength approach he describes: a stroke chases itself around an infinity path over a faint track, with dash maths in round numbers.
Watch out for: It teaches the primitives, not a finished component library. You will still write your own keyframes and reduced-motion fallback.
3. Vivus.js by maxwellito: Best for drawing a whole line illustration without keyframes
Platform: JavaScript library, MIT, no dependencies
Vivus automates the dash trick across every path in an SVG. Point it at an illustration and choose a type: delayed (all paths at once with a small stagger), sync (every line starts and ends together), oneByOne (paths drawn in order at a constant pen speed, since duration follows path length) or scenario, where you set data-start and data-duration on each path by hand.
It is the fastest way to make an icon set, a map route or a line drawing sketch itself in on load, and the oneByOne mode is what gives the "someone is drawing this" feeling.
If you only need a word or a short label, you may not need a library at all. Our Letter by Letter Stroke Draw below does a oneByOne style sequence in pure CSS with staggered tspans.
Watch out for: Paths must be strokes with no fill, text elements are not supported, and hidden paths still get animated, so clean the file before you hand it to Vivus.
4. GSAP DrawSVG and MorphSVG: Best for choreographed timelines that draw and morph in sequence
Platform: GSAP 3.13+, free including commercial use
Since GSAP 3.13, every former Club plugin is free, including DrawSVG and MorphSVG, and they ship in the public gsap npm package. MorphSVG animates a path's d attribute into another shape in one line (the docs turn a diamond into a lightning bolt), converts circles, rects and polygons to paths for you with convertToPath(), and has a shapeIndex option plus a findShapeIndex() helper for fixing morphs that twist through themselves.
DrawSVG does the stroke reveal with sensible defaults, including drawing from the middle out or animating a segment along a path. Put both on a timeline and you can sequence an icon that draws, morphs and settles with exact timing.
This is the right pick when the animation is a sequence with several steps, or when it has to react to scroll or input mid-flight.
Watch out for: The GSAP license bars using it to build a visual, no-code animation tool that competes with Webflow. Ordinary sites and apps are fine; read the standard license if you build tools.
5. Flubber by Noah Veltman: Best for morphing two shapes with different point counts
Platform: JavaScript library, MIT
A CSS or SMIL morph only works cleanly when both paths have the same number and type of points. Flubber exists for the case where they do not: it makes a "best-guess interpolation" between any two shapes and hands you a function that returns the in-between path for any value from 0 to 1.
Beyond interpolate() it has toCircle(), toRect() and their reverses, plus separate() and combine() for splitting one shape into several pieces or merging several into one. It is renderer agnostic, so you can drive it with requestAnimationFrame, D3 or any tween library.
It shines in maps and charts, where the shapes come from data and you cannot hand-edit the points to match.
Watch out for: Holes and compound paths are not handled: only the first outer shape of a path is used, and separate/combine are slow on complex shapes.
6. Lucas Bebber's Gooey Effect: Best for liquid blobs that stretch apart and merge
Platform: SVG filter applied with CSS
Published on CSS-Tricks in February 2015, this is the filter behind most "metaball" menus and loaders. It blurs the shapes with feGaussianBlur, then sharpens only the alpha channel with an feColorMatrix (the last row is 0 0 0 18 -7), so overlapping blurs fuse into one smooth blob. The animation itself is just elements moving; the filter does the melting.
Bebber also gives a variant using feComposite with the atop operator for shapes with corners, and notes that the container needs bleed space so the blur is not clipped at the edges.
Our Gooey Blob Loader below is a pure CSS version: three blobs move with keyframes inside a container that carries an inline goo filter.
Watch out for: Filters repaint every frame. Keep the filtered area small, since large gooey regions get expensive on phones.
7. SMIL's animate element (MDN): Best for SVG files that must animate on their own as an image
Platform: Native SVG, Baseline widely available
SMIL is animation written inside the SVG markup: an animate element with attributeName, values, dur and repeatCount. MDN's example animates a rectangle's rx from 0 to 5 and back forever, and the page marks the element as Baseline, available across browsers since January 2020. The old Chrome deprecation scare never landed.
The reason to use it today is portability. When an SVG is loaded as an image (an img tag or a CSS background), browsers disable JavaScript inside it, so a self-contained file with SMIL or an embedded style block is the way to ship an animated logo or illustration that plays wherever the file goes.
It also animates things CSS cannot reach in every browser, such as path d values, and supports motion along a path with animateMotion.
Watch out for: SMIL has no reduced-motion switch of its own. For decorative files, play once with repeatCount="1" instead of looping forever, or use CSS animation inside the file so a media query can turn it off.
8. Sarah Drasner's SVG Animations: Best for teams building responsive, production SVG animation
Platform: Book (O'Reilly, 2017) + CodePen demos
Sarah Drasner's book, SVG Animations: From Common UX Implementations to Complex Responsive Animation (O'Reilly, April 2017), is still the most complete treatment of the subject. It compares CSS, SMIL and JavaScript approaches side by side, leans on GSAP for complex work, and covers responsive animation and accessibility, which most tutorials skip.
Her CodePen work, including the Responsive Huggy Laser Panda Factory, set the bar for character animation in the browser.
Read it when SVG animation becomes part of your product rather than a one-off flourish, and you need patterns that hold up across screen sizes.
Watch out for: Some code predates GSAP 3 and uses TweenMax syntax. The concepts hold; translate the API calls to gsap.to and timelines as you go.
9. Chris Gannon's interactive SVG: Best for playful, character-driven UI moments
Platform: SVG + GSAP, often with Lottie
Chris Gannon is an interactive motion designer and web animator whose clients have included the BBC, Google, The New York Times, Microsoft and Amazon. His CodePen is full of small interactive SVG pieces, like the Egg Toggle and Heart is Home, where a control does something charming instead of just flipping state.
In a 2019 LottieFiles interview he describes his workflow: animate in After Effects, export with Bodymovin, then add randomness and interactivity on top with GSAP, because a Lottie file on its own plays back the same way every time.
Study his pens when you want a toggle, loader or empty state with personality and you need to see how timing and anticipation are handled in code.
Watch out for: Many pens are art pieces built for delight, not drop-in components. Expect to rebuild them with your own markup, focus states and reduced-motion handling.
10. Lottie (lottie-web by Airbnb): Best for After Effects animations shipped as JSON
Platform: JSON + lottie-web player, MIT
Lottie is not SVG you write, it is SVG you render. A motion designer builds the animation in After Effects, exports it as JSON with the Bodymovin extension, and lottie-web draws it in the browser with an svg, canvas or html renderer. The same file plays on Android, iOS and React Native.
That makes it the right choice for complex illustration and character work that would take days to hand-code, and for teams where designers own the motion. Precomps, shapes, solids, null objects, text, time remapping and expressions are supported.
For a single icon or a stroke reveal it is overkill: a few lines of CSS on an inline SVG do the same job without a player.
Watch out for: Image sequences, video and audio do not export, inverted masks are slow, and every page pays for the player script on top of the JSON. Convert image layers to shapes before export.
11. SVGator: Best for designers who want a timeline instead of code
Platform: Browser app, free plan + paid plans
SVGator is a browser-based editor for animating SVG on a keyframe timeline: import a vector file, animate it on the timeline, and export. It is what most of the examples on its own blog were made with, and it is a reasonable fit for marketing illustrations and logo reveals that a designer wants to own end to end.
Exports include animated SVG with CSS or JavaScript, Lottie JSON, and React Native and Flutter targets, plus video and GIF on higher tiers.
If your team already designs in Figma or Illustrator and nobody wants to touch keyframes, it removes the hand-off step.
Watch out for: The free plan exports static SVG only. Animated SVG, Lottie and interactive exports need a paid plan, so check that before you build a whole animation on the free tier.
12. Our Hand-Drawn Circle Around Text: Best for circling one word in a headline
Platform: Motions directory, free, HTML + CSS Ours
A loose pen loop draws itself around one word in a sentence and overshoots where it started, the way a real hand does. It is one SVG path with pathLength set, so the draw is a single stroke-dashoffset keyframe and no JavaScript.
Like every snippet in our directory it ships with a prefers-reduced-motion guard (the circle is simply shown) and custom properties for colour and size. For other annotations, the same folder has a hand-drawn box and a hand-drawn arrow.
Watch out for: Hand-drawn paths are tuned to word length. For very long or very short words, stretch the SVG with preserveAspectRatio="none" or the loop will look cramped.
13. Our Checkmark Draw Icon Hover: Best for icon micro-interactions without an icon library
Platform: Motions directory, free, HTML + CSS Ours
A faint circled check that draws itself in on hover: the ring traces round from the top, then the tick strokes in. Each shape has pathLength="1", so the dash values are 0 and 1 and the sequence is two transitions with a delay.
It is a good template for any line icon. Swap the paths for your own icon's strokes and keep the timing. Browse our hover effects for more icons built the same way, or describe your own to the creator and get the keyframes back.
Watch out for: Hover does not exist on touch. Trigger the same draw from a class on success or focus-visible as well, so keyboard and phone users see it.
How to choose an SVG animation approach
Three questions settle it.
Match the technique to the motion
Lines appearing means stroke-dashoffset, either hand-written like Archibald's or automated with Vivus. One shape becoming another means a morph: SMIL or CSS if the points match, Flubber or GSAP MorphSVG if they do not. Shapes merging means a goo filter. Full character animation means Lottie or a GSAP timeline.
Match the tool to who owns it
If a developer owns the motion, inline SVG plus CSS is the lightest path and the easiest to theme. If a motion designer owns it, let them work in After Effects for Lottie or in SVGator. If both touch it, GSAP timelines are readable enough to hand back and forth. Do not make a designer edit dash offsets in a stylesheet.
Match the delivery to where it plays
Inline SVG in the page can use CSS, JavaScript and your design tokens. An SVG loaded as an image runs no script, so it needs SMIL or an embedded style block. Email clients are the most restrictive of all; see our email animation post before you count on any of this there.
Draw your first stroke today
Start with one stroke. Take an icon you already have, set pathLength="1" on its paths, and animate stroke-dashoffset from 1 to 0 over 600 ms with an ease-out. That single change covers most of what people mean by "SVG animation".
When you want something past that, copy a working version from our loaders or text animations, or describe the animation to the creator and refine it in chat until it is right.
Animate this inline SVG icon so its strokes draw themselves in when it enters the page. Use pathLength="1" on each path and animate stroke-dashoffset from 1 to 0. Draw paths one after another, 450 ms each, 80 ms apart, with cubic-bezier(0.22, 1, 0.36, 1). Fade the fill in after the last stroke finishes. Under prefers-reduced-motion: reduce, show the finished icon with no drawing.
Common questions
How do you make an SVG look like it draws itself?
Give the path a stroke and no fill, set stroke-dasharray and stroke-dashoffset to the path's length, then animate stroke-dashoffset to 0. Setting pathLength="1" on the path lets you use 1 and 0 instead of measuring with getTotalLength().
Is SVG animation better than Lottie?
For icons, loaders, line reveals and simple morphs, hand-written SVG with CSS is lighter and easier to theme. For complex character or illustration work made by a motion designer in After Effects, Lottie saves days of hand-coding, at the cost of a player script and a JSON file.
Is SMIL deprecated?
No. Chrome once announced a deprecation and then withdrew it. MDN lists the animate element as Baseline widely available, supported across browsers since January 2020.
Can you animate SVG with only CSS?
Yes, for inline SVG. Transforms, opacity, fill, stroke, stroke-dasharray and stroke-dashoffset, and in modern browsers geometry like r and cx, all animate with CSS keyframes or transitions. Every snippet linked above is pure HTML and CSS.
Is GSAP free for SVG animation?
Yes. Since version 3.13 all of GSAP, including the former paid DrawSVG and MorphSVG plugins, is free even for commercial use. The one restriction is building a visual no-code animation tool that competes with Webflow.
Do animated SVGs work in an img tag?
Animation written into the file itself, with SMIL or an embedded style block, plays. JavaScript inside the file does not run when the SVG is loaded as an image, and it cannot pick up your page's CSS.