From 0d518e94d40ecd1cd7964fe5e0d7086693b18929 Mon Sep 17 00:00:00 2001 From: Nils Pukropp Date: Thu, 21 May 2026 04:41:12 +0200 Subject: [PATCH] update cybersigilism --- frontend/src/lib/cybersigil.ts | 25 +++++++++++++++---- .../src/styles/partials/70-cybersigil.css | 7 ++++++ 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/frontend/src/lib/cybersigil.ts b/frontend/src/lib/cybersigil.ts index dfb0b25..200eb14 100644 --- a/frontend/src/lib/cybersigil.ts +++ b/frontend/src/lib/cybersigil.ts @@ -29,6 +29,10 @@ export const GLYPHS: readonly Glyph[] = [ { w: 14, h: 24, d: 'M0 0 L0 24 M0 6 L12 2 M0 14 L13 10 M0 21 L9 19' }, { w: 20, h: 18, d: 'M0 9 Q10 -2 19 4 M19 4 L15 0 M19 4 L20 9 M0 9 L4 16' }, { w: 15, h: 20, d: 'M0 0 Q14 6 13 13 Q12 19 0 19 M7 8 Q11 11 11 16' }, + // New "occult-tech" variants + { w: 18, h: 18, d: 'M9 0 L9 18 M0 9 L18 9 M4 4 L14 14 M14 4 L4 14' }, // Star/Cross + { w: 20, h: 20, d: 'M10 2 A8 8 0 1 0 10 18 A8 8 0 1 0 10 2 M10 6 A4 4 0 1 0 10 14 A4 4 0 1 0 10 6' }, // Eye/Nested + { w: 12, h: 20, d: 'M0 0 L12 0 M0 8 L12 8 M0 16 L12 16 M6 0 L6 20' }, // Triple-bar ] as const; export interface SigilOptions { @@ -202,7 +206,7 @@ export function buildCybersigil(opts: SigilOptions = {}): string { const x = i === 0 || i === spineNodes ? 0 : rnd(0, 14); spinePts.push([x, y]); } - emit(spline(spinePts, 5), 'cs-sig-main'); + emit(spline(spinePts, 5), 'cs-sig-main cs-sig-spine'); // terminal ornaments on the spine itself (anchors the design) ornament(spinePts[0], -Math.PI / 2, 1.1); @@ -210,7 +214,10 @@ export function buildCybersigil(opts: SigilOptions = {}): string { // ── Branch nodes ride the spine and throw limbs outward. const nodes = opts.count ?? 8 + Math.floor(rng() * 4); // 8–11 + const tangleIdx = rng() < 0.7 ? 1 + Math.floor(rng() * (nodes - 2)) : -1; + for (let i = 0; i < nodes; i++) { + const isTangle = i === tangleIdx; const t = 0.1 + (0.8 * (i + rnd(-0.2, 0.2))) / (nodes - 1); const tc = Math.max(0.05, Math.min(0.95, t)); const si = Math.min(spinePts.length - 2, Math.floor(tc * (spinePts.length - 1))); @@ -219,12 +226,20 @@ export function buildCybersigil(opts: SigilOptions = {}): string { const b = spinePts[si + 1]; const node: Pt = [a[0] + (b[0] - a[0]) * sf, a[1] + (b[1] - a[1]) * sf]; const bias = -0.3 + tc * 0.8; - const limbs = 1 + Math.floor(rng() * 2); + + const limbs = (1 + Math.floor(rng() * 2)) * (isTangle ? 2 : 1); for (let l = 0; l < limbs; l++) { - const ang = bias + rnd(-0.6, 0.6); - limb(node[0], node[1], ang, rnd(0.7, 1.1), 1); + const ang = bias + rnd(-0.6, 0.6) + (isTangle ? rnd(-1, 1) : 0); + limb(node[0], node[1], ang, rnd(0.7, 1.1) * (isTangle ? 0.7 : 1), 1); + } + + if (isTangle || rng() < 0.6) { + barb(node, bias + rnd(-0.4, 0.4), rnd(8, 16) * (isTangle ? 1.5 : 1)); + } + + if (isTangle && rng() < 0.5) { + ornament(node, bias, 0.8); } - if (rng() < 0.6) barb(node, bias + rnd(-0.4, 0.4), rnd(8, 16)); } const half = parts.join(''); diff --git a/frontend/src/styles/partials/70-cybersigil.css b/frontend/src/styles/partials/70-cybersigil.css index c76b302..a45156d 100644 --- a/frontend/src/styles/partials/70-cybersigil.css +++ b/frontend/src/styles/partials/70-cybersigil.css @@ -218,6 +218,13 @@ html.cybersigil body::after { } /* 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 { + animation: cs-haptic 3s ease-in-out infinite; +} +@keyframes cs-haptic { + 0%, 100% { stroke-width: 2.8; filter: drop-shadow(0 0 2px var(--sky)); } + 50% { stroke-width: 3.4; filter: drop-shadow(0 0 8px var(--sky)); } +} .cybersigil .cs-sigil .cs-sig-fil { stroke-width: 0.6; opacity: 0.35; } .cybersigil .cs-sigil .cs-sig-barb { stroke-width: 1.5; } .cybersigil .cs-sigil .cs-sig-orn {