Completed/total work over time.
25% of scope complete
50% of scope complete
75% of scope complete
100% of scope complete — done
<div class="burnup" data-completion="50" style="--accent:#A8E6C1;">
<div class="burnup__head">
<h3 class="burnup__title">Q3 roadmap burnup</h3>
<span class="burnup__meta">40 pts scope</span>
</div>
<svg class="burnup__chart" viewBox="0 0 300 150" role="img" aria-label="Burnup chart of completed work against total scope">
<line x1="20" y1="20" x2="20" y2="135" class="burnup__grid"/>
<line x1="20" y1="135" x2="280" y2="135" class="burnup__grid"/>
<polyline class="burnup__scope" points="20,30 280,30" fill="none"/>
<polyline class="burnup__done burnup__done--25" points="20,130 100,120 180,112 280,105" fill="none"/>
<polyline class="burnup__done burnup__done--50" points="20,130 100,105 180,80 280,65" fill="none"/>
<polyline class="burnup__done burnup__done--75" points="20,130 100,90 180,55 280,40" fill="none"/>
<polyline class="burnup__done burnup__done--100" points="20,130 100,80 180,45 280,25" fill="none"/>
</svg>
<div class="burnup__legend">
<span class="burnup__legend-item"><span class="burnup__swatch burnup__swatch--scope"></span>Total scope</span>
<span class="burnup__legend-item"><span class="burnup__swatch burnup__swatch--done"></span>Completed</span>
</div>
<p class="burnup__status burnup__status--25">25% of scope complete</p>
<p class="burnup__status burnup__status--50">50% of scope complete</p>
<p class="burnup__status burnup__status--75">75% of scope complete</p>
<p class="burnup__status burnup__status--100">100% of scope complete — done</p>
</div>
<style>
.burnup { font:14px/1.4 system-ui, sans-serif; color:#241430; background:#FAF7F2; padding:16px; border-radius:12px; max-width:380px; box-sizing:border-box; }
.burnup__head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.burnup__title { margin:0; font-size:16px; }
.burnup__meta { font-size:12px; color:#241430b3; }
.burnup__chart { width:100%; height:auto; margin-top:10px; }
.burnup__grid { stroke:#24143026; stroke-width:1; }
.burnup__scope { stroke:#24143066; stroke-width:1.5; stroke-dasharray:4 3; }
.burnup__done { stroke-width:2.5; display:none; stroke:var(--accent); }
.burnup[data-completion="25"] .burnup__done--25,
.burnup[data-completion="50"] .burnup__done--50,
.burnup[data-completion="75"] .burnup__done--75,
.burnup[data-completion="100"] .burnup__done--100 { display:block; }
.burnup__legend { display:flex; gap:14px; margin-top:8px; font-size:12px; }
.burnup__legend-item { display:inline-flex; align-items:center; gap:5px; }
.burnup__swatch { width:14px; height:3px; border-radius:2px; display:inline-block; }
.burnup__swatch--scope { background:#24143066; }
.burnup__swatch--done { background:var(--accent); }
.burnup__status { display:none; margin:8px 0 0; font-size:13px; font-weight:600; color:var(--accent); }
.burnup[data-completion="25"] .burnup__status--25,
.burnup[data-completion="50"] .burnup__status--50,
.burnup[data-completion="75"] .burnup__status--75,
.burnup[data-completion="100"] .burnup__status--100 { display:block; }
</style><div class="burnup-tw font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4 rounded-xl max-w-[380px] box-border" data-completion="50" style="--accent:#A8E6C1;">
<div class="flex justify-between items-baseline gap-2">
<h3 class="m-0 text-base">Q3 roadmap burnup</h3>
<span class="text-xs text-[#241430]/70">40 pts scope</span>
</div>
<svg class="w-full h-auto mt-2.5" viewBox="0 0 300 150" role="img" aria-label="Burnup chart of completed work against total scope">
<line x1="20" y1="20" x2="20" y2="135" stroke="#24143026"/>
<line x1="20" y1="135" x2="280" y2="135" stroke="#24143026"/>
<polyline points="20,30 280,30" fill="none" stroke="#24143066" stroke-width="1.5" stroke-dasharray="4 3"/>
<polyline class="burnup-tw__done burnup-tw__done--25 hidden" points="20,130 100,120 180,112 280,105" fill="none" stroke-width="2.5" style="stroke:#A8E6C1"/>
<polyline class="burnup-tw__done burnup-tw__done--50 hidden" points="20,130 100,105 180,80 280,65" fill="none" stroke-width="2.5" style="stroke:#A8E6C1"/>
<polyline class="burnup-tw__done burnup-tw__done--75 hidden" points="20,130 100,90 180,55 280,40" fill="none" stroke-width="2.5" style="stroke:#A8E6C1"/>
<polyline class="burnup-tw__done burnup-tw__done--100 hidden" points="20,130 100,80 180,45 280,25" fill="none" stroke-width="2.5" style="stroke:#A8E6C1"/>
</svg>
<p class="burnup-tw__status burnup-tw__status--25 hidden mt-2 text-[13px] font-semibold" style="color:#A8E6C1">25% of scope complete</p>
<p class="burnup-tw__status burnup-tw__status--50 hidden mt-2 text-[13px] font-semibold" style="color:#A8E6C1">50% of scope complete</p>
<p class="burnup-tw__status burnup-tw__status--75 hidden mt-2 text-[13px] font-semibold" style="color:#A8E6C1">75% of scope complete</p>
<p class="burnup-tw__status burnup-tw__status--100 hidden mt-2 text-[13px] font-semibold" style="color:#A8E6C1">100% of scope complete — done</p>
</div>
<style>
.burnup-tw[data-completion="25"] .burnup-tw__done--25, .burnup-tw[data-completion="25"] .burnup-tw__status--25,
.burnup-tw[data-completion="50"] .burnup-tw__done--50, .burnup-tw[data-completion="50"] .burnup-tw__status--50,
.burnup-tw[data-completion="75"] .burnup-tw__done--75, .burnup-tw[data-completion="75"] .burnup-tw__status--75,
.burnup-tw[data-completion="100"] .burnup-tw__done--100, .burnup-tw[data-completion="100"] .burnup-tw__status--100 { display:block; }
</style>export function Burnup({
title = "Q3 roadmap burnup",
totalPoints = 40,
completion = "50",
scopeChange = false,
accent = "#A8E6C1",
}) {
const done = {
"25": "20,130 100,120 180,112 280,105",
"50": "20,130 100,105 180,80 280,65",
"75": "20,130 100,90 180,55 280,40",
"100": "20,130 100,80 180,45 280,25",
}[completion] ?? "20,130 100,105 180,80 280,65";
const scope = scopeChange ? "20,50 140,50 140,25 280,25" : "20,30 280,30";
return (
<div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2",
padding: 16, borderRadius: 12, maxWidth: 380, boxSizing: "border-box" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
<h3 style={{ margin: 0, fontSize: 16 }}>{title}</h3>
<span style={{ fontSize: 12, color: "#241430b3" }}>{totalPoints} pts scope</span>
</div>
<svg style={{ width: "100%", height: "auto", marginTop: 10 }} viewBox="0 0 300 150" role="img" aria-label="Burnup chart of completed work against total scope">
<line x1="20" y1="20" x2="20" y2="135" stroke="#24143026" />
<line x1="20" y1="135" x2="280" y2="135" stroke="#24143026" />
<polyline points={scope} fill="none" stroke="#24143066" strokeWidth="1.5" strokeDasharray="4 3" />
<polyline points={done} fill="none" stroke={accent} strokeWidth="2.5" />
</svg>
<p style={{ margin: "8px 0 0", fontSize: 13, fontWeight: 600, color: accent }}>{completion}% of scope complete{completion === "100" ? " — done" : ""}</p>
</div>
);
}