Changing SVG path data with CSS

Another thing I learned at CSS Day is that it’s possible to alter SVG path data – which is to be found in its d attribute – using CSS.

As Chris Coyier demoed, one can overwrite the SVG’s path in CSS by using the (underdocumented) d property. As long as the paths match up (i.e. same type, same amount of points, etc.) you can even sprinkle a transition property on top to get a smooth transition:

<svg viewBox="0 0 10 10">
  <path d="M5,2 Q 2,5 5,8" />
</svg>
svg path {
  transition: d 0.35s;
}

svg:hover path {
  d: path("M5,2 Q 8,5 5,8");
}

Here’s a working demo:

To animate more complex paths CSS won’t do unfortunately. For those you’ll need something like Greensock’s MorphSVG or the aformentioned flubber.

☝️ Looking for more demos and/or an in-depth look into path data? CSS Tricks has got you covered: The SVG `path` Syntax: An Illustrated Guide

🔥 Like what you see? Want to stay in the loop? Here's how:

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

4 Comments

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.