Cutting out what you draw
A field of stripes shown through two cut-outs: a disc from the nonzero rule, and a frame from the even-odd rule over two nested rectangles.
A month's report, drawn in curves
A pie of where the hours went, a ring gauge of how far into the year the work is, a card with eased corners, and arcs told where to go rather than how far to turn.
The monthly report of a print shop says where the hours went, how far into the year the work has come, and how orders moved week by week. Those figures usually arrive as pictures pasted onto the sheet: fine on a screen, blurred the moment somebody prints it or looks closer.
Here the document draws them itself. A page can describe straight segments and curves and nothing else — there is no circle to ask for and no arc — so every shape is named instead: a centre and a radius, two angles, three points to pass through. The reader traces them at whatever size the sheet is shown, so they stay crisp at all of them, and they weigh a few dozen characters where a picture weighs a file.
What this example shows
- A pie whose every slice is one arc shut by two straight sides.
- A ring gauge, a card with eased corners, a line whose turns are rounded.
- Traced by the reader, sharp at every size, for the weight of a sentence.
The code, in full
The same document is written twice, once in each language. Both files are shown in full, with the code coloured on the server, and can be copied in one click.
The document itself
The same document is written in each of these languages. Open the one you want to look at.
What this document weighs
This document weighs 42,072 bytes.
The team wrote this example after measuring the documents above, so there is no earlier figure to set beside it. See every document measured.
Examples near this one
Transparency and blend modes
Half-transparent fills that overlap and mix, and one orange square laid over a blue bar in four different ways of mixing colours.
Gradients in a line and in a circle
Gradients in a line and in a circle painted into boxes the page cuts out: a two-colour blend across and another on the diagonal, a circular one whose outer colour is carried out to the corners, and one passing through three colours.
Text and shapes filled with a gradient
A gradient used as the colour something is filled with: a headline whose letters are windows onto a blend of three colours, and a panel filled with a circular one.
Content shown and hidden by layer
One floor plan on four layers you can show and hide: the furniture and the dimensions shown, the notes hidden until asked for, and a draft mark that is looked at but never printed.
One drawing, placed many times
One badge built as a drawing and placed eight times, plus once at half size: the file holds the drawing once, however many times it is placed.