Elements
There are 5 element types: circle, rect, line, scatter, random-dots. Each one below has a live example.
circle
A filled or outlined circle. x and y are the centre, r is the radius as a fraction of the smaller canvas side.
| Field | Meaning |
|---|---|
x, y | Centre, normalised 0 to 1. |
r | Radius, normalised 0 to 1 of the smaller side. |
fill, stroke, weight | Token names and outline width (0 to 64 px). |
rect
A rectangle from its top-left corner, with size as fractions of the canvas.
| Field | Meaning |
|---|---|
x, y | Top-left corner, normalised. |
w, h | Width and height, normalised. |
fill, stroke, weight | As for circle. |
line
A polyline through points. Each point is a pair of normalised coordinates. Lines are always stroked; the colour defaults to fg.
| Field | Meaning |
|---|---|
points | 2 or more pairs [x, y]. |
stroke, weight | Colour token and width in pixels. |
scatter
Points drawn as small circles. Use it for data. The radius is in pixels, not a fraction, so dots stay readable on any canvas size.
| Field | Meaning |
|---|---|
data | 1 or more pairs [x, y], normalised. |
r | Dot radius in pixels, 0 to 100. Default 3. |
fill | Token. Default accent. |
random-dots
A number of dots placed by the spec's seed. Positions and radii come from the seeded generator, so they are the same every time the seed is the same. Changing the seed moves the dots and nothing else.
| Field | Meaning |
|---|---|
count | Integer 1 to 100,000. |
radius | [min, max] in pixels, each 0 to 100. Default [1, 3]. |
fill | Token. Default accent. |
Drawing order
The background is painted first, then each element in array order. A later element covers an earlier one. There is no z-index: reorder the array instead.