A line chart that reveals itself as your cursor sweeps across it.
Most chart interactions show tooltips or highlight data points. This one uses a clip-path wipe that follows your cursor, revealing the chart as you sweep across it. The spring retraction when the cursor leaves gives it a physical, elastic feel.
Start with a static SVG line chart using <polyline> and a gradient fill area underneath. No interactivity, just the visual.
Loading...
Track the mouse X position over the chart and map it to a percentage. A vertical indicator line shows where the cursor is.
Pointer X: 50%
Loading...
useTransform maps the pointer percentage to a clipPath: inset(...) value. The chart is revealed left-to-right as the cursor sweeps across. This is the core technique: a spring-driven clip-path that follows the pointer.
Loading...
When the cursor leaves the chart area, it waits 1 second, then springs back to 100% (fully revealed). The spring makes the retraction feel like the chart is elastic rather than snapping shut.
Loading...
Tune the spring physics for the clip-path response.
Loading...