---
title: "Kitāb · generative art"
description: "Calligraphy written over itself until it is a field. Generative art plate #43 by Theodore Vorillas, drawn live in your browser from its code."
url: "https://vorillaz.com/lab/kitab"
---

![](https://vorillaz.com/_astro/kitab.CNQYhQ5I_GjgUu.webp)

fig. #43 · rendered live in your browser from the code below

# #43 kitāb

Calligraphy written over itself until it is a field.

- date

  2026.10.13

- tags

  generative-art · javascript

Calligraphy written over itself until it is a field. The words are in an invented Arabic hand and none of them can be read. It is the practice sheet, the siyah mashq, where a calligrapher writes over the same page until the letters are a texture, and the walls of the hurufiyya painters who took that texture for their subject.

Everything is written with one reed, cut broad and held at a fixed angle, from lower right to upper left. The pen is not a brush: its width comes only from the direction it moves in. Along the line it is broad, a falling tail is broad, a stem a little less, and climbing to the right it goes to a hairline. A stroke starts on the cut of the nib and, at a word’s end, the pen lifts and twists away into a point. A dot is the nib set down and drawn once across its own edge, so every dot is a diamond.

A word runs right to left along its baseline through teeth, loops, an ayn’s open head and a ha’s knot. Its alifs and lams are separate strokes, set down from the top onto the line, and an alif breaks the word, as it does in the script. It ends on a final: a ra’s falling tail, a nun’s bowl with its dot, a ha’s hood over its bowl, a mim’s drop, or a ya’s long return under the word.

The sheet is written at four depths. The deepest is large and written at under a third of the resolution, so it comes out soft, the next at half, and the two nearest are sharp. On graphite the deep writing is old gold that comes and goes in the dark, and the nearest is signal, each word lifted off the rest by a soft shadow. On paper the depths are washes of signal building up. Playing it clears the sheet and writes it again, a depth at a time.

## The reed

```javascript title="kitab.js"
// the nib's edge, from lower right to upper left; a stroke is the edge swept along its path,
// a quad for every step, all wound the same way so where they overlap they add
const edge = [-0.6, -0.8].map((v) => (v * nib) / 2);
for (const [a, b] of pairs(path)) quad(a + edge * press(a), b + edge * press(b), b - edge * press(b), a - edge * press(a));

// full from the cut, lifted off into a point at the end
const press = (t) => (start ? 0.12 + 0.88 * smooth(t / start) : 1) * (end ? 0.03 + 0.97 * smooth((1 - t) / end) : 1);

// a dot: the nib set down and drawn a nib's width across its edge
diamond(c + edge, c + perp(edge), c - edge, c - perp(edge));
```

## The word

```javascript title="kitab.js"
// right to left from the origin, along a baseline at y = 0; up is negative, in x-heights
const lam = () => { stem(x - 0.1, random(2.6, 3.6)); main.push([x - 0.4, 0.05], [x - 0.6, 0]); x -= 0.6; };
const alif = () => { close(); stem(x - 0.45, random(2.5, 3.3)); x -= 0.95; main = [[x + 0.25, -0.3], [x, 0]]; };
for (let n = 2 + floor(random(5)); n > 0; n--) random([kashida, tooth, head, ayn, knot, lam, alif])();
random([ra, nun, ha, mim, ya])(); // the final, drawn out to a point
```

## The sheet

```javascript title="kitab.js"
// four depths, back to front: the deep ones larger, dimmer and written small, then scaled up soft
const depths = [{ words: 22, u: [0.05, 0.085], res: 0.3 }, { words: 34, u: [0.036, 0.06], res: 0.55 },
  { words: 64, u: [0.026, 0.044], res: 1 }, { words: 18, u: [0.032, 0.056], res: 1 }];
// mostly along the line, some stood on end, a few on the slant
const turn = r < 0.7 ? random(-0.12, 0.12) : r < 0.85 ? random([-1, 1]) * PI / 2 : random(-0.8, 0.8);
```

## References

- [Hurufiyya movement](https://en.wikipedia.org/wiki/Hurufiyya_movement)
- [Islamic calligraphy](https://en.wikipedia.org/wiki/Islamic_calligraphy)
- [Thuluth](https://en.wikipedia.org/wiki/Thuluth)
- [Asemic writing](https://en.wikipedia.org/wiki/Asemic_writing)