Colours and stills

Each colourway is three colours, main, light and deep, which the figure's material flows through, with a rainbow round its rim. palette picks one of COLOURWAYS: 1 blue, 2 green, 3 sun, 4 pink, 5 violet, 6 teal, 7 orange, 8 red.

Colours of your own

colours gives a figure three of your own, and ink its eyes' colour (INK, a near black, unless said). Any CSS colour works, and a custom property is read from the page's root, so your design tokens stay the one place its colours are said:

<AgentFigure
  figure={ada}
  colours={{
    main: "var(--brand)",
    light: "var(--brand-light)",
    deep: "var(--brand-deep)",
  }}
  ink="var(--ink)"
/>

A colour is read once, the first time a figure is drawn in it: a token changed later isn't seen until the page loads again.

Drained

drain, from 0 to 1, greys a figure: an agent running out of its budget, say. At 1 it keeps less than half its colour.

A dot

AgentDot is a figure's colours alone, a dot 8 pixels across unless size says otherwise, for where a whole figure wouldn't read, a table's row say. It takes colours too.

<AgentDot figure={ada} size={10} />

A still

svgOf writes a figure as an SVG file, seen from the front: for an email, a social card or a server, anywhere a live one can't go. It's in the main entry and runs anywhere.

import { figureFor, svgOf } from "@cesarvenzac/figures";

const svg = svgOf(figureFor("Ada"), "happy", {}, 128);
// '<svg xmlns="http://www.w3.org/2000/svg" …'

Its third argument takes main, light, deep and ink, its colourway's and INK unless given, and its last names its gradient, unique on a page. Where a browser has no WebGL 2, a live figure is a flat drawing much like it.