18 Best SVG Animation Examples (With Code & Live Demos)
Last updated: March 2026
18 SVG Animation Examples That Push the Boundaries of Web Design
SVG animations have become the standard for sophisticated web motion. Unlike GIFs or video, SVG animations scale to any resolution, weigh almost nothing, and can be controlled programmatically. The technique you choose — CSS, GSAP, Lottie, or SMIL — determines your animation’s complexity ceiling, browser support, and file size.
This roundup showcases 18 standout SVG animation examples organized by technique, so you can see what each approach does best and pick the right tool for your project. For related design data, check out our web design statistics roundup.
SVG Animation Techniques at a Glance
Before diving into the examples, here is a quick comparison of the five main SVG animation approaches available in 2026.
| Technique | Dependencies | Performance | Complexity Ceiling | File Size Impact | Best For |
|---|---|---|---|---|---|
| CSS Animations | None | Excellent (GPU composited) | Moderate | Minimal | Loaders, icons, hover effects |
| GSAP | ~30 KB (core) | Excellent | Very high | Low (JS library) | Complex timelines, scroll-driven |
| Lottie / Bodymovin | ~50 KB (player) | Good | Very high | JSON export varies | After Effects animations on web |
| SMIL | None | Good | Moderate | Minimal | Self-contained SVG animations |
| Snap.svg / SVG.js | ~30-80 KB | Good | High | Low | Dynamic SVG manipulation |
CSS-Only SVG Animations
CSS animations are the lightest approach — zero JavaScript required. Modern CSS can handle transforms, path morphing (with offset-path), stroke drawing, and complex keyframe sequences. These examples prove you can achieve impressive results with nothing but stylesheets.
1. CSS Animated SVG Hamburger Menu
A three-line hamburger icon that morphs into an X on click using pure CSS transitions on SVG <line> elements. The animation uses stroke-dasharray and stroke-dashoffset to create the illusion of lines drawing and unwriting themselves. No JavaScript required beyond toggling a CSS class.
What stands out: The transition feels organic because each line has a slightly different timing function. The middle line fades out while the top and bottom lines rotate into position — a detail most hamburger menus skip.
2. SVG Line Drawing Animation
This technique uses stroke-dasharray equal to the path length and animates stroke-dashoffset from that value to zero. The result: an SVG illustration that appears to draw itself line by line. Popularized by Polygon’s Xbox One review in 2013, this approach remains one of the most visually striking CSS-only SVG effects.
What stands out: The staggered timing across multiple paths creates a sense of an invisible hand sketching the image in real time. Works on any SVG with stroked paths.
3. CSS SVG Loading Spinners Collection
A set of eight loading spinners built entirely with SVG and CSS animations. Each spinner uses a different technique: rotating circles with staggered animation-delay, pulsing dots using scale transforms, and a morphing blob using border-radius keyframes on an SVG <circle>.
What stands out: These weigh under 2 KB each, compared to 50-200 KB for a typical GIF spinner. They also scale perfectly on retina displays and can be color-matched to any brand with a single CSS variable change.
4. Animated SVG Weather Icons
A complete set of weather icons (sun, clouds, rain, snow, thunderstorm) animated purely with CSS keyframes. Rain drops use translateY with staggered delays, clouds drift with subtle translateX oscillation, and lightning uses opacity flashes with randomized timing.
What stands out: Each icon is a self-contained SVG with embedded <style> tags, meaning you can drop one into any page without external CSS dependencies. The rain animation uses overlapping drop elements at different speeds for a realistic effect.
GSAP SVG Animations
GSAP (GreenSock Animation Platform) is the industry standard for complex SVG animation. Its timeline system, easing library, and plugins like MorphSVG, DrawSVG, and ScrollTrigger enable animations that would be impractical with CSS alone. GSAP 3.x weighs about 30 KB gzipped and outperforms CSS animations on complex sequences because it batches DOM writes.
5. GSAP SVG Morphing Shapes
Using GSAP’s MorphSVG plugin, this demo morphs between completely different SVG shapes — a circle becomes a star, then a heart, then a speech bubble. The plugin handles the complex math of mapping points between paths with different node counts.
What stands out: MorphSVG’s shapeIndex property lets you control which points map to which, so the morph follows a natural visual path instead of collapsing into chaos. The demo chains four morphs into a seamless loop using GSAP’s timeline.
6. Scroll-Triggered SVG Infographic
A data visualization built with SVG paths that animate into view as you scroll. Bar charts grow upward, line charts draw themselves, and pie chart segments rotate into position. GSAP’s ScrollTrigger plugin ties each animation to scroll progress so users control the pacing.
What stands out: The scrub feature means animations track scroll position 1:1 — scroll up and the charts reverse. The counter numbers use GSAP’s snap to increment in whole numbers while the visual elements animate smoothly.
7. GSAP DrawSVG Text Reveal
Hand-lettered text appears to be written in real time using GSAP’s DrawSVG plugin. Each letter is a separate <path> with a carefully set stroke-dasharray. GSAP staggers the draw animation across letters with natural timing that mimics actual handwriting speed variations.
What stands out: The ink pooling effect at stroke endpoints is achieved by animating stroke-width slightly wider at the end of each letter’s draw sequence. Combined with a subtle pen texture on the stroke, the result is remarkably lifelike.
8. Animated SVG Map with GSAP
An interactive world map where countries highlight on hover with smooth color transitions and a tooltip follows the cursor. Clicking a region triggers a zoom animation using GSAP’s viewBox animation, smoothly transitioning the SVG viewport to focus on the selected area.
What stands out: The zoom animation manipulates the SVG viewBox attribute directly rather than using CSS transforms, which means the map content stays crisp at every zoom level. GSAP handles the four-value viewBox interpolation seamlessly.
Lottie / Bodymovin Animations
Lottie renders After Effects animations on the web via JSON files exported with the Bodymovin plugin. This pipeline lets motion designers create complex animations in their preferred tool while developers drop in lightweight, scalable, interactive animations. The Lottie player weighs about 50 KB, and most animation JSON files are 10-100 KB — a fraction of equivalent video files.
9. Lottie Animated Onboarding Screens
A set of onboarding illustrations that play through step-by-step product features. Each screen has a looping Lottie animation: a character interacting with a phone, data flowing between devices, and a celebration confetti burst. Transitions between screens use Lottie’s playSegments API to play specific frame ranges.
What stands out: The animations respond to swipe gestures — swiping halfway between screens plays the animation to a midpoint, and releasing snaps forward or back. This level of interactivity would require thousands of sprite frames with traditional approaches.
10. Lottie Micro-Interactions for UI
A collection of button micro-interactions: a heart that fills and bursts with particles on like, a bookmark that folds down, a send button where a paper airplane launches, and a toggle switch with a liquid morphing animation. Each is under 15 KB JSON.
What stands out: These replace static icon swaps with fluid, branded animations that take 300-500ms — long enough to feel satisfying but short enough to not impede usability. The interactivity property on lottie-player lets you tie animation progress to hover or click states without custom JavaScript.
11. Lottie 404 Error Page
An animated 404 error page where the numbers “4-0-4” are formed by a character tripping, stumbling through a zero, and landing on the final four. The looping animation keeps the error page engaging while the user decides where to navigate next.
What stands out: The character animation uses After Effects’ puppet tool for natural body movement, exported at 30fps into a 45 KB JSON file. Equivalent GIF would be 800 KB+. The animation also supports setDirection(-1) for reverse playback on page exit.
12. Lottie Data Dashboard Animation
A dashboard loading state where charts, graphs, and data cards animate in with staggered timing. Bar charts grow from zero, donut charts fill clockwise, and stat numbers count up. Designed as a skeleton screen replacement — instead of grey placeholder boxes, users see an animation that communicates “your data is loading.”
What stands out: Uses Lottie’s marker system to sync specific animation segments with actual data load events. When the API responds, the animation freezes on the “complete” marker and crossfades to real data, creating a seamless transition from loading to loaded.
SMIL Animations
SMIL (Synchronized Multimedia Integration Language) is SVG’s native animation syntax. You define animations directly in SVG markup using <animate>, <animateTransform>, and <animateMotion> elements. No external dependencies whatsoever. While Chrome briefly deprecated SMIL in 2015, they reversed that decision, and SMIL now has full support across all major browsers including Safari, Firefox, and Edge.
13. SMIL Animated Logo
A logo that assembles itself from individual SVG elements using SMIL’s <animate> and <set> elements. Each shape fades in, slides into position, and the text types out character by character. The entire animation is self-contained within a single SVG file — no CSS, no JavaScript.
What stands out: Because the animation lives inside the SVG, it works everywhere SVGs work: <img> tags, CSS backgrounds, email clients that support SVG, and even PDF viewers. This portability is SMIL’s killer feature over CSS or JavaScript approaches.
14. SMIL Path Animation (Motion Along a Path)
An SVG element (a car icon) that follows a curved road path using <animateMotion> with the path attribute. The car rotates to match the road’s direction using rotate="auto", creating a natural driving animation with zero JavaScript.
What stands out: The <animateMotion> element handles both position and rotation automatically based on path tangent — something that requires significant math in JavaScript. Adding keyTimes and keySplines attributes creates easing so the car accelerates on straights and slows on curves.
15. SMIL Color Cycling Gradient
A background gradient that smoothly cycles through colors using SMIL’s <animate> on SVG <stop> elements within a <linearGradient>. The gradient shifts through a palette of six colors over 12 seconds in an infinite loop. Used as a dynamic background behind text or hero sections.
What stands out: This weighs under 500 bytes and creates a mesmerizing ambient effect. Unlike CSS gradient animations (which can’t transition between gradient stops smoothly in all browsers), SMIL handles gradient stop animation natively in all SVG-supporting browsers.
Snap.svg & SVG.js Animations
Snap.svg and SVG.js are JavaScript libraries specifically designed for SVG manipulation and animation. They provide a jQuery-like API for creating, modifying, and animating SVG elements programmatically. While GSAP is more popular for animation, these libraries excel at dynamic SVG creation — generating shapes, paths, and patterns from data at runtime.
16. SVG.js Interactive Particle System
An interactive particle system where SVG circles respond to mouse movement. Particles connect with lines when within proximity, creating a constellation effect. SVG.js handles the creation and animation of hundreds of elements with its chainable API and built-in animate() method.
What stands out: SVG.js’s timeline() system manages the animation of 200+ elements efficiently, and its move() method uses requestAnimationFrame under the hood. The mouse interaction uses SVG.js’s event system to update particle velocities based on cursor proximity.
17. Snap.svg Animated Infographic
An infographic that builds itself from raw data. Snap.svg creates SVG elements programmatically — no pre-drawn SVG file needed. The script reads a JSON data object and generates proportional bar charts, pie segments, and connecting lines, then animates each into view with Snap’s animate() method.
What stands out: Because the SVG is generated from data, the same code produces different infographics for different datasets. Snap.svg’s path() method handles the math of creating arc segments for pie charts, and its matrix() transforms enable complex positioning.
18. SVG.js Animated Text on a Path
Text that follows a curved SVG path and scrolls along it infinitely. SVG.js’s textPath() method places text on any path element, and the animate() method smoothly updates the startOffset attribute to create the scrolling effect. The curve itself is generated dynamically using Bezier control points.
What stands out: The text remains fully selectable and accessible — it is real <text> in the DOM, not an image or canvas rendering. SVG.js handles the complex textPath API with a clean, readable syntax that is far simpler than raw SVG DOM manipulation.
Tools for Creating SVG Animations
You do not need to hand-code every animation. These tools provide visual interfaces for creating SVG animations, then export clean code you can integrate into your projects.
| Tool | Output Format | Pricing | Learning Curve | Best For |
|---|---|---|---|---|
| SVGator | CSS, SMIL, JS, Lottie | Free tier / $18/mo Pro | Low | Designers who want a timeline UI without code |
| LottieFiles | Lottie JSON, dotLottie | Free tier / $20/mo | Low (with AE) | After Effects to web pipeline |
| GSAP | JavaScript | Free (standard) / paid (business plugins) | Moderate | Developers building complex interactive animations |
| Haiku Animator | Lottie, CSS, JS | Free (open source) | Moderate | Component-based animation for React/Vue |
| Keyshape | CSS, SMIL, Lottie | $39 one-time | Low | Mac users wanting a native SVG animation editor |
| SVG.js | JavaScript | Free (open source) | Low-Moderate | Programmatic SVG creation and simple animations |
SVGator
SVGator provides a browser-based timeline editor that feels like a simplified After Effects for SVG. You import an SVG file, set keyframes on individual elements, choose easing functions from a visual curve editor, and export as CSS animations, SMIL, JavaScript, or Lottie JSON. The free tier allows three projects with CSS/SMIL export. Pro adds JavaScript export, path animations, and morph effects.
SVGator works best for self-contained animations: animated logos, loading sequences, illustrated transitions, and interactive icons. It is not designed for scroll-triggered or data-driven animations — for those, you need GSAP or custom code.
Lottie / LottieFiles
The Lottie ecosystem connects motion designers working in After Effects with web and mobile developers. Designers create animations in AE, export via the Bodymovin plugin to JSON, and developers render them with the lottie-web player (50 KB gzipped). LottieFiles.com adds a marketplace of free and premium animations, a web-based editor for tweaking colors and timing, and hosting with a CDN-backed player.
In 2026, the dotLottie format has largely replaced raw JSON — it bundles animations with assets into a compressed binary that is 50-70% smaller. The <dotlottie-player> web component provides the simplest integration path.
GSAP (GreenSock)
GSAP is the professional’s choice for SVG animation. Its core library handles any DOM property animation, and its SVG-specific plugins (MorphSVG, DrawSVG, MotionPath) add capabilities that no other tool matches. GSAP 3.x’s timeline system lets you orchestrate dozens of elements with relative positioning (<, >, +=0.2), making complex sequences readable and maintainable.
The standard GSAP library is free for all uses including commercial. The “Club” plugins (MorphSVG, DrawSVG, SplitText, ScrollSmoother) require a paid license for commercial projects but are free to use on CodePen and in development. If you are exploring SVG animation tools, check out our list of free SVG editor tools for creating and optimizing your source files.
Choosing the Right SVG Animation Technique
The right technique depends on your animation’s complexity, your team’s skillset, and your performance budget.
| Scenario | Recommended Technique | Why |
|---|---|---|
| Animated icon or loader | CSS animations | Zero dependencies, best performance for simple animations |
| Complex timeline with multiple elements | GSAP | Timeline orchestration, easing control, ScrollTrigger |
| Designer-created animation from After Effects | Lottie | Preserves AE animation exactly, smallest design-to-dev gap |
| Self-contained SVG (email, embed) | SMIL | Works inside <img> tags and email clients |
| Data-driven SVG generation | SVG.js or Snap.svg | Programmatic element creation and manipulation |
| Scroll-driven storytelling | GSAP + ScrollTrigger | Scrub animations tied to scroll position |
| Quick prototype without code | SVGator | Visual timeline editor, no JavaScript needed |
One important consideration: performance. CSS animations and SMIL are composited by the browser’s rendering engine and run on the GPU when using transform and opacity. GSAP and JavaScript-based approaches run on the main thread but batch their updates efficiently. Lottie uses Canvas or SVG rendering depending on the player configuration. For most web projects, all five techniques are performant enough — the limiting factor is usually the SVG complexity (path count, filter effects), not the animation engine.
Whatever technique you choose, keep your source SVGs optimized. Run them through SVGOMG to strip metadata, simplify paths, and reduce file size before animating. A clean SVG animates better and loads faster.
Related Posts
Thanks for an article! It is great.
Indispensable blog! I personally like your concept of animated SVG files. I don’t know the usage of SVG files as animations . I found it very practical and going to try this concept for the the approaching valentines.
I never knew how SVG worked until you wrote this article. Great insight. Thanks!
Hey, Alex!
Thank you for these SVG examples. I like the most examples of animated SVG browser icons. The SVG format is very useful. We create SVG files from Adobe Illustrator. But, as you said, sometimes in some cases GIF format is better.
love this! examples of the GSAP logo animations:adsspirit