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
Consider donating.
I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!
It’s work only on Chrome 🙁 (not Firefox)