Trend

The trend path draws left to right while a marker rides the tip, the area beneath fills behind it, and gridlines fade in underneath.

dataviz / data-line-chart

Playback

Complexity

Intermediate

Interaction

Autoplay, Scroll

Stack

SVG, Framer Motion

Related motions

The ring draws in one stroke, the check follows, and a thin halo expands and fades as feedback.

A bright segment runs the perimeter as a stroke-dash offset, leaving a short fading tail. On hover it accelerates and the fill lifts a step.

A number eases to its target on a decelerating curve with digit-roll on the changing places and a brief flash at completion.