Meshes of triangles, every corner its own colour

A gradient runs in a straight line or out from a point, and that covers most of what a page asks for. It does not cover a background whose colour turns a corner, a map shaded from readings taken in twenty places, or a picture of heat where every spot has its own value. The usual way out is to build the picture in a drawing program and drop it in — and then it is a photograph of colour: heavy inside the file, fixed at the size it was made at, and soft at the edges the moment somebody prints the page larger.

A mesh is the other answer, and it stays a description rather than a picture. The area is cut into triangles, every corner says where it stands and what colour sits there, and the colour anywhere between three corners is worked out from those three. Nothing is kept spot by spot, so the file stays small and the page stays sharp at any size. Four panels below say what that gives. One triangle on its own holds red, green and blue at its corners and every mixture of them in between. Beside it a grid of sixty triangles makes a blend neither a straight line nor a circle could make, its edges stroked over the paint so the triangles can be counted. The third is that same grid stated in the four printing inks, which is what a press is given. The last is the same mesh again, named as a fill instead of being painted straight onto the page, so a disc is what decides where it shows — and any shape would serve as well.

What this example shows

  • A colour at every corner, and every mixture between them worked out.
  • Sixty triangles making a blend no straight line and no circle can.
  • The same mesh in the four printing inks, and again inside a disc.

The source code, complete

Nothing is left out and nothing is simplified: this is the program exactly as it runs, for whoever writes your software.

Read the Rust source Read the Python source

The document itself

Open the document in English Open the document in French

Examples near this one

Cutting out what you draw

The same area of stripes shown through two windows: a plain disc, and a ring whose middle is left bare.

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

Four blends and what each one is for: a header that fades out, the same on the diagonal, a glow carried past its own circle so the corners fill, and one that goes by way of a third colour.

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.

Every example, by subject