React: SVG Stroke Animation with CSS Explained

And creating a CSS menu toggle transition with styled components

Stroke animation is an under-used utility in modern app design, whereby SVG strokes can be animated as though as they are being drawn in and drawn out. This article will recap exactly how this is achieved, before diving deeper into a viable use case.

This is a continuation of my SVGs in React article, covering standard ways of importing and using SVGs in React, and showcased an example of how SVGs can be animated.

Stroke Animation Recap

Stroke animation is achieved by manipulating strokes, that exist along SVG paths, primarily using two CSS properties: stroke-dasharray and stroke-dashoffset. If we examine these properties closer, it may not be inherently obvious that they can be leveraged for animation purposes.

Let's first examine stroke-dashoffset, that defines where the stroke of a path will start rendering. Some valid values could be 5px, 2em, 2.5rem, 50%, etc. The difference between a path and the stroke can be hard to visualise, as by default the stroke sits on top of the path.

Take this straight line, that is composed of both a path and a stroke:

The path will represent the coordinates of what is being drawn, whereas the stroke acts the paint that is placed on top of that path.

Now let’s set a stroke-dashoffset value of 10px and see what happens to the line:

As you can see — kind of — the stroke is now being rendered 10px into its path. However, as the stroke repeatedly loops itself, we won’t notice any difference with its display. Once a stroke overflows a path, it is hidden — a stroke can not extend or shorten the path in any way.

If your stroke colour is a gradient, then you could indeed plug in a keyframe animation at this point, that would give an…