Kitty is designed as an SVG icon, animated in CSS, and activated on hover.
Kitty is designed as an SVG icon, animated in CSS, and actived on hover.

Two super-CSS animation properties for line SVGs: stroke-dasharray & stroke-dashoffset

Try these animation codes in your HTML and CSS

Eva Schicker
4 min readMar 8, 2022

--

SVG animations can give your screen design a playful touch of the unexpected. Experimenting with CSS properties of an SVG outline can produce beautiful results.

--

--

Eva Schicker

Hello. I write about UX, UI, AI, animation, tech, fiction & art through the eyes of a designer & painter. I live in NYC. Book author, UX Grad GA NYC.