Creating an animated SVG component in React

Background

From 2020 to 2023, I developed dashboards and mapping tools for a warehouse automation system using TypeScript, React and SVG.

Problem

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.

Solution

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.

The code

The Gauge component, made with React and SVG, is a collection of <circle> and <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.

Conclusion

I created a subtle, playful effect without needing an animation library or charting package. It's fast and lightweight!