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: