diff --git a/frontend/src/lib/cybersigil.ts b/frontend/src/lib/cybersigil.ts index 44c4590..2d697a2 100644 --- a/frontend/src/lib/cybersigil.ts +++ b/frontend/src/lib/cybersigil.ts @@ -146,6 +146,16 @@ export function buildCybersigil(opts: SigilOptions = {}): string { const pts: Pt[] = [[ox, oy], mid, peak, hook, tail]; emit(spline(pts, 5.5), 'cs-sig-main'); + // Bifurcation: split at the mid point with a secondary branch + if (depth > 0 && rng() < 0.45) { + const bAng = ang + (rng() < 0.5 ? 0.8 : -0.8) + rnd(-0.3, 0.3); + const bL = L * rnd(0.4, 0.7); + const bPeak: Pt = [mid[0] + Math.cos(bAng) * bL, mid[1] + Math.sin(bAng) * bL]; + const bPts: Pt[] = [mid, bPeak, [bPeak[0] + rnd(-10, 10), bPeak[1] + rnd(10, 20)]]; + emit(spline(bPts, 4), 'cs-sig-main'); + if (rng() < 0.3) ornament(bPeak, bAng, 0.6); + } + // terminal spike off the outermost point barb(peak, ang + rnd(-0.4, 0.4), scale * rnd(10, 22)); @@ -198,15 +208,31 @@ export function buildCybersigil(opts: SigilOptions = {}): string { if (depth === 0 && rng() < 0.35) ornament(peak, ang, 0.9); }; - // ── Wavering spine: a curve from top to bottom, gently bowing in +x. - const spineNodes = 6 + Math.floor(rng() * 3); + // ── Harmonic spine: a weighted wave from top to bottom + const spineNodes = 8 + Math.floor(rng() * 4); const spinePts: Pt[] = []; + const sFreq = rnd(0.8, 1.8); + const sAmp = rnd(8, 15); for (let i = 0; i <= spineNodes; i++) { - const y = (H * i) / spineNodes; - const x = i === 0 || i === spineNodes ? 0 : rnd(0, 14); + const t = i / spineNodes; + const y = H * t; + const x = (i === 0 || i === spineNodes) ? 0 : + Math.sin(t * Math.PI * sFreq) * sAmp + + Math.sin(t * Math.PI * sFreq * 2.3) * (sAmp * 0.4); spinePts.push([x, y]); } emit(spline(spinePts, 5), 'cs-sig-main cs-sig-spine'); + + // ── Vascular Filaments: high-frequency "shiver" paths tracking the spine + for (let j = 0; j < 2; j++) { + const vPts = spinePts.map(([x, y], i) => { + const t = i / spineNodes; + const off = Math.sin(t * 22 + rng() * 6) * 1.8; + return [x + off + (j === 0 ? -2.5 : 2.5), y] as Pt; + }); + emit(spline(vPts, 6.5), 'cs-sig-vessel'); + } + // ── Chromatic Aberration: two faint, offset echoes of the spine emit(spline(spinePts.map(([x, y]) => [x - 1.5, y] as Pt), 5), 'cs-sig-spine-ab cs-sig-spine-ab--1'); emit(spline(spinePts.map(([x, y]) => [x + 1.5, y] as Pt), 5), 'cs-sig-spine-ab cs-sig-spine-ab--2'); diff --git a/frontend/src/styles/partials/70-cybersigil.css b/frontend/src/styles/partials/70-cybersigil.css index 536d612..f7f317d 100644 --- a/frontend/src/styles/partials/70-cybersigil.css +++ b/frontend/src/styles/partials/70-cybersigil.css @@ -241,6 +241,13 @@ html.cybersigil body::after { opacity: 0.6; } +/* Vascular Vessels */ +.cybersigil .cs-sig-vessel { + stroke: var(--sky); + stroke-width: 0.2; + opacity: 0.25; +} + /* Stroke-weight tiers — heavy growth, hair filaments, prickly barbs, motifs. */ .cybersigil .cs-sigil .cs-sig-main { stroke-width: 2.8; } .cybersigil .cs-sigil .cs-sig-spine {