diff --git a/designs/planet-in-progress/versions/tiles/README.md b/designs/planet-in-progress/versions/tiles/README.md
index 0f5b474..7bc8c5b 100644
--- a/designs/planet-in-progress/versions/tiles/README.md
+++ b/designs/planet-in-progress/versions/tiles/README.md
@@ -2,6 +2,8 @@
+
+
A planet that's still being built, for a company that's still growing. The sphere is made of flat-shaded tiles. The side facing the build direction is already laid, the rest is still bare scaffolding, and a dotted outline marks the full sphere. Three orange tiles are flying in toward their dashed sockets along the build edge. The wordmark underneath is set in Sora Bold.
The script places a latitude/longitude grid on a sphere and projects it straight onto the page. Each cell is then marked as laid or scaffold by how far it faces the build direction, plus some random jitter so the edge comes out ragged. Laid tiles are shaded by how much they face the light. Laid tiles on the far side are drawn darker, so gaps in the shell show its inside. [opentype.js](https://github.com/opentypejs/opentype.js) turns the wordmark into outlines, and [resvg](https://github.com/thx/resvg-js) renders the PNGs.
@@ -16,5 +18,8 @@ bun run build
| `logo-dark.svg` / `logo-dark.png` | sphere + wordmark on navy |
| `logo-light.svg` / `logo-light.png` | sphere + wordmark on off-white |
| `mark.svg` / `mark.png` | sphere only, transparent, works on light and dark |
+| `zoom-dark.svg` / `zoom-dark.png` | no text, planet fills a square, on navy |
+| `zoom-light.svg` / `zoom-light.png` | no text, planet fills a square, on off-white |
+| `zoom-transparent.svg` / `zoom-transparent.png` | no text, planet fills a square, transparent |
The settings at the top of `index.js` control the camera tilt (`T`), spin (`YAW`), tile size (`STEP`), build direction (`B`), light (`L`), tile gaps (`GAP`), how ragged the build edge is (`JITTER`) and how far each incoming tile still has to travel (`FLIGHTS`). The random seed is fixed, so every build comes out the same.
diff --git a/designs/planet-in-progress/versions/tiles/index.js b/designs/planet-in-progress/versions/tiles/index.js
index 7306c6b..30cb69b 100644
--- a/designs/planet-in-progress/versions/tiles/index.js
+++ b/designs/planet-in-progress/versions/tiles/index.js
@@ -73,11 +73,11 @@ const outside = cells.filter(c => c.state == 'solid' && c.c[2] > 0).sort(byDepth
const sockets = cells.filter(c => c.state == 'flying')
.map(({ q, c }) => ``).join('')
// flying tiles drift in from the upper right, lifted off their sockets
-const flying = cells.filter(c => c.state == 'flying').map(({ q, c }, i) => {
+const flights = cells.filter(c => c.state == 'flying').map(({ q, c }, i) => {
const o = [.8, .55, .25].map((v, j) => v * FLIGHTS[i] + c[j] * .05)
- const t = tile(q, c, GAP * 1.04).map(p => p.map((v, k) => v + o[k])), [a, b] = [c, c.map((v, k) => v + o[k])].map(v => xy(v).map(n).join(' '))
- return ``
-}).join('')
+ return { c, t: tile(q, c, GAP * 1.04).map(p => p.map((v, k) => v + o[k])), to: c.map((v, k) => v + o[k]) }
+})
+const flying = flights.map(({ c, t, to }) => ``).join('')
// wordmark, laid out glyph by glyph so the tracking can be opened up
const word = (text, size, track, y) => {
@@ -92,12 +92,23 @@ const wordmark = word('RENOX', 124, .16, 985)
const THEMES = {
dark: { bg: '#0b0a24', ink: '#ffffff', wire: '#8c95ff', ghost: '#5b63d9', back: .28 },
light: { bg: '#f5f4ff', ink: '#16123f', wire: '#4a4fd1', ghost: '#8d92e8', back: .16 },
- mark: { wire: '#6f78f2', ghost: '#7f86e6', back: .2 },
+ transparent: { wire: '#6f78f2', ghost: '#7f86e6', back: .2 },
}
-const svg = ({ bg, ink, wire: w, ghost, back }) => `
+
A planet that's still being built, for a company that's still growing. The sphere is made of flat-shaded tiles. The side facing the build direction is already laid, the rest is still bare scaffolding, and a dotted outline marks the full sphere. Three orange tiles are flying in toward their dashed sockets along the build edge. The wordmark underneath is set in Sora Bold.
The script places a latitude/longitude grid on a sphere and projects it straight onto the page. Each cell is then marked as laid or scaffold by how far it faces the build direction, plus some random jitter so the edge comes out ragged. Laid tiles are shaded by how much they face the light. Laid tiles on the far side are drawn darker, so gaps in the shell show its inside. [opentype.js](https://github.com/opentypejs/opentype.js) turns the wordmark into outlines, and [resvg](https://github.com/thx/resvg-js) renders the PNGs.
@@ -16,5 +18,8 @@ bun run build
| `logo-dark.svg` / `logo-dark.png` | sphere + wordmark on navy |
| `logo-light.svg` / `logo-light.png` | sphere + wordmark on off-white |
| `mark.svg` / `mark.png` | sphere only, transparent, works on light and dark |
+| `zoom-dark.svg` / `zoom-dark.png` | no text, planet fills a square, on navy |
+| `zoom-light.svg` / `zoom-light.png` | no text, planet fills a square, on off-white |
+| `zoom-transparent.svg` / `zoom-transparent.png` | no text, planet fills a square, transparent |
The settings at the top of `index.js` control the camera tilt (`T`), spin (`YAW`), tile size (`STEP`), build direction (`B`), light (`L`), tile gaps (`GAP`), how ragged the build edge is (`JITTER`) and how far each incoming tile still has to travel (`FLIGHTS`). The random seed is fixed, so every build comes out the same.
diff --git a/designs/planet-in-progress/versions/tiles/index.js b/designs/planet-in-progress/versions/tiles/index.js
index 7306c6b..30cb69b 100644
--- a/designs/planet-in-progress/versions/tiles/index.js
+++ b/designs/planet-in-progress/versions/tiles/index.js
@@ -73,11 +73,11 @@ const outside = cells.filter(c => c.state == 'solid' && c.c[2] > 0).sort(byDepth
const sockets = cells.filter(c => c.state == 'flying')
.map(({ q, c }) => `