// Bauhaus-poster geometric marks. Each is a minimal SVG mark that can live
// inside a blob. Organ "icons" are expressed in the same mark vocabulary
// (circle+dot = eye, chevron stack = ear, squiggle = mouth, etc).
const strokeColor = 'var(--ink)';
// --- Generic marks used as decoration inside blobs ---
const DotGrid = ({ cols = 5, rows = 5, gap = 14 }) => {
const dots = [];
for (let r = 0; r < rows; r++)
for (let c = 0; c < cols; c++)
dots.push();
return (
);
};
const Squiggle = ({ w = 60, amp = 10, cycles = 3 }) => {
const pts = [];
const step = w / (cycles * 20);
for (let i = 0; i <= cycles * 20; i++) {
const x = i * step;
const y = Math.sin((i / 20) * Math.PI * 2) * amp;
pts.push(`${i === 0 ? 'M' : 'L'} ${x} ${y}`);
}
return (
);
};
const Plus = ({ s = 24, w = 2 }) => (
);
const XMark = ({ s = 18, w = 2 }) => (
);
const Sunburst = ({ s = 60, rays = 16 }) => {
const lines = [];
const cx = s / 2, cy = s / 2, r1 = 4, r2 = s / 2 - 2;
for (let i = 0; i < rays; i++) {
const a = (i / rays) * Math.PI * 2;
lines.push(
);
}
return ;
};
// Hatched parallel lines (top-right of yellow blob)
const Hatch = ({ w = 60, count = 5, gap = 5 }) => {
const lines = [];
for (let i = 0; i < count; i++) {
lines.push(
);
}
return ;
};
const Target = ({ s = 28 }) => (
);
const Bowtie = ({ s = 26 }) => (
);
const Arrow = ({ s = 28 }) => (
);
const SquareFilled = ({ s = 26 }) => (
);
const Zigzag = ({ w = 70, h = 18 }) => (
);
const SmallPlus = ({ s = 14 }) => (
);
// --- Organ glyphs in the same vocabulary ---
// EYE: Lucide-style line-art eye. Oval almond shape, iris circle, pupil tracks cursor.
const EyeGlyph = ({ pupilX = 0, pupilY = 0, blink = false, s = 160 }) => {
const px = Math.max(-1, Math.min(1, pupilX)) * 3;
const py = Math.max(-1, Math.min(1, pupilY)) * 1.6;
return (
);
};
// MOUTH: a smooth squiggle that opens/closes by amplitude
// MOUTH: doodle-style three-line mouth (upper lip with cupid's bow, mid line,
// lower lip). When `open` rises, the lower curve drops to suggest an open mouth.
const MouthGlyph = ({ open = 0, s = 160 }) => {
const drop = open * 18; // px in viewBox units
return (
);
};
// EAR: Lucide-style minimal line icon (MIT licensed).
// Clean single-stroke profile with inner curl — reads as an ear, not a face.
const EarGlyph = ({ listening = false, s = 110 }) => {
const W = s, H = s;
return (
);
};
// BRAIN: doodle-style line-art brain — twin lobes with scribbled inner folds.
// Pulse subtly scales the whole illustration for the thinking state.
const BrainGlyph = ({ pulse = 0, s = 150 }) => {
const scale = 1 + pulse * 0.035;
return (
);
};
// HAND: Lucide "hand" icon — four fingers + thumb palm silhouette.
const HandGlyph = ({ s = 90 }) => (
);
// --- minimalist scattered marks for the ear block ---
const TriangleOutline = ({ s = 24 }) => (
);
const DotPair = ({ s = 12 }) => (
);
const ArcMark = ({ s = 32 }) => (
);
const Paren = ({ s = 18 }) => (
);
const DashedLine = ({ w = 60, h = 4 }) => (
);
const Asterisk = ({ s = 18 }) => (
);
window.Marks = {
DotGrid, Squiggle, Plus, XMark, Sunburst, Hatch, Target,
Bowtie, Arrow, SquareFilled, Zigzag, SmallPlus,
TriangleOutline, DotPair, ArcMark, Paren, DashedLine, Asterisk,
EyeGlyph, MouthGlyph, EarGlyph, BrainGlyph, HandGlyph,
};