In the previous article, we explored what SVG is, how it differs from raster graphics, and why SVG animations are useful when building modern user interfaces. In this article, let's get practical. I'l
Markdown supported · ⌘↵ to post
Good point! I hadn’t considered adding a reduced motion version to the examples. It’s important to make sure the SVG still looks right when animations are disabled, especially for users who prefer less motion. Thanks for pointing this out!
Reading this level of discussion about prefers-reduced-motion and SVG strokes makes me realize how much l still have to learn.😂 Just a newbie passing by to pay respects!🙌
Heads-up for anyone grabbing icons to try the draw effect: it only works on stroked paths. Lucide, Tabler and the Heroicons outline set ship as strokes, so pathLength plus dashoffset works on them as-is. Remix's line icons look like outlines, but they're filled shapes, so nothing draws.
Worth wrapping the keyframes in prefers-reduced-motion too. An infinite alternate pulse is exactly what that setting exists for.
Crownforge
Free-to-play browser fantasy strategy & city-builder | Heroes, dragons and alliances | Closed beta soon
I would add a reduced motion version of the examples too. The drawing effect should still show the finished path when animation is turned off, otherwise the icon could just disappear.