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.

☝️ 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

Elsewhere , ,

2 Responses to Changing SVG path data with CSS

  1. Pingback: Aspect Ratios in CSS are a Hack | Bram.us

  2. Pingback: Morphing Page Transition | Bram.us

Leave a Reply

Your email address will not be published. Required fields are marked *