diff --git a/components/primitives/SimboloTresLineas.tsx b/components/primitives/SimboloTresLineas.tsx index 8059497..ffeca9f 100644 --- a/components/primitives/SimboloTresLineas.tsx +++ b/components/primitives/SimboloTresLineas.tsx @@ -3,16 +3,13 @@ import { useRef, useState, useEffect } from 'react'; import { motion } from 'framer-motion'; import { usePrefersReducedMotion } from '@/lib/motion'; +import { BARRAS_SIMBOLO } from '@/lib/simbolo'; // The manual's own description of the ≡ symbol, made literal: "las líneas van // de muchas/desordenadas (complejidad) a pocas/alineadas (claridad)". Five // uneven bars resolve, once in view, into the three clean aligned bars of the // official icon (see app/icon.svg) — decorative, one-shot, never loops. -const FINAL = [ - { x: 13, y: 13, width: 38, height: 8 }, - { x: 13, y: 28, width: 38, height: 8 }, - { x: 13, y: 43, width: 38, height: 8 }, -]; +const FINAL = BARRAS_SIMBOLO; const BARS = [ { from: { x: 6, y: 9, width: 22, height: 6, opacity: 0.9 }, to: FINAL[0] }, diff --git a/components/primitives/__tests__/simbolo.test.ts b/components/primitives/__tests__/simbolo.test.ts new file mode 100644 index 0000000..bf7886f --- /dev/null +++ b/components/primitives/__tests__/simbolo.test.ts @@ -0,0 +1,19 @@ +import { describe, it, expect } from 'vitest'; +import { BARRAS_SIMBOLO, LINEAS_SIMBOLO } from '@/lib/simbolo'; + +describe('geometría del ≡', () => { + it('define exactly the three bars of the mark', () => { + expect(BARRAS_SIMBOLO).toHaveLength(3); + }); + + it('keeps the three bars aligned and equal in width', () => { + const anchos = new Set(BARRAS_SIMBOLO.map((b) => b.width)); + const izquierdas = new Set(BARRAS_SIMBOLO.map((b) => b.x)); + expect(anchos.size).toBe(1); + expect(izquierdas.size).toBe(1); + }); + + it('derives stroke lines through each bar centre', () => { + expect(LINEAS_SIMBOLO.map((l) => l.y1)).toEqual([17, 32, 47]); + }); +}); diff --git a/lib/simbolo.ts b/lib/simbolo.ts new file mode 100644 index 0000000..1a3f582 --- /dev/null +++ b/lib/simbolo.ts @@ -0,0 +1,22 @@ +// Single source of truth for the ≡ glyph geometry. Both SimboloTresLineas +// (which draws it with ) and SecuenciaClaridad (which resolves into it +// with ) read from here, so the symbol they produce is provably the +// same one and not a lookalike. + +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; + +// Same three bars as strokes: a horizontal line through each bar's centre, +// with the bar's height as stroke width. +export const LINEAS_SIMBOLO = BARRAS_SIMBOLO.map((b) => ({ + x1: b.x, + y1: b.y + b.height / 2, + x2: b.x + b.width, + y2: b.y + b.height / 2, + grosor: b.height, +}));