I needed a trend sparkline in the last column of a dense metrics table, one row per service. Every generated version either drew axes (pointless at that size) or normalized each row independently so a flat line and a spiking line looked identical.
The insight was to hand the model a shared y-domain rule and a strict pixel budget, and to ban axes and labels entirely. The last-point dot plus a min/max tick turned out to be the only decoration that survives at 20px.
Posting the prompt in case it's useful, no question really, just sharing what finally read cleanly.
Generate a reusable SVG sparkline function `sparkline(values, opts)` returning an inline <svg> string. Constraints:
- Target size 96x20 px, no fixed width attribute on the root beyond the viewBox so it scales in a table cell.
- One <path> for the line (1.25px, currentColor), no fill unless opts.area is true (then a 12%-opacity fill of the same color).
- NO axes, NO gridlines, NO text labels.
- Decoration budget: exactly one 2px dot at the last point, and a 1px tick at the global min and max.
- Y-domain: accept opts.domain to share a scale across rows; if absent, use the per-series [min,max] but expand by 5% so a flat series still shows a hairline, not a dead-center line.
- Handle nulls by breaking the path (no interpolation across gaps).
- Deterministic output: no randomness, no dependency on window.
Return the function plus a 3-row usage example showing a shared domain across rows.