diff --git a/LOGO.md b/LOGO.md index 7ba8264..90428b4 100644 --- a/LOGO.md +++ b/LOGO.md @@ -2,8 +2,9 @@ The logo is an export of the `/f` visualization ([src/pages/f.astro](src/pages/f.astro)): the unit box plus the polyline that strokes an **F** — the powers -z₀, z₀², z₀⁴, z₀⁸ of the seed **z₀ = 0.362 + 0.953i** under repeated squaring -(the 3:41 moment of Numberphile's [Mandelbrot video](https://www.youtube.com/watch?v=FFftmWSzgmk)). +z₀, z₀², z₀⁴, z₀⁸ of the seed **z₀ = 0.363 + 0.965i** under repeated squaring +(a nudge off the 3:41 moment of Numberphile's [Mandelbrot video](https://www.youtube.com/watch?v=FFftmWSzgmk), +z₀ ≈ 0.362 + 0.953i — the exported mark tunes the seed for shape). ## Requirements @@ -14,23 +15,37 @@ z₀, z₀², z₀⁴, z₀⁸ of the seed **z₀ = 0.362 + 0.953i** under repea - **First 4 line strokes only** (z₀ → z₀¹⁶): the F itself, without the fly-off tail. - **Without the circle** — no lock ring, no F glyph, no coordinate label, no axes. - **Lines only — no points.** The export draws no orbit points; the page keeps its. -- **Line boldness matches the page as seen**: 5.2px strokes — 2× the page's - stroke-to-box ratio, because a PNG is typically viewed scaled down, which - visually halves its strokes next to the live canvas. Alphas box 0.4 / - polyline 0.55, at the page's reference plane scale - `min(1440/3.6, 900/2.35) ≈ 382.98 px/unit` → **766×766** canvas. +- **One stroke weight across every export**: a single stroke-to-image ratio, + matched to the **Airbnb Bélo's** line weight — the Bélo's uniform line + measures 7.023 units against its 99.9-unit symbol height in the official SVG, + so `STROKE_RATIO = 7.023/99.9 ≈ 0.0703` (**≈54px** on the 766 logo, 12.7px on + the 180px apple-touch, 4.5px on the 64px favicon; floored at 2px as a safety + net). Our box spans the image edge to edge, so the image size is the mark + height and the ratio carries over directly. The mark reads at the same + boldness whether it's the full logo or a 64px favicon. + This is heavier than the page's own strokes and intentionally does not track + them — the reference plane scale `min(1440/3.6, 900/2.35) ≈ 382.98 px/unit` + sets the **766×766** canvas geometry, but stroke weight is the export's own. (The page itself draws strokes and points *proportional to its plane scale* — 2.6px / 4px at the reference scale — and backs its canvas at `devicePixelRatio`, so its look is viewport-invariant and crisp.) -- **Mint ink** (`rgba(176, 222, 240)` — the same mint phosphor as the live - visualization), on `#0a0a0a` plus a transparent-background variant. +- **Single mint tone, no overlap darkening** — unlike the page, which layers a + dimmer box (α 0.4) under a brighter polyline (α 0.55), the export draws the + box and the F as **one stroked path in a single alpha (0.85)** — the + favicon/apple-touch brightness, applied to the full logo too so it doesn't + read dim. A lone `stroke()` unions its own coverage, so where the polyline + crosses the box the overlap stays that flat color instead of compositing two + translucent strokes into a denser square. Holds for the dark-bg and + transparent variants alike. +- **Mint ink** (`rgba(176, 222, 240)` at α 0.85 — the same mint phosphor as the + live visualization), on `#0a0a0a` plus a transparent-background variant. ## Favicon -The logo is also the site favicon. Same composition, but strokes and -points scale with the icon size (alphas boosted to box 0.7 / polyline -0.85 / points 1) so the mark stays legible at tab size; always on the -dark background. +The logo is also the site favicon. Same composition, single-tone treatment, +stroke ratio, and ink alpha (0.85); strokes therefore scale with the icon size +(floored at 2px) so the mark stays legible at tab size; always on the dark +background. - [public/favicon.png](public/favicon.png) — 64×64, linked as `rel="icon"` - [public/apple-touch-icon.png](public/apple-touch-icon.png) — 180×180, linked as `rel="apple-touch-icon"` diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index f981f81..852eefc 100644 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/favicon.png b/public/favicon.png index 4e92d35..4c95acf 100644 Binary files a/public/favicon.png and b/public/favicon.png differ diff --git a/scripts/export-logo.mjs b/scripts/export-logo.mjs index 85c93e2..39bec91 100644 --- a/scripts/export-logo.mjs +++ b/scripts/export-logo.mjs @@ -1,14 +1,19 @@ // Export the /f visualization as a square PNG logo: unit box + the F -// polyline (seed 0.362 + 0.953i) — no ring, no glyph, no axes. +// polyline (seed 0.363 + 0.965i) — no ring, no glyph, no axes. // -// Metrics match the page exactly: the plane scale is the page's -// min(w/3.6, h/2.35) at the 1440×900 reference viewport, lines are 2.6px, -// points 4px, with the page's stroke alphas (box 0.4, line 0.55, -// points 0.95). The canvas is sized from the scale so the drawing is -// pixel-identical to the live page. +// Geometry matches the page: the plane scale is the page's min(w/3.6, h/2.35) +// at the 1440×900 reference viewport, and the canvas is sized from it so the +// drawing lines up with the live page. Stroke weight does not — the export +// uses ONE stroke-to-image ratio across every size (logo + favicons), set to +// the Airbnb Bélo's line-to-height ratio, so the mark reads at the same +// boldness everywhere. And unlike the page — which +// layers a dimmer box under a brighter polyline — the export draws the whole +// mark in ONE mint tone via a single stroked path, so where the polyline +// crosses the box the coverage is unioned, not alpha-stacked: overlaps stay +// that flat color instead of darkening into a denser square. // -// Also emits favicons (same composition, size-relative strokes and -// boosted alphas so the mark stays legible at tab size) into public/. +// Also emits favicons (same composition and stroke ratio, alpha boosted so +// the thinner small marks stay legible at tab size) into public/. import { chromium } from "playwright"; const SPAN = 1.0; // half-extent shown — box (±1) is 0-margin, edge to edge @@ -20,7 +25,7 @@ const faviconDir = process.env.FAVICON_OUT ?? "public"; const html = `