mirror of
https://github.com/planetrenox/logo.git
synced 2026-10-29 11:44:52 +00:00
multipleof4andClaude Opus 5.5
a450a1f9aa
Square crops tight round the planet in dark, light and transparent. Outputs now declare their own viewBox instead of translating the drawing. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
26 lines
1.9 KiB
Markdown
26 lines
1.9 KiB
Markdown
# Planet in progress: tiles
|
|
|
|
|
|
|
|
<img src="zoom-dark.png" width="240" alt="zoom, dark"> <img src="zoom-light.png" width="240" alt="zoom, light">
|
|
|
|
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.
|
|
|
|
```sh
|
|
bun install
|
|
bun run build
|
|
```
|
|
|
|
| file | what |
|
|
| --- | --- |
|
|
| `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.
|