{"id":46822,"date":"2026-10-01T06:06:15","date_gmt":"2026-10-01T06:06:15","guid":{"rendered":"https:\/\/colorlib.com\/wp\/?p=46822"},"modified":"2026-10-01T06:11:16","modified_gmt":"2026-10-01T06:11:16","slug":"svg-animations-examples","status":"publish","type":"post","link":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/","title":{"rendered":"26 Best SVG Animation Examples (With Code &#038; Live Demos)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>The best SVG animations are small, sharp and cheap to load: a menu icon that morphs, a loader that never pixelates, a whole illustrated scene in a few kilobytes of markup.<\/strong> These 26 are live CodePen demos you can open, read and fork, grouped by technique: CSS, GSAP, SMIL and other JavaScript libraries. For animation on complete websites, see our <a href=\"https:\/\/colorlib.com\/wp\/animation-websites\/\">animated website examples<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We opened every pen, read its code and recorded it running, so each clip below shows the real demo and each description says how it is built. The previous version of this list linked several pens that no longer exist or did not match their descriptions, so we rebuilt it from scratch.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-css-svg-animations\">CSS SVG Animations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS animates SVG shapes with the same @keyframes and transitions you use on HTML, including SVG-only properties like stroke-dashoffset. Eight of these pens use no animation library, and most use no JavaScript at all.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-wolf-animation-pure-css-by-grizzlyowlet\">1. <a href=\"https:\/\/codepen.io\/grizzlyowlet\/pen\/NGEaxX\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Wolf Animation (Pure CSS) by @grizzlyowlet<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: CSS @keyframes, no JavaScript<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/wolf-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/wolf-svg-animations-examples-clip-poster.jpg\" aria-label=\"Low-poly SVG wolf head assembling from triangles with CSS animation\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/wolf-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Low-poly SVG wolf head assembling from triangles with CSS animation\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A low-poly wolf&#8217;s head builds itself out of flat triangles: pieces slide in from the left, the right, the top and the corners, one group after another, until the face is complete and holds still. It is one inline SVG, and the JavaScript panel contains only a comment saying there is nothing to see there.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eight @keyframes rules, all transforms, do the work. Each group of facets gets the same short slide with its own delay, 0.1-second animations starting a tenth of a second apart, so the timing rather than the artwork creates the assembly. Every animation ends with forwards fill, so the wolf stays built.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Staggered delays turn a few simple slides into an assembly sequence.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-beating-heart-by-morkett\">2. <a href=\"https:\/\/codepen.io\/morkett\/pen\/VjByYj\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Beating Heart by @morkett<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: CSS @keyframes, stroke-dashoffset, no JavaScript<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/beating-heart-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/beating-heart-svg-animations-examples-clip-poster.jpg\" aria-label=\"Low-poly SVG heart drawing its outline and beating\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/beating-heart-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Low-poly SVG heart drawing its outline and beating\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A low-poly anatomical heart draws its outline, fills in with shades of red and then starts to beat. The pen&#8217;s code is marked \u201cFree from JS\u201d: everything happens in CSS on a single inline SVG.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The drawing uses stroke-dasharray and stroke-dashoffset in a keyframe called fill-ani, delayed by two to three seconds per part. The beat comes from separate pulse-grow keyframes on the main chamber and the top and bottom sections, set to run infinitely and alternate, so each part swells at its own rhythm.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Draw-in, fill and heartbeat, chained with nothing but animation delays.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-kitschy-animated-svg-mardi-gras-parade-by-mark-sottek\">3. <a href=\"https:\/\/codepen.io\/mark_sottek\/pen\/MYJLpX\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Kitschy Animated SVG Mardi Gras Parade by @mark_sottek<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: CSS @keyframes<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/mardi-gras-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/mardi-gras-svg-animations-examples-clip-poster.jpg\" aria-label=\"Animated SVG marching band parading past a New Orleans crowd\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/mardi-gras-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Animated SVG marching band parading past a New Orleans crowd\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A cartoon marching band parades past a photo of a New Orleans crowd: a drummer, a trombonist and a baton-twirling leader, heads bobbing and legs stepping in time. A note in the code calls it the author&#8217;s first attempt at SVG animation, and a small toggle in the corner switches the music on.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sixteen @keyframes rules run the parade. MarchingBand moves the whole group across the street over 50 seconds, while shorter loops (700 ms drumsticks, 1.2-second trombone arms and head bobs) play on top, which is how a few simple rotations read as a full band.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Layered loops at different speeds turn simple rotations into a crowd scene.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-swing-girl-svg-animation-by-uiswarup\">4. <a href=\"https:\/\/codepen.io\/uiswarup\/pen\/MWWNOjo\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Swing Girl SVG Animation by @uiswarup<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: CSS @keyframes, no JavaScript<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/swing-girl-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/swing-girl-svg-animations-examples-clip-poster.jpg\" aria-label=\"SVG illustration of a girl on a swing under a tree with fluttering leaves\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/swing-girl-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"SVG illustration of a girl on a swing under a tree with fluttering leaves\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A girl on a swing hangs from a bare tree while its leaves flutter around her. It is a flat illustration exported as one SVG and brought to life with just two keyframes: swing for the girl and shake-bottom for the leaves, with no JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The trick is the timing. Every leaf runs the same shake-bottom keyframe with its own duration, anywhere from 2 to 8 seconds, so the leaves never move in sync and the tree looks like it is catching a breeze. The swing keyframe rocks the girl back and forth underneath.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Varied durations on one keyframe make the motion feel natural.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-melting-popsicle-by-hopearmstrong\">5. <a href=\"https:\/\/codepen.io\/hopearmstrong\/pen\/qwdBwR\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Melting Popsicle by @hopearmstrong<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: CSS @keyframes, no JavaScript<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/popsicle-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/popsicle-svg-animations-examples-clip-poster.jpg\" aria-label=\"Melting SVG ice lolly with drops falling\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/popsicle-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Melting SVG ice lolly with drops falling\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A pink ice lolly melts in the heat: drops form at its bottom edge, stretch and fall from the left and right sides in turn. It is a tiny pen, one SVG with two keyframes and no JavaScript, which makes it a good first example to study line by line.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The drop-left keyframe runs every 3 seconds and drop-right every 2.5 seconds, each animating transform and opacity, so the drips drift in and out of step instead of falling as a pair. Because it is vector, the illustration stays crisp at any size, including the zoomed view in our clip.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Two keyframes and offset timings make a convincing melt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-svg-css-fire-animation-by-deepakkv\">6. <a href=\"https:\/\/codepen.io\/deepakkv\/pen\/EKpYMg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">SVG CSS Fire Animation by @deepakkv<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: CSS @keyframes, no JavaScript<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/fire-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/fire-svg-animations-examples-clip-poster.jpg\" aria-label=\"Flat SVG flame flickering with sparks\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/fire-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Flat SVG flame flickering with sparks\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A small flat flame flickers while sparks drift up and fade above it on a black background. The flame is built from nine layered SVG paths in yellow, orange and red, and the pen has no JavaScript at all.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Two keyframes carry the effect: flameWobble distorts the flame with transforms so it never holds still, and flamefly lifts the sparks while fading their opacity. It is a handy pattern for any ambient loop, such as a campfire in an illustration or a badge that needs a little heat.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> A transform-only wobble that reads as flickering fire.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-7-animated-blob-svg-text-clipping-by-zach-saucier\">7. <a href=\"https:\/\/codepen.io\/ZachSaucier\/pen\/gZzPgQ\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Animated Blob SVG Text Clipping by Zach Saucier<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: CSS @keyframes, SVG clipPath, a little JavaScript<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/blob-text-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/blob-text-svg-animations-examples-clip-poster.jpg\" aria-label=\"Colorful blobs forming the words We are Movers + Shakers through an SVG clip path\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/blob-text-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Colorful blobs forming the words We are Movers + Shakers through an SVG clip path\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Colorful blobs fill three lines of bold type, then scatter and regroup into the next phrase, cycling through lines such as \u201cWe are Movers +Shakers\u201d. The words are an SVG clipPath, so the moving blobs only show where there are letters.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One CSS keyframe, pulse, makes the blobs breathe, and a short script swaps the visible line and recolors every blob from three colors: orange, turquoise and navy. Change the words and the palette and it becomes a hero headline for an agency or product site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Text as a clipPath turns any moving shapes into moving letters.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-8-flippin-burgers-by-mikael-ainalem\">8. <a href=\"https:\/\/codepen.io\/ainalem\/pen\/LJYRxz\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Flippin&#8217; Burgers by Mikael Ainalem<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: CSS transitions, stroke-dashoffset<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/hamburgers-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/hamburgers-svg-animations-examples-clip-poster.jpg\" aria-label=\"Eight SVG hamburger menu icons morphing into close icons and arrows\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/hamburgers-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Eight SVG hamburger menu icons morphing into close icons and arrows\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Mikael Ainalem&#8217;s \u201cFlippin&#8217; burgers\u201d is a row of eight hamburger menu icons, each with its own way of turning into a close icon or an arrow when you click it; one of them spells out the word CLOSE.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each icon is three SVG paths with long, curved tails hidden by stroke-dasharray. A click toggles an active class through an inline onclick, and a 400 ms CSS transition on stroke-dasharray and stroke-dashoffset slides the visible part of each stroke along its path, so the lines seem to bend into the new shape.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Menu icons that morph with one class toggle and no animation library.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gsap-svg-animations\">GSAP SVG Animations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">GSAP handles timelines, staggers and morphing between different shapes, which is where CSS runs out. Its SVG plugins, MorphSVG and DrawSVG, were paid extras for years and are now free with the rest of GSAP.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-9-responsive-huggy-laser-panda-factory-by-sarah-drasner\">9. <a href=\"https:\/\/codepen.io\/sdras\/pen\/waXKPw\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Responsive Huggy Laser Panda Factory by Sarah Drasner<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: GSAP (TweenMax, TimelineMax), DrawSVG, jQuery<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/panda-factory-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/panda-factory-svg-animations-examples-clip-poster.jpg\" aria-label=\"SVG factory machine with spinning gears, gauges and smoke\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/panda-factory-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"SVG factory machine with spinning gears, gauges and smoke\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Sarah Drasner&#8217;s factory is a busy machine of gears, a windmill, gauges and puffing smoke, with a line at the top inviting you to \u201cClick the hotspots to make Huggy Laser Pandas\u201d. Narrow the browser window and the machine rearranges itself, which is the point of the demo: responsive SVG animation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The idle motion is a GSAP TimelineMax: the gears make a full turn every four seconds, the windmill every two, and the needles swing with an elastic ease, while DrawSVG draws the graph line on the monitor. It uses the older GSAP syntax with jQuery selectors, but the approach carries straight over to GSAP 3.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> A classic demo of SVG animation that adapts to screen size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-10-play-hard-by-chris-gannon\">10. <a href=\"https:\/\/codepen.io\/chrisgannon\/pen\/KONLar\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Play Hard by Chris Gannon<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: GSAP (TimelineMax), MorphSVG, CustomEase<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/play-hard-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/play-hard-svg-animations-examples-clip-poster.jpg\" aria-label=\"Rainbow SVG letters spelling PLAY HARD morphing shape\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/play-hard-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Rainbow SVG letters spelling PLAY HARD morphing shape\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Chris Gannon&#8217;s \u201cPlay Hard\u201d sets the two words in rounded, rainbow-colored letters that keep reshaping themselves: each letter morphs back and forth between two drawn versions, slightly out of step with its neighbors, so the words ripple.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every letter is a path tweened with MorphSVG on a repeating TimelineMax with yoyo, offset by 0.15 seconds per letter, and an ease built with CustomEase gives the motion its snap. The colors come from a five-color array in the script, so a new palette is one line away.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Letter-by-letter morphing with an offset gives type a playful bounce.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-11-i-play-with-code-by-chris-gannon\">11. <a href=\"https:\/\/codepen.io\/chrisgannon\/pen\/beooVj\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">I Play With Code by Chris Gannon<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: GSAP (TimelineMax), DrawSVG<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/play-with-code-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/play-with-code-svg-animations-examples-clip-poster.jpg\" aria-label=\"SVG words I PLAY WITH CODE placed by selection circles and a cursor\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/play-with-code-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"SVG words I PLAY WITH CODE placed by selection circles and a cursor\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Another Chris Gannon pen, \u201cI Play With Code\u201d looks like a design tool at work: dotted selection circles, crosshairs and a cursor move across a dark canvas while the words I PLAY, WITH and CODE are placed, turned and dragged into position.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It runs on one looping GSAP timeline played at double speed, with DrawSVG trimming the strokes of the selection shapes and SVG masks revealing the words. It is a good study in choreographing dozens of small elements to a single timeline.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Many tiny moves on one timeline, played back like a screen recording.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-12-9-x-9-circles-by-creativeocean\">12. <a href=\"https:\/\/codepen.io\/creativeocean\/pen\/Rwepojx\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">9 x 9 Circles by @creativeocean<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: GSAP 3, SVG feTurbulence filter<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/circles-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/circles-svg-animations-examples-clip-poster.jpg\" aria-label=\"Colored SVG circles spreading into a grid and gathering again\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/circles-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Colored SVG circles spreading into a grid and gathering again\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nine colored circles start stacked in the middle, then spread with an expo ease into a three-by-three grid, overlapping in blue, orange, green, yellow and pink, before gathering up again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is plain GSAP 3: gsap.fromTo moves each circle&#8217;s cx and cy attributes to its place in the grid, and a tiny repeating tween changes the seed of an feTurbulence filter every 0.2 seconds, which makes the drop shadows grain and shimmer like print.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> An animated SVG filter adds texture that CSS alone cannot.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-13-impossible-penrose-triangle-loader-by-indextwo\">13. <a href=\"https:\/\/codepen.io\/indextwo\/pen\/Rwpxbgw\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Impossible Penrose Triangle Loader by @indextwo<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: GSAP 3, SVG feGaussianBlur filter<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/penrose-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/penrose-svg-animations-examples-clip-poster.jpg\" aria-label=\"Neon Penrose triangle with a spinning ring loader\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/penrose-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Neon Penrose triangle with a spinning ring loader\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">An impossible Penrose triangle in cyan and magenta sits inside a ring that spins around it, making a loading indicator worth watching. A blurred copy behind it fades in and out, which gives the shape a soft neon glow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The motion is just two GSAP tweens: the ring group rotates a full turn every 1.5 seconds on a linear ease, and the glow layer fades to a quarter opacity and back every 3.5 seconds. The glow itself is an SVG feGaussianBlur filter, and a short jQuery loop reads data-origin attributes to set each transform origin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Two tweens and a blur filter make a loader look finished.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-14-simple-shapes-morph-by-jack-domleo\">14. <a href=\"https:\/\/codepen.io\/jackdomleo7\/pen\/abdbMwE\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Simple Shapes Morph by Jack Domleo<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: GSAP 3, MorphSVG<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/shape-morph-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/shape-morph-svg-animations-examples-clip-poster.jpg\" aria-label=\"Dark SVG shape morphing between a heart, square, pentagon and star\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/shape-morph-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Dark SVG shape morphing between a heart, square, pentagon and star\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Jack Domleo&#8217;s pen is the clearest introduction to shape morphing on this list: one dark shape turns into a heart, a triangle, a square, a pentagon, a star and a tick, then back into a circle, pausing for a second between each.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is a seven-step gsap.timeline that repeats forever, each step a single morphSVG tween pointing at another path in the same SVG. MorphSVG handles shapes with different numbers of points by itself, which is exactly what makes morphing by hand so difficult.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> The shortest route to understanding MorphSVG.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-15-morphing-play-pause-by-osmo\">15. <a href=\"https:\/\/codepen.io\/osmosupply\/pen\/yyyzMee\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Morphing Play\/Pause by Osmo<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: GSAP 3, MorphSVG, Physics2D<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/play-pause-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/play-pause-svg-animations-examples-clip-poster.jpg\" aria-label=\"SVG play icon morphing into pause bars with particles\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/play-pause-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"SVG play icon morphing into pause bars with particles\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Osmo&#8217;s play\/pause toggle morphs a rounded play triangle into two pause bars and back each time you click, and throws out a small spray of green and white particles as it changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The morph is a half-second MorphSVG tween with <code>type: \"rotational\"<\/code>, which rotates points into place instead of moving them in straight lines, so the icon seems to fold over. The particles use GSAP&#8217;s Physics2D plugin, and the button is found through data attributes, so the code drops into another project easily.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> A rotational morph makes a two-state icon feel physical.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-16-stormy-svg-animation-with-goo-liquid-by-issey\">16. <a href=\"https:\/\/codepen.io\/issey\/pen\/NvPgVp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Stormy SVG Animation With Goo Liquid by @issey<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: GSAP (TweenMax), CustomEase, SVG goo filter<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/stormy-goo-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/stormy-goo-svg-animations-examples-clip-poster.jpg\" aria-label=\"SVG sailors in a rocking boat with waves and splashing water\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/stormy-goo-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"SVG sailors in a rocking boat with waves and splashing water\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Two sailors ride out a storm in a small boat, seen through a half-dome window: waves roll, the boat rocks, the characters blink and frown, and water splashes over the edge. The pen notes that the illustration appeared in The Globe and Mail.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The water uses the classic SVG goo effect: an feGaussianBlur blurs the drops together and an feColorMatrix sharpens the edges again, so separate circles merge like liquid. TweenMax timelines with CustomEase drive the waves, the ship&#8217;s wheel, the boat and the faces.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> The goo filter turns plain circles into splashing water.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-17-add-to-cart-by-aaron-iker\">17. <a href=\"https:\/\/codepen.io\/aaroniker\/pen\/pogGgbx\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Add to Cart by Aaron Iker<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: GSAP 3, MorphSVG, CSS variables<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/add-to-cart-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/add-to-cart-svg-animations-examples-clip-poster.jpg\" aria-label=\"Add to cart buttons animating a T-shirt dropping into a cart\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/add-to-cart-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Add to cart buttons animating a T-shirt dropping into a cart\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Aaron Iker&#8217;s \u201cAdd to cart\u201d button turns a click into a tiny story: a T-shirt pops up and drops into a cart that appears inside the button, and the cart rolls away before the label returns. A light and a dark version sit side by side.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">GSAP animates CSS custom properties such as &#8211;shirt-y and &#8211;cart-x through its keyframes syntax, so the layout lives in CSS and the script only changes numbers, while MorphSVG reshapes part of the artwork as the shirt lands. An elastic ease on the button&#8217;s scale gives the press some bounce.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Micro-interaction feedback that tells the shopper the click worked.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-18-svg-brush-animation-by-sndrgb\">18. <a href=\"https:\/\/codepen.io\/sndrgb\/pen\/EperVd\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">SVG Brush Animation by @sndrgb<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: GSAP (TweenMax), stroke-dashoffset<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/brush-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/brush-svg-animations-examples-clip-poster.jpg\" aria-label=\"Black SVG brush stroke painting on and off\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/brush-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Black SVG brush stroke painting on and off\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A thick, dry-brush stroke paints itself across the screen, pauses, then un-paints in reverse, over and over. The rough, hand-made edge comes from an SVG mask and a blur filter around a single path.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The script is only a handful of lines: measure the path with getTotalLength(), set stroke-dasharray to that length, and tween stroke-dashoffset with TweenMax using an endless repeat, a two-second repeatDelay and yoyo, so it plays forward and back.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> The line-drawing technique in its simplest form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-smil-svg-animations\">SMIL SVG Animations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">SMIL puts the animation inside the SVG markup with elements like animate and animateTransform. It needs no CSS or JavaScript and keeps working when the SVG is loaded as an image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-19-pure-svg-loader-animation-by-nikhil-krishnan\">19. <a href=\"https:\/\/codepen.io\/nikhil8krishnan\/pen\/rVoXJa\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Pure SVG Loader Animation by Nikhil Krishnan<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: SMIL (animate, animateTransform), no CSS animation or JavaScript<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/smil-loaders-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/smil-loaders-svg-animations-examples-clip-poster.jpg\" aria-label=\"Ten SMIL-animated SVG loading icons on a red background\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/smil-loaders-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Ten SMIL-animated SVG loading icons on a red background\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nikhil Krishnan&#8217;s set of ten loading indicators on a red background includes a spinning gear, a clock with moving hands, bouncing dots, a filling bar, a turning square and more, and none of them uses CSS animation or JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every loader is animated with SMIL elements written into the SVG markup: 21 animateTransform tags for rotations and movement, and 9 animate tags for attributes. Because the animation lives inside the file, each loader keeps moving even when you use it as an img or a CSS background.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Self-contained animated SVGs you can drop in as images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-20-svg-smil-calcmode-comparison-by-amelia-bellamy-royds\">20. <a href=\"https:\/\/codepen.io\/AmeliaBR\/pen\/BaEjdP\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">SVG\/SMIL calcMode Comparison by Amelia Bellamy-Royds<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: SMIL (animate)<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/calcmode-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/calcmode-svg-animations-examples-clip-poster.jpg\" aria-label=\"Three SVG circles comparing linear, paced and discrete SMIL timing\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/calcmode-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Three SVG circles comparing linear, paced and discrete SMIL timing\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Amelia Bellamy-Royds built this as a teaching demo: three circles travel through the same five positions and colors over 20 seconds, labelled linear, paced and discrete, so you can watch how each calcMode spaces the same values.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Linear gives each value an equal slice of time, paced keeps the speed constant across uneven distances, and discrete jumps without tweening. Each circle has two animate elements, one for cx and one for fill, and clicking the SVG restarts them through <code>begin=\"0;graphics.click\"<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> SMIL timing modes explained with a live, side-by-side race.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-21-svg-smil-animation-by-willianjusten\">21. <a href=\"https:\/\/codepen.io\/willianjusten\/pen\/RPYxLd\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">SVG SMIL Animation by @willianjusten<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: SMIL (animate on the d attribute)<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/smil-morph-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/smil-morph-svg-animations-examples-clip-poster.jpg\" aria-label=\"Green SVG shape morphing between angular and round forms\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/smil-morph-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Green SVG shape morphing between angular and round forms\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A single green shape morphs between angular and round forms in an endless loop, and the whole thing is one path with one animate element in the SVG markup, with no CSS animation and no JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The animate element targets the path&#8217;s d attribute and lists several shapes in its values attribute. SMIL can interpolate between them because every path has the same number and type of commands, which is the rule to follow whenever you morph paths without a library.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Path morphing in a single line of markup.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-svg-animations-with-other-libraries\">SVG Animations With Other Libraries<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">anime.js, Vivus, mo.js and Lottie each take a different angle: general-purpose tweening, line drawing, click effects and playback of animations exported from After Effects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-22-halloween-svg-parallax-animation-by-uchardon\">22. <a href=\"https:\/\/codepen.io\/uchardon\/pen\/eGjJap\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Halloween SVG Parallax Animation by @uchardon<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: anime.js, CSS @keyframes, SMIL<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/halloween-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/halloween-svg-animations-examples-clip-poster.jpg\" aria-label=\"Animated SVG Halloween graveyard with a ghost, owl and pumpkins\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/halloween-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Animated SVG Halloween graveyard with a ghost, owl and pumpkins\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A spooky graveyard at dusk: a ghost drifts between twisted trees, an owl&#8217;s eyes glow, jack-o&#8217;-lanterns flicker and HAPPY HALLOWEEN appears in big green letters. Move the mouse and the whole scene tilts, which is the parallax in the pen&#8217;s title.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It mixes three techniques in one pen: an anime.js timeline for the sequence, nine CSS keyframes for the loops, and a SMIL animate on an feTurbulence baseFrequency that makes part of the scene waver. The tilt is a few lines of plain JavaScript setting rotate3d from the pointer position, with device-motion support for phones.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> CSS, SMIL and a JavaScript library working together in one scene.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-23-back2school-svg-animation-by-yasio\">23. <a href=\"https:\/\/codepen.io\/Yasio\/pen\/wEWyLE\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Back2School SVG Animation by @Yasio<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: anime.js<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/back-to-school-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/back-to-school-svg-animations-examples-clip-poster.jpg\" aria-label=\"SVG illustration of a stressed student at a desk with flying papers\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/back-to-school-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"SVG illustration of a stressed student at a desk with flying papers\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A frantic student scribbles at a desk piled with papers while a clock looms overhead, sweat drops fly off and papers flutter: a flat illustration that turns back-to-school panic into a loop.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It uses anime.js with a shared loop setting. Each group of particles (sweat, spit and debris, as the code names them) gets its own anime() call with staggered delays and random offsets from a small helper function, so the pieces scatter in different directions instead of moving in lockstep.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Randomized offsets keep a busy loop from looking mechanical.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-24-vivus-js-svg-animation-by-dedevillela\">24. <a href=\"https:\/\/codepen.io\/dedevillela\/pen\/PgEOWg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Vivus.js SVG Animation by @dedevillela<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: Vivus<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/vivus-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/vivus-svg-animations-examples-clip-poster.jpg\" aria-label=\"The word Hi drawing itself in outline with Vivus\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/vivus-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"The word Hi drawing itself in outline with Vivus\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This demo draws the word Hi in outlined letters, followed by a handwritten there, and then lets you replay the drawing with Vivus&#8217;s different animation types from buttons below it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vivus is a small, dependency-free library that does one job: it animates stroke-dashoffset on every path so the SVG looks hand-drawn. Here it runs with <code>type: 'delayed'<\/code> and a duration of 150 frames, and the pen adds a custom easeOutBounce function for the timing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Line drawing without writing the dash maths yourself.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-25-playing-with-mo-js-burst-by-sarah-drasner\">25. <a href=\"https:\/\/codepen.io\/sdras\/pen\/ZpPzYd\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Playing With mo.js Burst by Sarah Drasner<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: mo.js<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/mojs-burst-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/mojs-burst-svg-animations-examples-clip-poster.jpg\" aria-label=\"mo.js burst of polygons and a ring expanding on a blue background\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/mojs-burst-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"mo.js burst of polygons and a ring expanding on a blue background\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click anywhere in Sarah Drasner&#8217;s pen and a burst goes off at the pointer: a ring of spinning polygons fades from red to yellow while an orange circle expands and thins out, along with a custom whirl shape.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is built with mo.js, a motion graphics library for the web: a mojs.Burst with 12 polygon children, a mojs.Shape for the ring with an elastic scale, a custom shape class and an easing curve defined as an SVG path. mo.js renders all of it as SVG, so it stays sharp at any size.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> Click effects with real motion-design easing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-26-lottie-animation-with-audio-layers-by-airnan\">26. <a href=\"https:\/\/codepen.io\/airnan\/pen\/gOrwBqm\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lottie Animation With Audio Layers by @airnan<\/a><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Built with<\/strong>: Lottie (lottie-web, SVG renderer)<\/p>\n\n\n\n<figure class=\"wp-block-video cl-clip-figure\"><video class=\"cl-clip\" width=\"800\" height=\"522\" style=\"--cl-ar:800\/522\" muted loop playsinline preload=\"none\" data-src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/lottie-audio-svg-animations-examples-clip.mp4\" data-poster=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/lottie-audio-svg-animations-examples-clip-poster.jpg\" aria-label=\"Lottie SVG animation with cut-out title letters and line-drawn characters\"><\/video><noscript><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/lottie-audio-svg-animations-examples-clip-poster.jpg\" width=\"800\" height=\"522\" alt=\"Lottie SVG animation with cut-out title letters and line-drawn characters\" loading=\"lazy\"\/><\/noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Press Start and an illustrated short plays: a title spells itself out in cut-out letters, then line-drawn characters appear, all with a soundtrack. Sliders under the animation change the playback speed and the volume while it runs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is an After Effects animation exported with the Bodymovin plugin and played by lottie-web with the SVG renderer, so the characters are real vector shapes in the page. The pen shows the parts of the player API you would use in a product: play and pause on click, setSpeed, setVolume and a complete event that resets the scene.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What stands out:<\/strong> After Effects motion, played back as SVG, with sound.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-choose-an-svg-animation-technique\">How to Choose an SVG Animation Technique<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Use CSS for loops and simple state changes.<\/strong> Keyframes and transitions cover drawing strokes, pulsing, swinging and toggles, as the wolf, beating heart and hamburger pens show, with no library to load. Stick to transform and opacity where you can, because browsers animate those smoothly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Reach for GSAP when the timing gets complicated.<\/strong> Timelines, staggers, morphing between different shapes and animating attributes or CSS variables are where GSAP earns its place, as in Chris Gannon&#8217;s and Aaron Iker&#8217;s pens. It also smooths over browser differences in how SVG transforms behave.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Use SMIL for self-contained files.<\/strong> If an animated icon or loader has to work as an img or a CSS background, SMIL is the only option that travels inside the file, as Nikhil Krishnan&#8217;s loaders do. It is supported in all modern browsers, but it cannot react to scrolling or to the state of your app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Use Lottie for designer-made motion.<\/strong> When the animation comes from After Effects, export it with Bodymovin and play it with lottie-web instead of rebuilding it by hand. Keep an eye on the JSON file size, because long scenes get heavy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Draw lines with stroke-dashoffset.<\/strong> Most drawing effects, from the heart&#8217;s outline to the brush stroke and Vivus, are the same trick: set stroke-dasharray to the path length and animate stroke-dashoffset to zero. In JavaScript, getTotalLength() gives you the length.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Respect reduced motion.<\/strong> Wrap loops in a prefers-reduced-motion media query, or check the setting in JavaScript before starting a timeline, so visitors who turn motion off get a still image. Decorative loops such as loaders can simply stop.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Optimize the SVG first.<\/strong> Run exported files through an optimizer such as SVGO, but keep the IDs and classes your animation targets. Inline the SVG in the page whenever CSS or JavaScript needs to reach inside it, because neither can style an SVG loaded as an image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">Frequently Asked Questions<\/h2>\n\n\n\n<style>\n.faq-accordion{margin:28px 0 36px}\n.faq-accordion details{background:#fff;border:1px solid #e6e9ec;border-radius:10px;margin-bottom:12px;transition:box-shadow .18s ease,border-color .18s ease;overflow:hidden}\n.faq-accordion details:hover{border-color:#cfd6dc;box-shadow:0 4px 14px rgba(15,23,42,.05)}\n.faq-accordion details[open]{border-color:#cfd6dc;box-shadow:0 6px 20px rgba(15,23,42,.06)}\n.faq-accordion summary{cursor:pointer;padding:18px 56px 18px 22px;font-weight:600;font-size:1.02rem;line-height:1.45;position:relative;list-style:none;color:#0f172a;transition:color .15s ease}\n.faq-accordion summary::-webkit-details-marker{display:none}\n.faq-accordion summary::marker{display:none}\n.faq-accordion summary::after{content:\"\";position:absolute;right:22px;top:50%;width:14px;height:14px;border-right:2px solid #64748b;border-bottom:2px solid #64748b;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease,border-color .15s ease}\n.faq-accordion details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:#2563eb}\n.faq-accordion summary:hover{color:#2563eb}\n.faq-accordion summary:focus-visible{outline:2px solid #2563eb;outline-offset:-2px;border-radius:8px}\n.faq-accordion details>*:not(summary){padding:0 22px 18px 22px;margin-top:0}\n.faq-accordion details>p,.faq-accordion details>div{padding:14px 22px 18px 22px;border-top:1px solid #f1f5f9;margin:0;line-height:1.65;color:#475569}\n.faq-accordion details code{background:#f1f5f9;padding:2px 7px;border-radius:4px;font-size:.9em;color:#be185d;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}\n.faq-accordion details a{color:#2563eb;text-decoration:underline;text-underline-offset:2px}\n<\/style>\n\n\n\n<div class=\"faq-accordion\">\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" open><summary>What is SVG animation?<\/summary>\n<p class=\"wp-block-paragraph\">SVG animation changes the shapes, strokes, colors or positions inside a scalable vector graphic over time. Because SVG is code, you can animate it with CSS, with JavaScript libraries like GSAP and anime.js, or with SMIL elements written into the file. The result stays sharp at any screen size and is usually far lighter than a GIF or a video.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Should I use CSS or JavaScript to animate SVG?<\/summary>\n<p class=\"wp-block-paragraph\">Use CSS for simple loops, hovers and toggles; it needs no library and runs smoothly for transform and opacity. Use JavaScript, usually GSAP, when you need sequenced timelines, morphing between different shapes, physics, or animation that reacts to scrolling and app state. Many projects use both: CSS for small interface details and GSAP for the main animation.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Is SMIL animation deprecated?<\/summary>\n<p class=\"wp-block-paragraph\">No. Chrome once announced plans to deprecate SMIL but withdrew them, and SMIL works in all current major browsers. It remains the only way to animate an SVG that is loaded as an image, since CSS and scripts cannot reach inside it. It is less flexible than GSAP for long sequences or anything that responds to user input.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do I make an SVG look like it is drawing itself?<\/summary>\n<p class=\"wp-block-paragraph\">Give the path a stroke, set stroke-dasharray to the path&#8217;s total length and animate stroke-dashoffset from that length down to zero. In CSS you can hard-code the length; in JavaScript, getTotalLength() measures it for you. Vivus and GSAP&#8217;s DrawSVG plugin wrap the same technique and handle many paths and their timing at once.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Is GSAP free for SVG animation?<\/summary>\n<p class=\"wp-block-paragraph\">Yes. GSAP, including the MorphSVG and DrawSVG plugins that used to be paid extras, is now free to use, including in commercial projects. Several pens on this list load those plugins directly. Check the licence on the GSAP website for the current terms before you ship a project that depends on it.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>What is the best tool to create SVG animations?<\/summary>\n<p class=\"wp-block-paragraph\">For hand-coded work, a code editor plus CSS or GSAP is enough, and CodePen is the quickest place to experiment. Designers who prefer a timeline often animate in After Effects and export Lottie files with Bodymovin, or use a dedicated SVG animation editor such as SVGator, which exports CSS or JavaScript animations.<\/p>\n<\/details>\n\n\n\n<\/div>\n\n\n\n<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What is SVG animation?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"SVG animation changes the shapes, strokes, colors or positions inside a scalable vector graphic over time. Because SVG is code, you can animate it with CSS, with JavaScript libraries like GSAP and anime.js, or with SMIL elements written into the file. The result stays sharp at any screen size and is usually far lighter than a GIF or a video.\"}},{\"@type\":\"Question\",\"name\":\"Should I use CSS or JavaScript to animate SVG?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Use CSS for simple loops, hovers and toggles; it needs no library and runs smoothly for transform and opacity. Use JavaScript, usually GSAP, when you need sequenced timelines, morphing between different shapes, physics, or animation that reacts to scrolling and app state. Many projects use both: CSS for small interface details and GSAP for the main animation.\"}},{\"@type\":\"Question\",\"name\":\"Is SMIL animation deprecated?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"No. Chrome once announced plans to deprecate SMIL but withdrew them, and SMIL works in all current major browsers. It remains the only way to animate an SVG that is loaded as an image, since CSS and scripts cannot reach inside it. It is less flexible than GSAP for long sequences or anything that responds to user input.\"}},{\"@type\":\"Question\",\"name\":\"How do I make an SVG look like it is drawing itself?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Give the path a stroke, set stroke-dasharray to the path's total length and animate stroke-dashoffset from that length down to zero. In CSS you can hard-code the length; in JavaScript, getTotalLength() measures it for you. Vivus and GSAP's DrawSVG plugin wrap the same technique and handle many paths and their timing at once.\"}},{\"@type\":\"Question\",\"name\":\"Is GSAP free for SVG animation?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. GSAP, including the MorphSVG and DrawSVG plugins that used to be paid extras, is now free to use, including in commercial projects. Several pens on this list load those plugins directly. Check the licence on the GSAP website for the current terms before you ship a project that depends on it.\"}},{\"@type\":\"Question\",\"name\":\"What is the best tool to create SVG animations?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"For hand-coded work, a code editor plus CSS or GSAP is enough, and CodePen is the quickest place to experiment. Designers who prefer a timeline often animate in After Effects and export Lottie files with Bodymovin, or use a dedicated SVG animation editor such as SVGator, which exports CSS or JavaScript animations.\"}}]}<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-wrapping-up\">Wrapping Up<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For motion on complete websites, see our <a href=\"https:\/\/colorlib.com\/wp\/animation-websites\/\">animated website examples<\/a> and <a href=\"https:\/\/colorlib.com\/wp\/parallax-scrolling-websites\/\">parallax scrolling websites<\/a>, and for the people who make it, our <a href=\"https:\/\/colorlib.com\/wp\/motion-design-portfolios\/\">motion design portfolios<\/a>. If you are putting these techniques to work, our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-hamburger-menu\/\">Bootstrap hamburger menu examples<\/a> and <a href=\"https:\/\/colorlib.com\/wp\/free-404-error-page-templates\/\">404 page templates<\/a> are good places to start.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>The best SVG animations are small, sharp and cheap to load: a menu icon that morphs, a loader that never pixelates, a whole illustrated scene in a few kilobytes of markup. These 26 are live CodePen demos you can open, read and fork, grouped by technique: CSS, GSAP, SMIL and other JavaScript libraries. For animation&hellip;<\/p>\n","protected":false},"author":9742,"featured_media":327167,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2682],"tags":[],"post_series":[],"example_family":[],"class_list":["type-post","status-publish","hentry","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>26 Best SVG Animation Examples (With Code &amp; Live Demos) - Colorlib<\/title>\n<meta name=\"description\" content=\"SVG animation examples built with CSS, GSAP, SMIL, anime.js, Vivus, mo.js and Lottie, each with a live CodePen demo and a note on how it works.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colorlib.com\/wp\/svg-animations-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"26 Best SVG Animation Examples (With Code &amp; Live Demos) - Colorlib\" \/>\n<meta property=\"og:description\" content=\"SVG animation examples built with CSS, GSAP, SMIL, anime.js, Vivus, mo.js and Lottie, each with a live CodePen demo and a note on how it works.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colorlib.com\/wp\/svg-animations-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Colorlib\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/colorlib\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-01T06:06:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-01T06:11:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/svg-animation-examples.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"599\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alex Ivanovs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@colorlib\" \/>\n<meta name=\"twitter:site\" content=\"@colorlib\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alex Ivanovs\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/\"},\"author\":{\"name\":\"Alex Ivanovs\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/person\\\/957674b3bcb163e5eaa51520dcae0a85\"},\"headline\":\"26 Best SVG Animation Examples (With Code &#038; Live Demos)\",\"datePublished\":\"2026-10-01T06:06:15+00:00\",\"dateModified\":\"2026-10-01T06:11:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/\"},\"wordCount\":3955,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/svg-animation-examples.jpeg\",\"articleSection\":[\"Tools\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/\",\"name\":\"26 Best SVG Animation Examples (With Code & Live Demos) - Colorlib\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/svg-animation-examples.jpeg\",\"datePublished\":\"2026-10-01T06:06:15+00:00\",\"dateModified\":\"2026-10-01T06:11:16+00:00\",\"description\":\"SVG animation examples built with CSS, GSAP, SMIL, anime.js, Vivus, mo.js and Lottie, each with a live CodePen demo and a note on how it works.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/#primaryimage\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/svg-animation-examples.jpeg\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/svg-animation-examples.jpeg\",\"width\":1200,\"height\":599,\"caption\":\"svg animation examples\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/svg-animations-examples\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tools\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/category\\\/tools\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"26 Best SVG Animation Examples (With Code &#038; Live Demos)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"name\":\"Colorlib\",\"description\":\"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.\",\"publisher\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\",\"name\":\"Colorlib\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"width\":800,\"height\":400,\"caption\":\"Colorlib\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/colorlib\",\"https:\\\/\\\/x.com\\\/colorlib\",\"https:\\\/\\\/www.instagram.com\\\/colorlib\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/colorlib\",\"https:\\\/\\\/youtube.com\\\/c\\\/Colorlib\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/person\\\/957674b3bcb163e5eaa51520dcae0a85\",\"name\":\"Alex Ivanovs\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/76b111ccc4bfe0d15610cc29db8f7290adf8b0be1b5cffc1ec0a4c75677c6cc2?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/76b111ccc4bfe0d15610cc29db8f7290adf8b0be1b5cffc1ec0a4c75677c6cc2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/76b111ccc4bfe0d15610cc29db8f7290adf8b0be1b5cffc1ec0a4c75677c6cc2?s=96&d=mm&r=g\",\"caption\":\"Alex Ivanovs\"},\"description\":\"Alex is a freelance writer with more than 10 years of experience in design, development, and small business. His work has been featured in publications like Entrepreneur, Huffington Post, TheNextWeb, and others. You can find his personal writing at The Divine Indigo.\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/author\\\/alexivanovs\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"26 Best SVG Animation Examples (With Code & Live Demos) - Colorlib","description":"SVG animation examples built with CSS, GSAP, SMIL, anime.js, Vivus, mo.js and Lottie, each with a live CodePen demo and a note on how it works.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/","og_locale":"en_US","og_type":"article","og_title":"26 Best SVG Animation Examples (With Code & Live Demos) - Colorlib","og_description":"SVG animation examples built with CSS, GSAP, SMIL, anime.js, Vivus, mo.js and Lottie, each with a live CodePen demo and a note on how it works.","og_url":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/","og_site_name":"Colorlib","article_publisher":"https:\/\/www.facebook.com\/colorlib","article_published_time":"2026-10-01T06:06:15+00:00","article_modified_time":"2026-10-01T06:11:16+00:00","og_image":[{"width":1200,"height":599,"url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/svg-animation-examples.jpeg","type":"image\/jpeg"}],"author":"Alex Ivanovs","twitter_card":"summary_large_image","twitter_creator":"@colorlib","twitter_site":"@colorlib","twitter_misc":{"Written by":"Alex Ivanovs","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/#article","isPartOf":{"@id":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/"},"author":{"name":"Alex Ivanovs","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/person\/957674b3bcb163e5eaa51520dcae0a85"},"headline":"26 Best SVG Animation Examples (With Code &#038; Live Demos)","datePublished":"2026-10-01T06:06:15+00:00","dateModified":"2026-10-01T06:11:16+00:00","mainEntityOfPage":{"@id":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/"},"wordCount":3955,"commentCount":5,"publisher":{"@id":"https:\/\/colorlib.com\/wp\/#organization"},"image":{"@id":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/svg-animation-examples.jpeg","articleSection":["Tools"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/colorlib.com\/wp\/svg-animations-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/","url":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/","name":"26 Best SVG Animation Examples (With Code & Live Demos) - Colorlib","isPartOf":{"@id":"https:\/\/colorlib.com\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/#primaryimage"},"image":{"@id":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/svg-animation-examples.jpeg","datePublished":"2026-10-01T06:06:15+00:00","dateModified":"2026-10-01T06:11:16+00:00","description":"SVG animation examples built with CSS, GSAP, SMIL, anime.js, Vivus, mo.js and Lottie, each with a live CodePen demo and a note on how it works.","breadcrumb":{"@id":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colorlib.com\/wp\/svg-animations-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/#primaryimage","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/svg-animation-examples.jpeg","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/svg-animation-examples.jpeg","width":1200,"height":599,"caption":"svg animation examples"},{"@type":"BreadcrumbList","@id":"https:\/\/colorlib.com\/wp\/svg-animations-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colorlib.com\/wp\/"},{"@type":"ListItem","position":2,"name":"Tools","item":"https:\/\/colorlib.com\/wp\/category\/tools\/"},{"@type":"ListItem","position":3,"name":"26 Best SVG Animation Examples (With Code &#038; Live Demos)"}]},{"@type":"WebSite","@id":"https:\/\/colorlib.com\/wp\/#website","url":"https:\/\/colorlib.com\/wp\/","name":"Colorlib","description":"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.","publisher":{"@id":"https:\/\/colorlib.com\/wp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colorlib.com\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/colorlib.com\/wp\/#organization","name":"Colorlib","url":"https:\/\/colorlib.com\/wp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","width":800,"height":400,"caption":"Colorlib"},"image":{"@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/colorlib","https:\/\/x.com\/colorlib","https:\/\/www.instagram.com\/colorlib\/","https:\/\/www.linkedin.com\/company\/colorlib","https:\/\/youtube.com\/c\/Colorlib"]},{"@type":"Person","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/person\/957674b3bcb163e5eaa51520dcae0a85","name":"Alex Ivanovs","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/76b111ccc4bfe0d15610cc29db8f7290adf8b0be1b5cffc1ec0a4c75677c6cc2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/76b111ccc4bfe0d15610cc29db8f7290adf8b0be1b5cffc1ec0a4c75677c6cc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/76b111ccc4bfe0d15610cc29db8f7290adf8b0be1b5cffc1ec0a4c75677c6cc2?s=96&d=mm&r=g","caption":"Alex Ivanovs"},"description":"Alex is a freelance writer with more than 10 years of experience in design, development, and small business. His work has been featured in publications like Entrepreneur, Huffington Post, TheNextWeb, and others. You can find his personal writing at The Divine Indigo.","url":"https:\/\/colorlib.com\/wp\/author\/alexivanovs\/"}]}},"_links":{"self":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/46822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/users\/9742"}],"replies":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/comments?post=46822"}],"version-history":[{"count":5,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/46822\/revisions"}],"predecessor-version":[{"id":384489,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/46822\/revisions\/384489"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media\/327167"}],"wp:attachment":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media?parent=46822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/categories?post=46822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/tags?post=46822"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/post_series?post=46822"},{"taxonomy":"example_family","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/example_family?post=46822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}