Creating an animated SVG component in React
From 2020 to 2023, I developed dashboards and mapping tools for a warehouse automation system using TypeScript, React and SVG.
Our wall-mounted dashboards displayed data that changed by small amounts every 20 or 30 seconds. These transitions could go completely unnoticed to the casual observer.
I developed various visual effects to call attention to changes in state. For example, I used CSS and some basic math to animate the dial inside the
Gauge component, as shown in the following example:
The effect is both visually pleasing and useful: it's a small cue to the user that something is changing.
The text itself also “rolls” to the next value, like a car odometer.
Gauge component, made with React and SVG, is a collection of
<line> nodes. The dial itself receives a rotational transform of between 0 and 180 degrees, corresponding to 0% and 100%, respectively:
Whenever the component receives a new
value, it recalculates
degrees and updates the SVG node containing the transform. Then CSS takes over by applying a transition to it:
The transition uses a custom easing function to produce a recoil or “bounce” effect.
I created a subtle, playful effect without needing an animation library or charting package. It's fast and lightweight!