FacetDocs

Drawing

draw lists shapes in a box of size, with coordinates from its top left corner, y down. Use it for what layout cannot express: dials, charts, marks. For symbols, use an icon first.

drawing-gauge.json≈ 175 tokens
{
  "name": "Gauge",
  "size": [200, 170],
  "draw": [
    {
      "arc": [100, 100, 80, 225, 495],
      "stroke": "#ECE6DD",
      "weight": 14
    },
    {
      "arc": [100, 100, 80, 225, 405],
      "stroke": {
        "linear": ["#F29F05", "#D9485F"],
        "angle": 0
      },
      "weight": 14
    },
    {
      "line": [100, 100, 100, 40],
      "stroke": "#1A1423",
      "weight": 3
    },
    {
      "circle": [100, 100, 6],
      "fill": "#1A1423"
    }
  ]
}
What drawing-gauge.json builds

A gauge: a track arc, a value arc with a gradient stroke, a needle and its hub. Arcs run clockwise from the top, as on a clock face.

Built by the docs build with the real CLI.

Shapes

ShapeNumbers
circle[cx, cy, r]
ellipse[cx, cy, rx, ry]
rect[x, y, width, height], with radius
line[x1, y1, x2, y2]
poly[x1, y1, x2, y2, ...], with "closed": true for a polygon
arc[cx, cy, r, from, to] in degrees clockwise from the top
pathSVG path data

Paint

Each shape takes fill (none by default) and stroke (the node's color by default when there is no fill), with weight (1.5), dash ([dash, gap]), cap (round by default; none, square) and join. Colors and gradients read as anywhere else; kit colors are written as their values, since a drawing's shapes do not bind to variables.

Icons

{"icon": "lucide:clock", "size": 16, "color": "@mute"} draws an icon from the Iconify collections (lucide, mdi, tabler, ph and the rest), fetched once and cached. The first use of a name makes a component Icons/lucide:clock in a frame named Icons beside your work, and the build notes it; every use is an instance of it, so color and size are per use and one edit to the component changes them all. Swap an icon with modify Icon '{"icon": "lucide:moon"}', or from an instance with {"Icon": "lucide:moon"}.