CIF Igbo

Cultural Interaction Framework — Atomic Icon Set

34 interface atoms derived directly from Igbo cultural principles. Each icon is traceable to specific anthropological evidence — not generic symbols, but culturally-grounded visual vocabulary invented as if this civilization had independently created digital interfaces.

34 Atoms
Stroke Philosophy: Uli-inspired organic lines  |  Color Palette: Earth (Ala), Ochre (Uli), Gold (Ancestors)  |  Abstraction: Derived from real objects, reduced to relational geometry
Button
The Kolanut (Oji Igbo)
Principles: 29 (Kolanut Covenant), 13 (Rhythmic Predictability), 12 (Greeting Protocol)
Every gathering begins with the kolanut. Its four cotyledons represent the four market days (Eke, Orie, Afo, Nkwo) — the cosmological order that structures all social life. The button is the interface equivalent: the first act of engagement that invokes shared order.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .kola-lobe { fill: none; stroke: #C4A35A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .kola-center { fill: #C4A35A; } .kola-detail { fill: none; stroke: #8B7355; stroke-width: 1.2; stroke-linecap: round; } </style> </defs> <path class="kola-lobe" d="M 24 24 C 20 18, 14 16, 12 20 C 10 24, 14 28, 24 24"/> <path class="kola-lobe" d="M 24 24 C 28 18, 34 16, 36 20 C 38 24, 34 28, 24 24"/> <path class="kola-lobe" d="M 24 24 C 28 30, 34 32, 36 28 C 38 24, 34 20, 24 24"/> <path class="kola-lobe" d="M 24 24 C 20 30, 14 32, 12 28 C 10 24, 14 20, 24 24"/> <circle class="kola-center" cx="24" cy="24" r="3"/> <path class="kola-detail" d="M 24 24 Q 18 18 16 16"/> <path class="kola-detail" d="M 24 24 Q 30 18 32 16"/> <path class="kola-detail" d="M 24 24 Q 30 30 32 32"/> <path class="kola-detail" d="M 24 24 Q 18 30 16 32"/> </svg>
Icon Button
The Ofo Staff
Principles: 26 (Sacred Object Protocols), 3 (Spatial Legibility)
The ofo is the physical symbol of authority, truth, and justice held by lineage heads. It is inherited, not self-claimed. An icon button is a held object — authority that derives from lineage continuity rather than personal assertion.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .ofo-staff { fill: none; stroke: #5C3D2E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .ofo-detail { fill: none; stroke: #8B6914; stroke-width: 1.5; stroke-linecap: round; } </style> </defs> <line class="ofo-staff" x1="24" y1="40" x2="24" y2="14"/> <path class="ofo-staff" d="M 24 14 C 24 10, 18 8, 14 10"/> <path class="ofo-staff" d="M 24 14 C 24 10, 30 8, 34 10"/> <path class="ofo-detail" d="M 24 20 C 20 18, 16 16, 14 14"/> <path class="ofo-detail" d="M 24 20 C 28 18, 32 16, 34 14"/> <ellipse class="ofo-detail" cx="24" cy="38" rx="4" ry="1.5"/> <line class="ofo-detail" x1="22" y1="28" x2="26" y2="28"/> <line class="ofo-detail" x1="22" y1="32" x2="26" y2="32"/> </svg>
Text Link
The Woven Thread (Akwa)
Principles: 40 (Gendered Craft Domains), 50 (Reciprocity)
In Igbo thought, relationships are woven, not built. The thread (akwa) connects two points through interlacing. A link is not a bridge but a woven bond — each crossing reinforces the connection.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .thread { fill: none; stroke: #B87333; stroke-width: 2; stroke-linecap: round; } .thread-accent { fill: none; stroke: #D4A574; stroke-width: 1.5; stroke-linecap: round; } </style> </defs> <path class="thread" d="M 8 24 C 14 16, 20 16, 24 24 C 28 32, 34 32, 40 24"/> <path class="thread-accent" d="M 12 20 L 16 28"/> <path class="thread-accent" d="M 20 20 L 24 28"/> <path class="thread-accent" d="M 28 20 L 32 28"/> <path class="thread-accent" d="M 36 20 L 40 28"/> <circle class="thread" cx="8" cy="24" r="2"/> <circle class="thread" cx="40" cy="24" r="2"/> </svg>
Avatar
The Ikenga (Personal Achievement Shrine)
Principles: 42 (Personal Achievement Shrines), 48 (Distributed Self)
The ikenga is not a face — it is a spiritual partner containing one's chi (personal spirit). It encodes destiny, achievement, and ancestral connection through horns (power), sword (achievement), and head (victory). The avatar should represent distributed personhood, not mere appearance.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .ikenga-horn { fill: none; stroke: #8B4513; stroke-width: 2.5; stroke-linecap: round; } .ikenga-body { fill: none; stroke: #5C3D2E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .ikenga-detail { fill: none; stroke: #A0522D; stroke-width: 1.5; stroke-linecap: round; } </style> </defs> <path class="ikenga-horn" d="M 24 20 C 20 12, 16 8, 12 10 C 10 12, 12 16, 16 18"/> <path class="ikenga-horn" d="M 24 20 C 28 12, 32 8, 36 10 C 38 12, 36 16, 32 18"/> <path class="ikenga-body" d="M 24 20 L 24 32"/> <path class="ikenga-body" d="M 18 26 L 24 22 L 30 26"/> <line class="ikenga-detail" x1="30" y1="22" x2="30" y2="36"/> <line class="ikenga-detail" x1="27" y1="26" x2="33" y2="26"/> <path class="ikenga-detail" d="M 18 36 L 30 36"/> <path class="ikenga-detail" d="M 20 40 L 28 40"/> </svg>
Identity Marker
The Naming Ceremony (Igba Afa)
Principles: 37, 65 (Ontological Naming)
An Igbo name is ontological — it encodes destiny, lineage, and spiritual diagnosis. The multi-name structure (given name, praise name, spirit name, market-day name) creates layered identity. The marker shows four concentric rings, each a different name-layer.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .id-ring { fill: none; stroke: #4A6741; stroke-width: 1.5; stroke-linecap: round; } .id-core { fill: #4A6741; } .id-accent { fill: none; stroke: #8FBC8F; stroke-width: 1; stroke-linecap: round; } </style> </defs> <circle class="id-ring" cx="24" cy="24" r="20"/> <circle class="id-ring" cx="24" cy="24" r="14"/> <circle class="id-ring" cx="24" cy="24" r="8"/> <circle class="id-core" cx="24" cy="24" r="3"/> <line class="id-accent" x1="24" y1="4" x2="24" y2="10"/> <line class="id-accent" x1="24" y1="16" x2="24" y2="20"/> <line class="id-accent" x1="24" y1="28" x2="24" y2="32"/> <circle class="id-accent" cx="24" cy="4" r="1.5"/> <circle class="id-accent" cx="44" cy="24" r="1.5"/> <circle class="id-accent" cx="24" cy="44" r="1.5"/> <circle class="id-accent" cx="4" cy="24" r="1.5"/> </svg>
Badge
The Title (Ozo/Nze) with Ofo Staff
Principles: 55 (Economy of Honor), 26 (Sacred Object Protocols)
Titles are purchased with wealth but earned through character. The badge is not decoration — it is the visible conversion of economic success into public honor. The ofo staff within the honor ring makes status legible and accountable.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .badge-staff { fill: none; stroke: #8B6914; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .badge-ring { fill: none; stroke: #C4A35A; stroke-width: 2; stroke-linecap: round; } .badge-detail { fill: none; stroke: #D4AF37; stroke-width: 1.2; stroke-linecap: round; } </style> </defs> <circle class="badge-ring" cx="24" cy="24" r="18"/> <line class="badge-staff" x1="24" y1="36" x2="24" y2="12"/> <path class="badge-staff" d="M 24 12 C 24 9, 20 7, 17 9"/> <path class="badge-staff" d="M 24 12 C 24 9, 28 7, 31 9"/> <path class="badge-detail" d="M 8 24 Q 12 20, 16 24 Q 20 28, 24 24"/> <path class="badge-detail" d="M 24 24 Q 28 20, 32 24 Q 36 28, 40 24"/> <path class="badge-detail" d="M 24 42 L 22 44 L 24 46 L 26 44 Z"/> </svg>
Reputation Indicator
The Yam Barn (Oba Ji)
Principles: 55 (Economy of Honor), 58 (Agricultural Currency)
Yam barns are public and visible — you cannot hide wealth. The size and quality of your barn = your reputation. Stacked yams represent accumulated social capital that is perishable (must be maintained) and publicly accountable.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .yam-barn { fill: none; stroke: #CD853F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .yam-detail { fill: none; stroke: #8B4513; stroke-width: 1.2; stroke-linecap: round; } .barn-post { fill: none; stroke: #5C3D2E; stroke-width: 2.5; stroke-linecap: round; } </style> </defs> <line class="barn-post" x1="10" y1="40" x2="10" y2="16"/> <line class="barn-post" x1="38" y1="40" x2="38" y2="16"/> <line class="barn-post" x1="8" y1="16" x2="40" y2="16"/> <ellipse class="yam-barn" cx="16" cy="20" rx="5" ry="3"/> <ellipse class="yam-barn" cx="24" cy="20" rx="5" ry="3"/> <ellipse class="yam-barn" cx="32" cy="20" rx="5" ry="3"/> <ellipse class="yam-barn" cx="12" cy="28" rx="5" ry="3"/> <ellipse class="yam-barn" cx="20" cy="28" rx="5" ry="3"/> <ellipse class="yam-barn" cx="28" cy="28" rx="5" ry="3"/> <ellipse class="yam-barn" cx="36" cy="28" rx="5" ry="3"/> <ellipse class="yam-barn" cx="16" cy="36" rx="5" ry="3"/> <ellipse class="yam-barn" cx="24" cy="36" rx="5" ry="3"/> <ellipse class="yam-barn" cx="32" cy="36" rx="5" ry="3"/> <path class="yam-detail" d="M 14 20 Q 16 18, 18 20"/> <path class="yam-detail" d="M 22 20 Q 24 18, 26 20"/> <path class="yam-detail" d="M 30 20 Q 32 18, 34 20"/> </svg>
Input
The Divination Tray
Principles: 28 (Holistic Healthcare/Dibia), 47 (Celestial Divination)
The dibia reads patterns in scattered materials on a sacred surface. An input is where questions are laid for interpretation — a sacred surface where offerings are placed and meaning is divined from arrangement.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .tray { fill: none; stroke: #8B6914; stroke-width: 2; stroke-linecap: round; } .tray-inner { fill: none; stroke: #A0522D; stroke-width: 1.5; stroke-linecap: round; } .tray-content { fill: #CD853F; } .tray-mark { fill: none; stroke: #5C3D2E; stroke-width: 1; stroke-linecap: round; } </style> </defs> <ellipse class="tray" cx="24" cy="26" rx="18" ry="12"/> <ellipse class="tray-inner" cx="24" cy="26" rx="14" ry="9"/> <circle class="tray-content" cx="18" cy="24" r="2"/> <circle class="tray-content" cx="24" cy="28" r="2.5"/> <circle class="tray-content" cx="30" cy="24" r="1.8"/> <circle class="tray-content" cx="22" cy="22" r="1.5"/> <circle class="tray-content" cx="28" cy="28" r="1.5"/> <path class="tray-mark" d="M 16 26 Q 20 24, 24 26"/> <path class="tray-mark" d="M 24 26 Q 28 28, 32 26"/> <line class="tray" x1="24" y1="14" x2="24" y2="8"/> <circle class="tray" cx="24" cy="6" r="2"/> </svg>
Textarea
The Palm Leaf Fan (Akupe)
Principles: 35 (Oral Tradition), 6 (Distributed Memory)
The palm leaf fan spreads embers during storytelling. A textarea is where stories unfold — where the oral tradition is performed. The fan spreads words like it spreads fire: gradually, directionally, with breath.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .fan-spine { fill: none; stroke: #5C3D2E; stroke-width: 2.5; stroke-linecap: round; } .fan-leaf { fill: none; stroke: #6B8E23; stroke-width: 1.5; stroke-linecap: round; } .fan-detail { fill: none; stroke: #8FBC8F; stroke-width: 1; stroke-linecap: round; } </style> </defs> <line class="fan-spine" x1="24" y1="44" x2="24" y2="20"/> <path class="fan-leaf" d="M 24 20 C 16 14, 10 10, 8 12"/> <path class="fan-leaf" d="M 24 20 C 18 12, 14 6, 16 4"/> <path class="fan-leaf" d="M 24 20 C 24 10, 24 4, 24 2"/> <path class="fan-leaf" d="M 24 20 C 30 12, 34 6, 32 4"/> <path class="fan-leaf" d="M 24 20 C 32 14, 38 10, 40 12"/> <path class="fan-detail" d="M 12 12 Q 14 14, 16 16"/> <path class="fan-detail" d="M 18 8 Q 20 12, 22 16"/> <path class="fan-detail" d="M 30 8 Q 28 12, 26 16"/> <path class="fan-detail" d="M 36 12 Q 34 14, 32 16"/> <ellipse class="fan-spine" cx="24" cy="20" rx="3" ry="1.5"/> </svg>
Search Field
The Dibia's Searching Eye
Principles: 28 (Dibia/Divination), 47 (Celestial Divination)
The dibia searches for meaning in patterns — in casting shells, bird flight, palm lines. Search is divination: reading signs to find what is hidden. The eye observes; the scattered elements are what is sought.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .search-eye { fill: none; stroke: #4A6741; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .search-pupil { fill: #4A6741; } .search-sign { fill: none; stroke: #8FBC8F; stroke-width: 1.5; stroke-linecap: round; } .search-ray { fill: none; stroke: #6B8E23; stroke-width: 1; stroke-linecap: round; } </style> </defs> <path class="search-eye" d="M 6 24 C 12 14, 20 10, 24 10 C 28 10, 36 14, 42 24 C 36 34, 28 38, 24 38 C 20 38, 12 34, 6 24 Z"/> <circle class="search-pupil" cx="24" cy="24" r="5"/> <circle class="search-eye" cx="24" cy="24" r="8"/> <circle class="search-sign" cx="12" cy="12" r="2"/> <path class="search-sign" d="M 36 10 L 38 12 L 36 14"/> <circle class="search-sign" cx="40" cy="36" r="2"/> <path class="search-sign" d="M 8 36 L 10 38 L 8 40"/> <line class="search-ray" x1="24" y1="6" x2="24" y2="2"/> <line class="search-ray" x1="38" y1="12" x2="42" y2="8"/> <line class="search-ray" x1="42" y1="24" x2="46" y2="24"/> <line class="search-ray" x1="38" y1="36" x2="42" y2="40"/> <line class="search-ray" x1="24" y1="42" x2="24" y2="46"/> </svg>
Checkbox
The Kolanut Covenant (Igba Ndu)
Principles: 29 (Kolanut Covenant), 33 (Self-Enforcing Agreements)
The kolanut is broken and shared to create a binding covenant. A checkbox is a small, sacred commitment. The unchecked state is the whole nut; checked is the broken, shared pieces — the covenant made visible.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .cb-whole { fill: none; stroke: #8B7355; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .cb-broken { fill: none; stroke: #C4A35A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } </style> </defs> <rect class="cb-whole" x="8" y="8" width="32" height="32" rx="4"/> <path class="cb-whole" d="M 24 20 C 20 18, 18 20, 18 24 C 18 28, 20 30, 24 30 C 28 30, 30 28, 30 24 C 30 20, 28 18, 24 20"/> </svg>
Radio Button
The Lunar Phases (Onwa)
Principles: 47 (Celestial Divination), 20 (Market Week as Temporal Commons)
The moon marks beginnings (new moon) and culminations (full moon). A radio button is a lunar phase — one option waxes to full while others wane. The four quarter markers = the four market days.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .moon-outer { fill: none; stroke: #C0C0C0; stroke-width: 2; stroke-linecap: round; } .moon-full { fill: #D4AF37; } .moon-crescent { fill: none; stroke: #B8860B; stroke-width: 1.5; stroke-linecap: round; } </style> </defs> <circle class="moon-outer" cx="24" cy="24" r="18"/> <circle class="moon-full" cx="24" cy="24" r="12"/> <path class="moon-crescent" d="M 24 14 C 28 14, 30 18, 30 24 C 30 30, 28 34, 24 34 C 26 30, 26 26, 26 24 C 26 22, 26 18, 24 14"/> <circle class="moon-outer" cx="24" cy="6" r="1.5"/> <circle class="moon-outer" cx="42" cy="24" r="1.5"/> <circle class="moon-outer" cx="24" cy="42" r="1.5"/> <circle class="moon-outer" cx="6" cy="24" r="1.5"/> </svg>
Toggle
The Compound Gate (Onu Uzo)
Principles: 2 (Threshold Friction), 10 (Controlled Access)
The compound gate controls access with graduated states: open, ajar, closed. A toggle is not binary — it is a threshold where social status is reinforced through the effort of crossing. The gate mediates, not separates.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .gate-frame { fill: none; stroke: #5C3D2E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .gate-door { fill: none; stroke: #8B6914; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gate-hinge { fill: #8B6914; } .gate-detail { fill: none; stroke: #A0522D; stroke-width: 1.2; stroke-linecap: round; } </style> </defs> <rect class="gate-frame" x="6" y="8" width="36" height="32" rx="2"/> <rect class="gate-door" x="8" y="10" width="14" height="28" rx="1"/> <path class="gate-door" d="M 26 10 L 40 14 L 40 34 L 26 38 Z"/> <circle class="gate-hinge" cx="26" cy="12" r="2"/> <circle class="gate-hinge" cx="26" cy="36" r="2"/> <line class="gate-detail" x1="24" y1="10" x2="24" y2="38"/> <path class="gate-detail" d="M 12 18 Q 15 20, 18 18"/> <path class="gate-detail" d="M 12 24 Q 15 26, 18 24"/> <path class="gate-detail" d="M 12 30 Q 15 32, 18 30"/> </svg>
Switch
The Two Hands Washing (Aka Nkwu Aka)
Principles: 49 (Restorative Justice), 50 (Reciprocity)
"One hand washes the other, and both wash the face." A switch is reciprocal activation — neither hand acts alone. The meeting point creates mutual obligation. Justice requires mutual accommodation, not unilateral action.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .hand-left { fill: none; stroke: #8B4513; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .hand-right { fill: none; stroke: #A0522D; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .hand-palm { fill: none; stroke: #CD853F; stroke-width: 1.5; stroke-linecap: round; } </style> </defs> <path class="hand-left" d="M 8 24 C 8 20, 12 16, 16 18 C 18 19, 20 22, 20 24"/> <path class="hand-left" d="M 16 18 L 14 14"/> <path class="hand-left" d="M 18 20 L 18 16"/> <path class="hand-left" d="M 20 22 L 22 18"/> <path class="hand-right" d="M 40 24 C 40 20, 36 16, 32 18 C 30 19, 28 22, 28 24"/> <path class="hand-right" d="M 32 18 L 34 14"/> <path class="hand-right" d="M 30 20 L 30 16"/> <path class="hand-right" d="M 28 22 L 26 18"/> <circle class="hand-palm" cx="24" cy="24" r="4"/> <line class="hand-left" x1="8" y1="24" x2="4" y2="24"/> <line class="hand-right" x1="40" y1="24" x2="44" y2="24"/> </svg>
Chip
The Single Kolanut Lobe
Principles: 29 (Kolanut Covenant)
A chip is a single lobe broken from the whole kolanut — a fragment of a larger covenant, a small commitment that is part of a greater whole. The break edge shows where it was separated; the core seed contains the potential for renewal.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .chip-lobe { fill: none; stroke: #C4A35A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .chip-vein { fill: none; stroke: #8B7355; stroke-width: 1.2; stroke-linecap: round; } .chip-core { fill: #C4A35A; } </style> </defs> <path class="chip-lobe" d="M 16 20 C 12 18, 10 22, 12 28 C 14 34, 20 36, 24 32 C 28 28, 26 22, 22 20 C 20 18, 18 18, 16 20"/> <path class="chip-vein" d="M 14 24 Q 18 22, 22 24"/> <path class="chip-vein" d="M 16 28 Q 20 26, 24 28"/> <path class="chip-lobe" d="M 22 20 C 24 18, 26 16, 28 18 C 30 20, 28 24, 26 26"/> <circle class="chip-core" cx="18" cy="26" r="2"/> </svg>
Tag
The Uli Body Mark
Principles: 41 (Visual Jurisprudence)
Uli patterns are painted on the body after conflict resolution. Beauty = morality (nma means both). A tag is a visible, permanent record of reconciliation — the aesthetic act itself becomes ethical enforcement.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .tag-body { fill: none; stroke: #4A6741; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .tag-uli { fill: none; stroke: #6B8E23; stroke-width: 1.5; stroke-linecap: round; } .tag-accent { fill: none; stroke: #8FBC8F; stroke-width: 1; stroke-linecap: round; } </style> </defs> <path class="tag-body" d="M 12 12 L 36 12 L 42 24 L 24 42 L 6 24 Z"/> <path class="tag-uli" d="M 18 18 L 18 30"/> <path class="tag-uli" d="M 24 16 L 24 32"/> <path class="tag-uli" d="M 30 18 L 30 30"/> <path class="tag-accent" d="M 16 22 L 18 20 L 20 22"/> <path class="tag-accent" d="M 22 24 L 24 22 L 26 24"/> <path class="tag-accent" d="M 28 22 L 30 20 L 32 22"/> <path class="tag-accent" d="M 24 36 C 22 36, 20 34, 20 32 C 20 30, 22 28, 24 28"/> </svg>
Pill
The Palm Wine Calabash
Principles: 61 (Palm Wine as Social Lubrication)
The palm wine calabash is rounded, containing, social. A pill is a small container of social substance, ready to be shared. The wine level indicates fullness; the binding ropes show it is held together for distribution.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .pill-body { fill: none; stroke: #8B6914; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .pill-neck { fill: none; stroke: #A0522D; stroke-width: 2; stroke-linecap: round; } .pill-detail { fill: none; stroke: #CD853F; stroke-width: 1.2; stroke-linecap: round; } </style> </defs> <ellipse class="pill-body" cx="24" cy="28" rx="14" ry="12"/> <path class="pill-neck" d="M 18 18 C 18 14, 20 10, 24 10 C 28 10, 30 14, 30 18"/> <ellipse class="pill-neck" cx="24" cy="10" rx="6" ry="2"/> <path class="pill-detail" d="M 12 28 Q 18 26, 24 28 Q 30 30, 36 28"/> <path class="pill-detail" d="M 14 32 Q 18 30, 24 32 Q 30 34, 34 32"/> <circle class="pill-detail" cx="24" cy="24" r="1.5"/> </svg>
Divider
The Compound Threshold (Uzo)
Principles: 1 (Gradient Privacy), 2 (Threshold Friction)
The boundary between obi and wives' quarters is not a wall but a graduated threshold. A divider mediates access with increasing density toward the center (the gate), then decreasing — privacy as gradient, not barrier.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .div-threshold { fill: none; stroke: #5C3D2E; stroke-width: 2.5; stroke-linecap: round; } .div-grad { fill: none; stroke: #8B7355; stroke-width: 1.5; stroke-linecap: round; } .div-mark { fill: none; stroke: #A0522D; stroke-width: 1; stroke-linecap: round; } </style> </defs> <line class="div-threshold" x1="4" y1="24" x2="44" y2="24"/> <line class="div-grad" x1="8" y1="20" x2="8" y2="28"/> <line class="div-grad" x1="14" y1="18" x2="14" y2="30"/> <line class="div-grad" x1="20" y1="16" x2="20" y2="32"/> <path class="div-threshold" d="M 22 16 L 26 16 L 26 32 L 22 32"/> <line class="div-threshold" x1="24" y1="16" x2="24" y2="32"/> <line class="div-grad" x1="28" y1="16" x2="28" y2="32"/> <line class="div-grad" x1="34" y1="18" x2="34" y2="30"/> <line class="div-grad" x1="40" y1="20" x2="40" y2="28"/> <path class="div-mark" d="M 6 14 Q 12 10, 18 14 Q 24 18, 30 14 Q 36 10, 42 14"/> <path class="div-mark" d="M 6 34 Q 12 38, 18 34 Q 24 30, 30 34 Q 36 38, 42 34"/> </svg>
Tooltip
The Elder's Whisper
Principles: 31 (Apprenticeship), 12 (Greeting Protocol)
Elder guidance is given quietly, close to the ear, not shouted. A tooltip is elder wisdom: brief, contextual, spoken only when needed. The hand cups the mouth; the breath travels in waves to the receiving ear.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .tip-hand { fill: none; stroke: #8B4513; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .tip-mouth { fill: none; stroke: #A0522D; stroke-width: 2; stroke-linecap: round; } .tip-breath { fill: none; stroke: #CD853F; stroke-width: 1.2; stroke-linecap: round; } </style> </defs> <path class="tip-hand" d="M 12 28 C 10 24, 12 20, 16 20 C 18 20, 20 22, 20 24"/> <path class="tip-hand" d="M 16 20 L 14 16"/> <path class="tip-hand" d="M 18 22 L 18 18"/> <path class="tip-hand" d="M 20 24 L 22 20"/> <path class="tip-mouth" d="M 24 22 C 26 22, 28 24, 28 26 C 28 28, 26 30, 24 30"/> <path class="tip-breath" d="M 30 24 Q 34 22, 38 24"/> <path class="tip-breath" d="M 32 26 Q 36 28, 40 26"/> <path class="tip-breath" d="M 30 28 Q 34 30, 38 28"/> <path class="tip-hand" d="M 42 24 C 44 24, 44 26, 44 28 C 44 30, 42 30, 40 28" opacity="0.5"/> </svg>
Label
The Market Display (Ahia)
Principles: 56 (Market as Social Space)
The market is not merely transactional — goods are arranged visibly for social legibility. The Omu (market queen) ensures all is legible. A label is a market stall: goods arranged in rows, the quality stamp visible.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .label-frame { fill: none; stroke: #8B6914; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .label-goods { fill: none; stroke: #A0522D; stroke-width: 1.5; stroke-linecap: round; } .label-accent { fill: #CD853F; } </style> </defs> <path class="label-frame" d="M 8 12 L 40 12 L 40 36 L 8 36 Z"/> <path class="label-frame" d="M 4 12 L 8 8 L 40 8 L 44 12"/> <circle class="label-goods" cx="16" cy="20" r="3"/> <circle class="label-goods" cx="24" cy="20" r="3"/> <circle class="label-goods" cx="32" cy="20" r="3"/> <ellipse class="label-goods" cx="16" cy="30" rx="4" ry="2"/> <ellipse class="label-goods" cx="24" cy="30" rx="4" ry="2"/> <ellipse class="label-goods" cx="32" cy="30" rx="4" ry="2"/> <circle class="label-accent" cx="40" cy="16" r="2"/> </svg>
Progress Indicator
The Age-Grade Ladder
Principles: 23 (Age-Graded Career Ladders)
Progress is not a bar but a ladder of ceremonies. Each rung is a threshold (outing ceremony) marking transition between life stages. Completed grades are marked; the current position shows the threshold being crossed.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .prog-ladder { fill: none; stroke: #5C3D2E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .prog-rung { fill: none; stroke: #8B6914; stroke-width: 2; stroke-linecap: round; } .prog-mark { fill: #C4A35A; } .prog-detail { fill: none; stroke: #D4AF37; stroke-width: 1; stroke-linecap: round; } </style> </defs> <line class="prog-ladder" x1="16" y1="8" x2="16" y2="44"/> <line class="prog-ladder" x1="32" y1="8" x2="32" y2="44"/> <line class="prog-rung" x1="16" y1="12" x2="32" y2="12"/> <line class="prog-rung" x1="16" y1="20" x2="32" y2="20"/> <line class="prog-rung" x1="16" y1="28" x2="32" y2="28"/> <line class="prog-rung" x1="16" y1="36" x2="32" y2="36"/> <circle class="prog-mark" cx="24" cy="12" r="2.5"/> <circle class="prog-mark" cx="24" cy="20" r="2.5"/> <circle class="prog-mark" cx="24" cy="28" r="2.5"/> <path class="prog-detail" d="M 20 34 L 24 38 L 28 34"/> <circle class="prog-detail" cx="24" cy="36" r="1.5"/> </svg>
Loading Indicator
The Ekwe Drum (Slit Drum)
Principles: 14 (Sonic Communication), 44 (Sonic Sociality)
The ekwe announces emergencies and calls assemblies through rhythmic signatures. Loading is the drum summoning the community to wait and gather. The sound waves emanate from the slit; the pulse dots encode the rhythm pattern.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .load-drum { fill: none; stroke: #5C3D2E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .load-sound { fill: none; stroke: #8B6914; stroke-width: 1.5; stroke-linecap: round; } .load-pulse { fill: none; stroke: #C4A35A; stroke-width: 1; stroke-linecap: round; } </style> </defs> <path class="load-drum" d="M 16 12 C 12 16, 12 20, 16 24 C 20 28, 20 32, 16 36"/> <path class="load-drum" d="M 32 12 C 36 16, 36 20, 32 24 C 28 28, 28 32, 32 36"/> <line class="load-drum" x1="20" y1="24" x2="28" y2="24"/> <path class="load-sound" d="M 36 16 C 40 16, 42 20, 42 24"/> <path class="load-sound" d="M 36 24 C 40 24, 42 24, 44 24"/> <path class="load-sound" d="M 36 32 C 40 32, 42 28, 42 24"/> <circle class="load-pulse" cx="46" cy="20" r="1"/> <circle class="load-pulse" cx="46" cy="24" r="1.5"/> <circle class="load-pulse" cx="46" cy="28" r="1"/> <line class="load-drum" x1="8" y1="24" x2="14" y2="24"/> <circle class="load-drum" cx="8" cy="24" r="2"/> </svg>
Notification Dot
The Single Drum Pulse
Principles: 14 (Sonic Communication)
A single urgent drumbeat made visible. The notification is not a number but a sonic urgency — one pulse that demands attention. The expanding rings are the sound traveling; the wave lines are the rhythmic signature.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .notif-core { fill: #8B4513; } .notif-ring { fill: none; stroke: #A0522D; stroke-width: 2; stroke-linecap: round; } .notif-wave { fill: none; stroke: #CD853F; stroke-width: 1.5; stroke-linecap: round; } </style> </defs> <circle class="notif-core" cx="24" cy="24" r="6"/> <circle class="notif-ring" cx="24" cy="24" r="12"/> <circle class="notif-ring" cx="24" cy="24" r="18" opacity="0.6"/> <path class="notif-wave" d="M 32 16 Q 36 12, 40 16"/> <path class="notif-wave" d="M 32 32 Q 36 36, 40 32"/> <path class="notif-wave" d="M 16 32 Q 12 36, 8 32"/> <path class="notif-wave" d="M 16 16 Q 12 12, 8 16"/> </svg>
Status Indicator
The Yam Growth Stages
Principles: 58 (Agricultural Currency), 46 (Seasonal Morality)
Status is agricultural, not mechanical. The yam grows underground (hidden work), stems upward (visible progress), and flourishes leaves (the flourishing). The soil line separates hidden from visible; the growth stage shows where in the cycle.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .status-stem { fill: none; stroke: #6B8E23; stroke-width: 2; stroke-linecap: round; } .status-yam { fill: none; stroke: #CD853F; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .status-root { fill: none; stroke: #8B4513; stroke-width: 1.5; stroke-linecap: round; } .status-soil { fill: none; stroke: #5C3D2E; stroke-width: 2; stroke-linecap: round; } </style> </defs> <line class="status-soil" x1="8" y1="36" x2="40" y2="36"/> <ellipse class="status-yam" cx="24" cy="32" rx="8" ry="4"/> <path class="status-stem" d="M 24 28 C 24 24, 22 20, 24 16 C 26 12, 24 10, 24 8"/> <path class="status-stem" d="M 24 16 C 20 14, 18 12, 20 10"/> <path class="status-stem" d="M 24 20 C 28 18, 30 16, 28 14"/> <path class="status-root" d="M 18 34 C 16 36, 14 38, 12 38"/> <path class="status-root" d="M 30 34 C 32 36, 34 38, 36 38"/> <circle class="status-stem" cx="24" cy="8" r="2"/> </svg>
Timestamp
The Four-Day Market Week (Izu) + Moon Phases
Principles: 13, 20, 45 (Market Week / Rhythmic Periodicity)
Time is cyclical, not linear. The four day-markers (Eke, Orie, Afo, Nkwo) structure all activity. The moon phase shows where in the cycle. The active day is filled; others await their turn in the eternal rotation.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .time-cycle { fill: none; stroke: #C0C0C0; stroke-width: 1.5; stroke-linecap: round; } .time-day { fill: none; stroke: #4A6741; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .time-active { fill: #4A6741; } .time-moon { fill: none; stroke: #D4AF37; stroke-width: 1.5; stroke-linecap: round; } </style> </defs> <circle class="time-cycle" cx="24" cy="24" r="18"/> <path class="time-day" d="M 24 8 L 24 12"/> <circle class="time-active" cx="24" cy="6" r="2"/> <path class="time-day" d="M 40 24 L 36 24"/> <circle class="time-cycle" cx="42" cy="24" r="1.5"/> <path class="time-day" d="M 24 40 L 24 36"/> <circle class="time-cycle" cx="24" cy="42" r="1.5"/> <path class="time-day" d="M 8 24 L 12 24"/> <circle class="time-cycle" cx="6" cy="24" r="1.5"/> <path class="time-moon" d="M 24 14 C 28 14, 30 18, 30 24 C 30 30, 28 34, 24 34 C 26 30, 26 26, 26 24 C 26 22, 26 18, 24 14"/> <circle class="time-active" cx="24" cy="24" r="3"/> </svg>
Reaction Token
The Palm Wine Offering
Principles: 61 (Palm Wine), 50 (Reciprocity)
Palm wine is shared in response to news — a social reaction that is also a gift. Reactions are not just feelings; they are social investments. The cup extended is the offering; the wine level shows the depth of response.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .react-cup { fill: none; stroke: #8B6914; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .react-wine { fill: none; stroke: #CD853F; stroke-width: 2; stroke-linecap: round; } .react-offer { fill: none; stroke: #D4AF37; stroke-width: 1.5; stroke-linecap: round; } </style> </defs> <path class="react-cup" d="M 16 20 C 14 24, 14 32, 18 36 C 20 38, 28 38, 30 36 C 34 32, 34 24, 32 20"/> <ellipse class="react-cup" cx="24" cy="20" rx="8" ry="3"/> <ellipse class="react-wine" cx="24" cy="26" rx="6" ry="2"/> <path class="react-offer" d="M 32 28 C 36 26, 38 24, 40 22"/> <path class="react-offer" d="M 38 20 L 42 22 L 40 26"/> <path class="react-offer" d="M 16 30 Q 24 28, 32 30"/> </svg>
Mention Token
The Greeting Gesture ("Kedu?")
Principles: 12 (Greeting as Social Handshake)
To mention is to greet — to acknowledge personhood. The raised hand with slight bow is the ontological affirmation. The respect lines show social distance being acknowledged and bridged through the greeting ritual.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .mention-hand { fill: none; stroke: #8B4513; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .mention-bow { fill: none; stroke: #A0522D; stroke-width: 2; stroke-linecap: round; } .mention-respect { fill: none; stroke: #CD853F; stroke-width: 1.2; stroke-linecap: round; } </style> </defs> <path class="mention-bow" d="M 24 12 C 28 12, 30 16, 28 20 C 26 24, 22 24, 20 20"/> <path class="mention-hand" d="M 28 20 C 30 16, 32 12, 34 10 C 36 8, 38 10, 36 12"/> <path class="mention-hand" d="M 34 10 L 36 8"/> <path class="mention-hand" d="M 36 12 L 38 10"/> <path class="mention-bow" d="M 24 24 C 22 28, 20 32, 18 36"/> <path class="mention-respect" d="M 8 20 Q 12 18, 16 20"/> <path class="mention-respect" d="M 8 24 Q 12 22, 16 24"/> <path class="mention-respect" d="M 8 28 Q 12 26, 16 28"/> </svg>
Hashtag Token
The Uli Pattern Grid
Principles: 41 (Visual Jurisprudence)
Uli patterns encode moral meaning in geometric form. A hashtag is a Uli mark: vertical lines (the moral framework) crossed by chevron weaves (social interlacing). The dots at intersections are the points of shared meaning.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .hash-uli { fill: none; stroke: #4A6741; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .hash-accent { fill: none; stroke: #6B8E23; stroke-width: 1.5; stroke-linecap: round; } .hash-dot { fill: #8FBC8F; } </style> </defs> <line class="hash-uli" x1="16" y1="8" x2="16" y2="40"/> <line class="hash-uli" x1="32" y1="8" x2="32" y2="40"/> <path class="hash-uli" d="M 8 16 L 12 20 L 16 16 L 20 20 L 24 16 L 28 20 L 32 16 L 36 20 L 40 16"/> <path class="hash-uli" d="M 8 32 L 12 36 L 16 32 L 20 36 L 24 32 L 28 36 L 32 32 L 36 36 L 40 32"/> <circle class="hash-dot" cx="16" cy="24" r="2"/> <circle class="hash-dot" cx="32" cy="24" r="2"/> <path class="hash-accent" d="M 24 8 C 26 8, 26 10, 24 10 C 22 10, 22 12, 24 12"/> <path class="hash-accent" d="M 24 40 C 26 40, 26 38, 24 38 C 22 38, 22 36, 24 36"/> </svg>
Verification Marker
The Ofo Staff with Ancestral Aura
Principles: 26 (Sacred Object Protocols)
Verification is not a checkmark — it is the holding of the ofo staff, which derives legitimacy from ancestral lineage. The glow rings are the ancestral aura; the notch marks are generations of inherited authority.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .verify-staff { fill: none; stroke: #8B6914; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .verify-ancestral { fill: none; stroke: #C4A35A; stroke-width: 1.5; stroke-linecap: round; } .verify-glow { fill: none; stroke: #D4AF37; stroke-width: 1; stroke-linecap: round; } </style> </defs> <circle class="verify-glow" cx="24" cy="24" r="20" opacity="0.3"/> <circle class="verify-glow" cx="24" cy="24" r="16" opacity="0.5"/> <line class="verify-staff" x1="24" y1="40" x2="24" y2="12"/> <path class="verify-staff" d="M 24 12 C 24 8, 20 6, 16 8"/> <path class="verify-staff" d="M 24 12 C 24 8, 28 6, 32 8"/> <path class="verify-ancestral" d="M 24 16 C 20 14, 16 12, 14 10"/> <path class="verify-ancestral" d="M 24 16 C 28 14, 32 12, 34 10"/> <ellipse class="verify-staff" cx="24" cy="38" rx="4" ry="1.5"/> <line class="verify-ancestral" x1="22" y1="28" x2="26" y2="28"/> <line class="verify-ancestral" x1="22" y1="32" x2="26" y2="32"/> <line class="verify-ancestral" x1="22" y1="36" x2="26" y2="36"/> <circle class="verify-ancestral" cx="24" cy="6" r="2"/> </svg>
Presence Indicator
The Ancestral Flame
Principles: 52 (Temporal Community / Ancestor Veneration)
Presence is not a green dot — it is the eternal flame in the compound hearth that connects the household to the ancestors. The flame has layers (outer, inner, core) like the distributed self. Smoke rises to the ancestral realm.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .flame-outer { fill: none; stroke: #CD853F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .flame-inner { fill: none; stroke: #FF8C00; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .flame-core { fill: #FFD700; } .flame-base { fill: none; stroke: #8B4513; stroke-width: 2; stroke-linecap: round; } </style> </defs> <path class="flame-outer" d="M 24 36 C 18 36, 14 30, 16 24 C 18 18, 22 14, 24 10 C 26 14, 30 18, 32 24 C 34 30, 30 36, 24 36"/> <path class="flame-inner" d="M 24 32 C 20 32, 18 28, 19 24 C 20 20, 22 18, 24 16 C 26 18, 28 20, 29 24 C 30 28, 28 32, 24 32"/> <circle class="flame-core" cx="24" cy="24" r="3"/> <path class="flame-base" d="M 14 36 C 14 38, 18 40, 24 40 C 30 40, 34 38, 34 36"/> <path class="flame-outer" d="M 22 10 C 20 8, 20 6, 22 4" opacity="0.5"/> <path class="flame-outer" d="M 26 10 C 28 8, 28 6, 26 4" opacity="0.5"/> </svg>
Privacy Indicator
The Compound Gradient (Obi to Inner Quarters)
Principles: 1 (Gradient Privacy), 2 (Threshold Friction)
Privacy is progressive disclosure through nested spaces: compound wall (outer), obi veranda (middle), inner quarters (inner). The gate is the controlled access point. Each layer requires deliberate crossing.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .priv-outer { fill: none; stroke: #8B7355; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .priv-mid { fill: none; stroke: #A0522D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .priv-inner { fill: none; stroke: #5C3D2E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .priv-gate { fill: none; stroke: #8B4513; stroke-width: 2; stroke-linecap: round; } </style> </defs> <rect class="priv-outer" x="4" y="4" width="40" height="40" rx="2"/> <rect class="priv-mid" x="10" y="10" width="28" height="28" rx="2"/> <rect class="priv-inner" x="16" y="16" width="16" height="16" rx="2"/> <path class="priv-gate" d="M 20 16 L 20 12 L 28 12 L 28 16"/> <line class="priv-gate" x1="24" y1="12" x2="24" y2="8"/> <circle class="priv-gate" cx="24" cy="6" r="1.5"/> </svg>
Bookmark Marker
The Ancestral Shrine
Principles: 42 (Personal Achievement Shrines), 52 (Ancestor Veneration)
A bookmark is not a flag — it is an ancestral shrine where what matters is kept sacred. The stepped platform elevates; the roof shelters; the offering bowl maintains the relationship. The sacred object inside is the bookmarked content.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .book-shrine { fill: none; stroke: #5C3D2E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .book-platform { fill: none; stroke: #8B6914; stroke-width: 2; stroke-linecap: round; } .book-offering { fill: none; stroke: #C4A35A; stroke-width: 1.5; stroke-linecap: round; } .book-sacred { fill: #C4A35A; } </style> </defs> <path class="book-platform" d="M 8 40 L 12 36 L 36 36 L 40 40"/> <path class="book-platform" d="M 12 36 L 14 32 L 34 32 L 36 36"/> <path class="book-shrine" d="M 16 32 L 16 20 C 16 16, 20 12, 24 12 C 28 12, 32 16, 32 20 L 32 32"/> <path class="book-shrine" d="M 12 20 L 24 8 L 36 20"/> <ellipse class="book-offering" cx="24" cy="30" rx="4" ry="2"/> <circle class="book-sacred" cx="24" cy="22" r="3"/> <line class="book-offering" x1="18" y1="28" x2="18" y2="24"/> <line class="book-offering" x1="30" y1="28" x2="30" y2="24"/> </svg>
Attachment Indicator
The Binding Rope
Principles: 50 (Reciprocity), 58 (Agricultural Currency)
Attachment is binding — rope holds yams in the barn, bundles for market, thatch on roofs. The knot is the relationship point; the loose ends show ongoing connection. Wrapping is relational, not merely functional.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .attach-rope { fill: none; stroke: #8B6914; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .attach-wrap { fill: none; stroke: #A0522D; stroke-width: 2; stroke-linecap: round; } .attach-knot { fill: none; stroke: #5C3D2E; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } </style> </defs> <rect class="attach-wrap" x="14" y="12" width="20" height="24" rx="2"/> <path class="attach-rope" d="M 10 16 C 14 14, 18 14, 22 16 C 26 18, 30 18, 34 16"/> <path class="attach-rope" d="M 10 32 C 14 34, 18 34, 22 32 C 26 30, 30 30, 34 32"/> <path class="attach-rope" d="M 18 10 C 16 14, 16 18, 18 22 C 20 26, 20 30, 18 34"/> <path class="attach-rope" d="M 30 10 C 32 14, 32 18, 30 22 C 28 26, 28 30, 30 34"/> <path class="attach-knot" d="M 20 22 C 22 20, 24 20, 26 22 C 28 24, 26 26, 24 26 C 22 26, 20 24, 20 22"/> <path class="attach-rope" d="M 22 24 C 20 28, 18 32, 16 36"/> <path class="attach-rope" d="M 26 24 C 28 28, 30 32, 32 36"/> </svg>
Scroll Indicator
The Ekwe Sound Waves (Continuing Message)
Principles: 14 (Sonic Communication)
Scrolling is the drum's call continuing — the message not yet finished. The sound waves expand downward (scroll direction) with pulse markers showing the rhythm. The faint upward echoes are what has already been heard.
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .scroll-wave { fill: none; stroke: #8B6914; stroke-width: 2.5; stroke-linecap: round; } .scroll-pulse { fill: none; stroke: #A0522D; stroke-width: 2; stroke-linecap: round; } .scroll-dot { fill: #CD853F; } </style> </defs> <ellipse class="scroll-wave" cx="24" cy="24" rx="4" ry="6"/> <path class="scroll-wave" d="M 16 28 C 14 32, 16 36, 20 38 C 24 40, 28 40, 32 38"/> <path class="scroll-pulse" d="M 12 32 C 10 38, 14 42, 20 44 C 26 46, 32 44, 36 40"/> <path class="scroll-pulse" d="M 8 36 C 6 44, 12 48, 20 48 C 28 48, 36 44, 40 38" opacity="0.5"/> <circle class="scroll-dot" cx="20" cy="34" r="1.5"/> <circle class="scroll-dot" cx="24" cy="38" r="1.5"/> <circle class="scroll-dot" cx="28" cy="34" r="1.5"/> <path class="scroll-wave" d="M 18 20 C 16 16, 18 12, 22 10" opacity="0.3"/> <path class="scroll-wave" d="M 30 20 C 32 16, 30 12, 26 10" opacity="0.3"/> </svg>