Sunrise
Random dots for stars, a sun on the horizon, and a ground that hides what sits under it. The picture at the top of this site.
Shows: draw order, random-dots, a theme that follows the page.
Examples
Each example is a complete spec. Open one in the playground to change it, or copy the JSON.
One circle
The smallest useful spec: one accent circle on the light theme.
Shows: circle, theme tokens, normalised coordinates.
Scatter with a trend line
Twelve points and a guide line. Shows the scatter element and a line in muted ink.
Shows: scatter, line, radius in pixels.
Seeded random field
900 dots placed by a seed. Change the seed and the dots move; the frame does not.
Shows: random-dots, seed, reproducibility.
Bar chart
Six bars on a baseline, drawn as rectangles from a top-left corner and a size.
Shows: rect, stacking shapes by hand.
Dark poster
The same vocabulary on the dark theme. Only the colour tokens change, not the layout.
Shows: dark theme, bg token, tall canvas.
Line chart over a grid
Three guide lines in the grid token and one accent series on top.
Shows: grid token, multi-point line, stroke weight.
Controls
A sunrise with sliders, a select and a toggle. The seed, the theme, the star count and the sun size all follow controls.
Shows: controls, bindings, when, seed and theme from a control.
Bar chart from data
Six months of revenue in a data table. The axes, the scales and the ticks come from the numbers, not hand-placed coordinates.
Shows: data tables, bars, axes with a zero baseline, band scale.
Log scale with a legend
Visits against time on a log x axis, with points, a path and a legend. Shows the log scale and the zero-free linear axis.
Shows: log scale, points, path, legend, zero false.