Line Chart Draw

Create a line chart that draws itself. An SVG polyline through 6 data points on a card, with dashed horizontal grid lines (1px, 3-5 dash pattern) behind it. The line (2.5px stroke, accent color, round caps and joins) draws from left to right over 1.6s using the stroke-dasharray / stroke-dashoffset technique (or animate pathLength if using Framer Motion), easing cubic-bezier(0.22, 1, 0.36, 1), after a 0.2s delay. Each data point is a small circle (3.5px radius, paper fill, 2px accent stroke) that pops in with a spring (from scale 0, stiffness 480, damping 24) timed to when the line reaches it: delay each dot by its fractional position along the line times the draw duration. Add a small header row with the metric name in monospace and the change (+32%) in the accent color. Accessibility: give the SVG role="img" and a descriptive aria-label (e.g. "Line chart, revenue trending up 32 percent"). If prefers-reduced-motion is set, render the finished chart with no draw animation. Trigger the draw when the chart scrolls into view. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.