selector · strokeColorAnimated charts usually mean pulling in a charting library, or hand-rolling a requestAnimationFrame loop that fights the scroll position. Neither is necessary when the chart is already an SVG path. This example sequences two draws — the axes settle first, then the revenue line traces across them and shifts from grey to brand pink as it goes, using strokeColor interpolation rather than a CSS transition.
Monthly revenue line draws itself across the chart axes on scroll — axes animate first, then the data line traces in with a color shift from grey to brand pink.
<ScrollDraw
easing="ease-in-out" speed={0.85} once
selector=".ink"
strokeColor={['#e2e8f0', '#ff90e8']}
>
<svg>
{/* Static: grid, labels, data points, area */}
{/* .ink elements animate: axes + data line */}
<line className="ink" {/* y-axis */} />
<line className="ink" {/* x-axis */} />
<path className="ink" d="M 55 138 C…" {/* data line */} />
</svg>
</ScrollDraw>npm i svg-scroll-draw
MIT licensed, zero runtime dependencies. Every API is a separate entry point, so you only ship what you import. Full API reference →
Logo reveal on scroll
Draw an SVG logo stroke-by-stroke as the user scrolls, then flood it with brand colour on completion. Copy-paste React code, ~10 KB, no GSAP.
Number counter on scroll
Count numbers up from zero as they scroll into view, with custom formatting for currency, percentages or compact notation. 1 KB, no dependencies.