Performance Curves
Two SVG curves diverging over six quarters, teams on Acme rising while the status quo stays flat.
Two SVG curves diverging over six quarters, teams on Acme rising while the status quo stays flat.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
Performance Curves is a comparison drawn as a chart instead of a table. A heading, supporting paragraph, and a CTA sit beside a bordered panel where two SVG lines run across six labeled quarters: a primary curve for teams on Acme rising as it compounds, and a muted line for the status quo running flat with a slight droop. The rising curve ends in a highlighted dot with the result printed beside it, and a caption explains how the data is indexed.
Both curves are plain points strings, the quarter labels are a small array, and the end label is one string, so adjusting the story takes a few minutes of coordinate editing and no charting library. The muted versus primary palette carries the contrast in both themes without red and green.
Reach for this block when your advantage grows with time rather than appearing on day one. It makes a compounding argument that before-after cannot, since before and after implies a single jump, and it stays more visual than dimension-rows. Use grouped-bar-comparison instead when your wins are discrete metrics, or switch-banner when you just need a light nudge between sections.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is pipeline compounding against a flat status quo. Other diverging pairs:
Tip: let the curves share a starting point, divergence from a common origin is the whole argument of this block.