Senior UI Engineer @ Velaris.io
working on the front end to build fantastic user interfaces and deliver a top notch user experience.
Markdown supported · ⌘↵ to post
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
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.