/** * Section ornaments drawn from Islamic geometry rather than a stock glyph. * * The motif is the khatam — the eight-pointed star you get by overlaying two * squares at 45°, the one that anchors Persian tilework and Mughal jaali * screens. The divider sets a khatam medallion between two braided bands * (the running guilloche used on illuminated manuscript borders), then lets * hairlines fade out to the margins. */ /** Outer/inner radius ratio of a true {8/2} octagram: 1 / (cos22.5 + sin22.5). */ const KHATAM_RATIO = 0.7654; /** Points of an eight-pointed star, first point at the top. */ function khatam( cx: number, cy: number, outer: number, inner = outer * KHATAM_RATIO, ) { const points: string[] = []; for (let i = 0; i < 16; i++) { const radius = i % 2 === 0 ? outer : inner; const angle = (i * Math.PI) / 8 - Math.PI / 2; points.push( `${(cx + radius * Math.cos(angle)).toFixed(2)},${(cy + radius * Math.sin(angle)).toFixed(2)}`, ); } return points.join(" "); } /** * One strand of a braid: arcs alternating above and below the axis, each one * returning to the axis so the strand starts and ends flush. */ function strand( x0: number, cy: number, arcs: { width: number; amplitude: number }[], startsAbove: boolean, ) { let d = `M ${x0} ${cy}`; let x = x0; arcs.forEach(({ width, amplitude }, i) => { const above = startsAbove ? i % 2 === 0 : i % 2 === 1; x += width; d += ` A ${width / 2} ${amplitude} 0 0 ${above ? 1 : 0} ${x} ${cy}`; }); return d; } const CY = 10; /** * A braid is two strands a half-period apart, so the arcs cross instead of * closing into beads. The offset strand covers the same span with clipped * arcs at either end, keeping both ends of the band tidy. */ const BRAID = { period: 11, amplitude: 3.3, arcs: 4 }; const BRAID_WIDTH = BRAID.period * BRAID.arcs; function Braid({ x }: { x: number }) { const full = { width: BRAID.period, amplitude: BRAID.amplitude }; const clipped = { width: BRAID.period / 2, amplitude: BRAID.amplitude / 2 }; return ( <> ); } /** Hairline runs, inner end first, so opacity can fall away toward the margin. */ const RULE_OPACITIES = [0.85, 0.7, 0.55, 0.4, 0.26, 0.13]; const RULE_SEGMENT = 14; function Rule({ from, direction }: { from: number; direction: 1 | -1 }) { return ( <> {RULE_OPACITIES.map((opacity, i) => { const x1 = from + direction * i * RULE_SEGMENT; return ( ); })} ); } export function OrnamentDivider() { return ( ); } /** * The little star that leads each section label. Points are drawn sharper than * the true khatam ratio — at 14px the honest proportions read as a blob. */ export function OrnamentStar({ className }: { className?: string }) { return ( ); }