---
title: "Istos · generative art"
description: "The page you are reading, read differently. Generative art plate #30 by Theodore Vorillas, drawn live in your browser from its code."
url: "https://vorillaz.com/lab/istos"
---

![](https://vorillaz.com/_astro/istos.B0aLDGKv_YjUEk.webp)

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

# #30 istos

The page you are reading, read differently.

- date

  2026.10.12

- tags

  generative-art · javascript · webgl

Every element on this page becomes one thread, woven into a sculpture. What you can read, the paragraphs, headings and code, makes the fat shards, and they are the only thing drawn in signal orange. The scaffolding around it makes thinner strands in ink and grey, scripts and stylesheets wrap around the structure, and every absolute URL in the source leaves it as a long line. Play it and it starts crawling: it follows a random link from the page it is showing and weaves that page instead. There is no going back.

Switch the palette to random for a fresh hue on every page, rolled again each time you press it.

## The reading

```javascript title="istos.js"
// breadth first, one level of the tree at a time
let level = [document.documentElement];
while (level.length) {
  for (const el of level) tags.push(el.tagName.toLowerCase());
  level = level.flatMap((el) => [...el.children]);
}

// each tag is swept along a spline walked through two opposing flow fields
const kinds = {
  content: { size: 0.3, profile: "shard" },      // p, h1–h6, code, li, img, svg
  scaffolding: { size: 0.042, profile: "bar" },  // div, span, nav, a, article
  external: { size: 0.025, profile: "loop" },    // script, link
  header: { size: 0.02, profile: "triangle" },   // html, head, meta, title, body
  outward: { size: 0.028, profile: "escape" },   // every URL in the source
};
```

## The sweep

```javascript title="istos.js"
// parallel transport frames carry a profile along the path without twisting it
for (const [r, p] of points.entries()) {
  const t = r / (points.length - 1);
  const size = base * envelope(t);           // thick in the middle, or at both ends
  const tilt = t * (PI / 2) * random(-1, 1); // the far edge leans along the path
  ring(p, N[r], B[r], T[r], rect(size, tilt), mix(from, to, t));
}
```

## References

- [Aesthetic Engine 2](https://brutalism.rs/project/aesthetic-engine-2/) by BRUTALISM
- [Parallel transport frames](https://github.com/thi-ng/geom/blob/feature/no-org/src/thi/ng/geom/ptf.cljc), from thi.ng/geom