Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
SMIL

5 Articles
{
,

}
Direct link to the article Fire SVG animations (SMIL) when the SVG is visible
IntersectionObserver SMIL

Fire SVG animations (SMIL) when the SVG is visible

When requirements read “when visible” your brain should go straight to IntersectionObserver. That’s exactly what Zach is doing here to kick off an animation when it scrolls into view.

Except this animation is an SVG SMIL animation: an <animate>…

Chris Coyier on Sep 7, 2021
Direct link to the article How I Made a Generator for SVG Loaders With Sass and SMIL Options
generator loader Sass SMIL SVG

How I Made a Generator for SVG Loaders With Sass and SMIL Options

While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one of those tools: a generator that makes SVG loaders and …

Mariana Beldi on Aug 26, 2021
Direct link to the article SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features
GreenSock GSAP offset-path SMIL SMIL features SMIL replacement

SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features

This post was written after Chrome published an intent to deprecate SMIL in 2015. Fast-forward to 2023, and it appears that it never actually happened. Not only that, but we have seen Microsoft’s Edge browser merge with Chromium, …

Sarah Drasner on Mar 28, 2025
Direct link to the article 23: Animating SVG with SMIL
animation shape morphing SMIL SVG animation

23: Animating SVG with SMIL

Even though animating SVG with CSS might be more comfortable for the average front-end person, SVG has another way do animation built right into the SVG syntax itself. This is exactly what we cover in brief in this video, but …

Chris Coyier on Sep 4, 2018
Direct link to the article A Guide to SVG Animations (SMIL)
animation shape morphing SMIL SVG

A Guide to SVG Animations (SMIL)

The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and …

Sara Soueidan on Mar 28, 2025

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top