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

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.

The stroke-dasharray and stroke-dashoffset properties require some trial and error, once the right input values, speed and other properties, such as transparency or fill, or set, the outcome and effect are delightful!

We’ll use the following html build example to build the animating Kitty line drawing.

<div class="kitty"
<svg ... >
<path .../>
<circle .../>
<circle .../>
</svg>
</div>

See the full HTML set-up code in CodePen:

What is the concept of a stroke-dash anyway?

What is a stroke-dasharray?

The stroke-dasharray attribute is a presentation attribute defining the pattern of…