, the latter with — so the symbol they produce
// is provably the same one and not a lookalike.
+//
+// The proportions are the Manual de Identidad Visual's, already measured and
+// traced in Wordmark.tsx: bar length = 5.919 × thickness, gap = 2 × thickness,
+// ends fully rounded. Three bars and two gaps make the mark exactly seven
+// thicknesses tall. These are not cosmetic: with stubby bars and tight gaps the
+// mark stops reading as an E — the owner's 28/jul instruction — and starts
+// reading as a hamburger menu icon.
export const VIEWBOX_SIMBOLO = '0 0 64 64';
-export const BARRAS_SIMBOLO = [
- { x: 13, y: 13, width: 38, height: 8 },
- { x: 13, y: 28, width: 38, height: 8 },
- { x: 13, y: 43, width: 38, height: 8 },
-] as const;
+const LADO = 64;
+const LARGO_POR_GROSOR = 5.919;
+const HUECO_POR_GROSOR = 2;
-// Same three bars as strokes: a horizontal line through each bar's centre,
-// with the bar's height as stroke width.
+export const GROSOR_BARRA = 8;
+export const RADIO_BARRA = GROSOR_BARRA / 2;
+
+const LARGO_BARRA = GROSOR_BARRA * LARGO_POR_GROSOR;
+const HUECO = GROSOR_BARRA * HUECO_POR_GROSOR;
+const PASO = GROSOR_BARRA + HUECO;
+
+const IZQUIERDA = (LADO - LARGO_BARRA) / 2;
+const ARRIBA = (LADO - (3 * GROSOR_BARRA + 2 * HUECO)) / 2;
+
+export const BARRAS_SIMBOLO = [0, 1, 2].map((i) => ({
+ x: IZQUIERDA,
+ y: ARRIBA + i * PASO,
+ width: LARGO_BARRA,
+ height: GROSOR_BARRA,
+}));
+
+// The same three bars as strokes. A round cap reaches half the stroke width
+// past its endpoint, so the ends are inset by exactly that much — otherwise the
+// drawn line overshoots by a full thickness the rect it has to reproduce.
export const LINEAS_SIMBOLO = BARRAS_SIMBOLO.map((b) => ({
- x1: b.x,
+ x1: b.x + b.height / 2,
y1: b.y + b.height / 2,
- x2: b.x + b.width,
+ x2: b.x + b.width - b.height / 2,
y2: b.y + b.height / 2,
grosor: b.height,
}));