Site · Logo: the letter E in iso blocks, in the header, the favicon, the touch icon and the OG image

One geometry in src/iso/mark.ts, drawn by the engine the miniatures use. The favicon follows the system's mode; scripts/favicon.mjs takes its colors from styles.css. Below 768px the header shows the mark alone, its word kept as the link's name.

frontend/src/iso/mark.test.ts

@@ -0,0 +1,24 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { mark, points } from "./mark.ts";
+
+test("the mark draws three faces of each of its four blocks, the middle arm's in the accent", () => {
+  const { polygons } = mark(0);
+  assert.equal(polygons.length, 12);
+  assert.equal(polygons.filter((p) => p.accent).length, 3);
+  assert.deepEqual(polygons.slice(0, 3).map((p) => p.face), ["right", "front", "top"]);
+});
+
+test("the mark fills its box less the padding", () => {
+  const pad = 0.5;
+  const { width, height, polygons } = mark(pad);
+  const all = polygons.flatMap((p) => p.points);
+  const [xs, ys] = [all.map(([x]) => x), all.map(([, y]) => y)];
+  assert.ok(Math.abs(Math.min(...xs) - pad) < 1e-9 && Math.abs(Math.max(...xs) - (width - pad)) < 1e-9);
+  assert.ok(Math.abs(Math.min(...ys) - pad) < 1e-9 && Math.abs(Math.max(...ys) - (height - pad)) < 1e-9);
+  assert.ok(height > width, "the E stands taller than wide");
+});
+
+test("points print as an SVG list", () => {
+  assert.equal(points([[1, 2.5], [0.12345, 3]]), "1,2.5 0.123,3");
+});

frontend/src/iso/mark.ts

@@ -0,0 +1,27 @@
+import { bounds, faces, painted, type Block, type Point } from "./engine.ts";
+
+const b = (x: number, z: number, w: number, d: number, h: number, y = 0, accent = false): Block => ({ x, z, w, d, h, y, accent, beat: 0 });
+
+/** The letter E in blocks, its middle arm in the accent. */
+const BLOCKS = [b(0, 0, 1, 1, 5), b(1, 0, 2.4, 1, 1), b(1, 0, 1.8, 1, 1, 2, true), b(1, 0, 2.4, 1, 1, 4)];
+
+export type Face = "top" | "front" | "right";
+
+export interface Polygon {
+  points: Point[];
+  face: Face;
+  accent: boolean;
+}
+
+/** The mark's faces back to front, in a box `pad` larger than the mark each side. */
+export function mark(pad: number): { width: number; height: number; polygons: Polygon[] } {
+  const [x0, y0, x1, y1] = bounds(BLOCKS);
+  const [ox, oy] = [pad - x0, pad - y0];
+  const polygons = painted(BLOCKS).flatMap((k) => {
+    const f = faces(k, k.h);
+    return (["right", "front", "top"] as const).map((face) => ({ points: f[face].map(([x, y]): Point => [x + ox, y + oy]), face, accent: !!k.accent }));
+  });
+  return { width: x1 - x0 + pad * 2, height: y1 - y0 + pad * 2, polygons };
+}
+
+export const points = (p: Point[]) => p.map(([x, y]) => `${+x.toFixed(3)},${+y.toFixed(3)}`).join(" ");