Changing SVG path data with CSS

Another great thing I learnt 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 at the paths match up (e.g. 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.