Back to the library
Chart — bars from the baseline
Variant: Bars
Seven columns growing up out of the axis, 520ms of ease-out each and 60ms apart. scaleY(0) is correct here and almost nowhere else in this library: a bar is a measurement taken from the axis, so zero is a real value rather than a thing appearing out of nothing — and a chart whose bars fade in at full height claims the numbers were always there. The axis never animates, because the reader measures against it. Reach for it when a chart lands on a dashboard for the first time.
datachartentrancestaggersvg
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Chart — bars from the baseline</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--round: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex. */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(
calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
);
--rust: oklch(
calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
);
--_muted: color-mix(in srgb, var(--slate) 45%, transparent);
/* Clock — 4.4s. The chart is up for 3.2s of it, which is long enough to
be read rather than watched; the rest is the draw and the re-arm. */
--cycle: 4.4s;
--t: calc(var(--cycle) / var(--speed));
/* One column behind the last. 60ms sits mid-band: at 30ms seven bars
read as one move, at 90ms the chart is being dealt to you. */
--_lag: calc(60ms / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
sans-serif;
color: var(--slate);
}
.tile {
width: min(320px, 90vw);
display: grid;
gap: 12px;
padding: 18px 22px 20px;
border: 1px solid var(--oat);
border-radius: calc(14px * var(--round));
background: var(--paper);
}
.label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--_muted);
}
svg {
display: block;
width: 100%;
height: auto;
}
/* The axis is not data and never animates — it is the thing the data is
measured against, so it has to exist before the data does. */
.axis {
fill: var(--oat);
}
.bar {
fill: var(--clay);
rx: calc(2px * var(--round));
transform-box: fill-box;
transform-origin: bottom;
animation: grow var(--t) linear infinite;
animation-delay: calc(var(--_i) * var(--_lag));
}
.bar:nth-child(1) {
--_i: 0;
}
.bar:nth-child(2) {
--_i: 1;
}
.bar:nth-child(3) {
--_i: 2;
}
.bar:nth-child(4) {
--_i: 3;
}
.bar:nth-child(5) {
--_i: 4;
}
.bar:nth-child(6) {
--_i: 5;
}
.bar:nth-child(7) {
--_i: 6;
}
/* scaleY(0) is legitimate here and nowhere else in the library: a bar is a
measurement taken from the axis, not an element arriving on screen, so
zero is a real value rather than a thing appearing out of nothing. The
clear-out runs on the same stagger as the draw and the snap back to zero
happens under opacity 0, so the loop never rewinds in view. */
@keyframes grow {
0%,
8.18% {
transform: scaleY(0);
opacity: 1;
animation-timing-function: var(--ease-out);
}
20%,
81.8% {
transform: scaleY(1);
opacity: 1;
animation-timing-function: var(--ease-out);
}
89.8% {
transform: scaleY(1);
opacity: 0;
animation-timing-function: steps(1, end);
}
89.9%,
100% {
transform: scaleY(0);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
/* No growth: the columns stand at their values and only the reading
order survives, as a staggered dim rather than a staggered rise. */
.bar {
transform: scaleY(1);
animation: settle calc(var(--t) * 1.6) var(--ease-out) infinite;
animation-delay: calc(var(--_i) * var(--_lag));
}
@keyframes settle {
0%,
8.18% {
opacity: 0.35;
}
20%,
81.8% {
opacity: 1;
}
89.8%,
100% {
opacity: 0.35;
}
}
}
</style>
</head>
<body>
<div class="tile">
<span class="label">Signups / week</span>
<svg
viewBox="0 0 288 152"
role="img"
aria-label="A seven-column bar chart whose columns grow up out of the axis one after another"
>
<g>
<rect class="bar" x="12" y="98" width="26" height="30" />
<rect class="bar" x="52" y="82" width="26" height="46" />
<rect class="bar" x="92" y="90" width="26" height="38" />
<rect class="bar" x="132" y="62" width="26" height="66" />
<rect class="bar" x="172" y="70" width="26" height="58" />
<rect class="bar" x="212" y="44" width="26" height="84" />
<rect class="bar" x="252" y="52" width="26" height="76" />
</g>
<rect class="axis" x="0" y="128" width="288" height="1.5" />
</svg>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.