Initial commit: Kalei app — docs, mockups, logo, pitch deck
Complete project files including: - 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide) - Design system CSS with Inter font, jewel-tone palette, device frame scaling - Canonical 6-blade kaleidoscope logo (soft-elegance-final) - SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz) - Product docs, brand guidelines, technical architecture, build phases - Pitch deck and cost projections - Logo mockup iterations and finalists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
42
initial mockups/assets/ASSET-INDEX.md
Normal file
42
initial mockups/assets/ASSET-INDEX.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# Kalei SVG Asset Library — Index
|
||||
|
||||
All assets derive their visual language from the **soft-elegance-final.svg** logo: crystalline geometry, jewel tone gradients, glow filters, breathing animations, and prismatic color cycling.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description | Elements |
|
||||
|------|-------------|----------|
|
||||
| `design-system.css` | Shared CSS with all design tokens, components, animations | Colors, typography, buttons, cards, inputs, utilities |
|
||||
| `icons-tab-bar.svg` | 5 navigation tab icons | Turn ◇, Mirror ✦, Lens ◎, Gallery ▦, You ● — active + inactive states |
|
||||
| `icons-distortions.svg` | 10 cognitive distortion type icons | Catastrophizing, Black-and-White, Mind Reading, Fortune Telling, Personalization, Discounting Positives, Emotional Reasoning, Should Statements, Labeling, Overgeneralization |
|
||||
| `icons-actions.svg` | 30 action/UI icons | Navigation, actions, status, feature-specific, media controls |
|
||||
| `fragment-icons.svg` | Fragment ◇ variants + highlight effects | 5 sizes (xs-xl), 8 color states, highlight underline, highlight bubble |
|
||||
| `decorative-shards.svg` | Background decorative elements | Breathing aura, floating shards, prismatic divider, corner accent, hero shard, shard cluster, orbiting motes, edge shimmer |
|
||||
| `patterns-kaleidoscope.svg` | 7 kaleidoscope pattern variants | Turn pattern, Mirror pattern, Ritual pattern, Simple, Complex, Thumbnail, Hero |
|
||||
| `progress-indicators.svg` | 8 progress visualization types | Large/small rings, linear bar, step dots, streak calendar, ritual bar, timer, evidence counter |
|
||||
| `evidence-wall.svg` | Evidence Wall mosaic system | 5 tile shapes, 3 mosaic stages (early/mid/full), connection lines, empty state |
|
||||
| `loading-animations.svg` | 10 loading/animation states | Spinners, skeleton shimmers, Turn animation, breathing logo, AI thinking, success burst |
|
||||
| `device-chrome.svg` | 8 device frame elements | Status bar, tab bar frame, nav header, iOS keyboard, device frame, modal scrim, toast, input accessory |
|
||||
| `spectrum-visualizations.svg` | 5 Spectrum analytics visualizations | The River, Your Glass, Turn Impact, Rhythm Detection, Growth Trajectory |
|
||||
|
||||
## Color Reference
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Void | `#050508` | Deepest background |
|
||||
| Kalei Navy | `#0A0E1A` | Primary surfaces |
|
||||
| Deep Glass | `#121628` | Elevated surfaces, inputs |
|
||||
| Twilight | `#1C2240` | Borders, dividers |
|
||||
| Amethyst | `#8B5CF6` | Primary accent, Turn |
|
||||
| Sapphire | `#3B82F6` | Info, Gallery |
|
||||
| Emerald | `#10B981` | Success, Lens |
|
||||
| Amber | `#F59E0B` | Fragments, Mirror |
|
||||
| Rose | `#EC4899` | Social, sharing |
|
||||
| Ruby | `#EF4444` | Error, destructive |
|
||||
| Indigo | `#6366F1` | Extended palette |
|
||||
|
||||
## Total Asset Count
|
||||
|
||||
- **11 SVG files** containing **100+ individual elements**
|
||||
- **1 CSS design system** with complete component library
|
||||
- All assets use consistent prismatic color palette and crystalline design language
|
||||
299
initial mockups/assets/decorative-shards.svg
Normal file
299
initial mockups/assets/decorative-shards.svg
Normal file
@@ -0,0 +1,299 @@
|
||||
<svg viewBox="0 0 700 880" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="prismaticH" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#10B981"><animate attributeName="stop-color" values="#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"><animate attributeName="stop-color" values="#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<radialGradient id="auraGrad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.15"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="60%" stop-color="#8B5CF6" stop-opacity="0.04"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<filter id="glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="8" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowXl" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="14" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="880" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">DECORATIVE SHARD ELEMENTS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">Background auras, floating shards, prismatic dividers, corner accents, edge shimmers</text>
|
||||
|
||||
<!-- 1. BREATHING AURA -->
|
||||
<text x="24" y="74" class="section-lbl">BREATHING AURA</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g transform="translate(175, 160)">
|
||||
<circle r="70" fill="url(#auraGrad)">
|
||||
<animate attributeName="r" values="60;75;60" dur="6s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="40" fill="#8B5CF6" opacity="0.05" filter="url(#glowXl)">
|
||||
<animate attributeName="r" values="35;45;35" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="0" y="100" class="lbl">Behind cards, hero sections</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. FLOATING SHARDS -->
|
||||
<g transform="translate(475, 100)">
|
||||
<text x="0" y="-14" class="section-lbl" text-anchor="middle">FLOATING SHARDS</text>
|
||||
<!-- Shard 1 - large, slow drift -->
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-18 L 10,-4 L 2,16 L -8,6 Z" fill="url(#grAmethyst)" opacity="0.25">
|
||||
<animate attributeName="opacity" values="0.15;0.35;0.15" dur="7s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-18 L 10,-4 L -8,6 Z" fill="#fff" opacity="0.06"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;5,-8;0,0" dur="12s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 2 - medium, angled -->
|
||||
<g transform="translate(50, 30)" filter="url(#glowSm)">
|
||||
<path d="M 0,-10 L 7,2 L -2,12 L -6,0 Z" fill="url(#grSapphire)" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="50,30;55,22;50,30" dur="9s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 3 - small, faster -->
|
||||
<g transform="translate(-40, 50)" filter="url(#glowSm)">
|
||||
<path d="M 0,-6 L 5,0 L 0,8 L -4,2 Z" fill="url(#grEmerald)" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="-40,50;-35,42;-40,50" dur="7s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 4 - tiny mote -->
|
||||
<g transform="translate(30, -20)" filter="url(#shimmer)">
|
||||
<path d="M 0,-4 L 3,0 L 0,4 L -3,0 Z" fill="url(#grRose)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.15;0.4;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="30,-20;33,-25;30,-20" dur="5s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 5 - amber fleck -->
|
||||
<g transform="translate(-60, -10)" filter="url(#shimmer)">
|
||||
<path d="M 0,-5 L 4,0 L 0,5 L -4,0 Z" fill="url(#grAmber)" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="-60,-10;-58,-16;-60,-10" dur="8s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<text x="0" y="100" class="lbl">Scattered across backgrounds, parallax layers</text>
|
||||
</g>
|
||||
|
||||
<!-- 3. PRISMATIC DIVIDER -->
|
||||
<text x="24" y="274" class="section-lbl">PRISMATIC DIVIDER</text>
|
||||
<line x1="24" y1="280" x2="670" y2="280" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g transform="translate(350, 320)" filter="url(#glowMd)">
|
||||
<!-- Main prismatic line -->
|
||||
<line x1="-280" y1="0" x2="280" y2="0" stroke="url(#prismaticH)" stroke-width="1.5" opacity="0.6"/>
|
||||
<!-- Glow underneath -->
|
||||
<line x1="-280" y1="0" x2="280" y2="0" stroke="url(#prismaticH)" stroke-width="4" opacity="0.15"/>
|
||||
<!-- Center diamond accent -->
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.7" filter="url(#shimmer)">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Shimmer sweep -->
|
||||
<rect x="-280" y="-1" width="40" height="2" fill="#fff" opacity="0" rx="1">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x" values="-280;280" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<!-- End shards -->
|
||||
<g transform="translate(-280, 0)" filter="url(#glowSm)">
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="#8B5CF6" opacity="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(280, 0)" filter="url(#glowSm)">
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="#EC4899" opacity="0.4"/>
|
||||
</g>
|
||||
<text x="0" y="30" class="lbl">Section divider with cycling prismatic gradient</text>
|
||||
</g>
|
||||
|
||||
<!-- 4. CORNER ACCENTS -->
|
||||
<text x="24" y="384" class="section-lbl">CORNER ACCENTS</text>
|
||||
<line x1="24" y1="390" x2="670" y2="390" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Demo card with corner accents -->
|
||||
<g transform="translate(100, 420)">
|
||||
<rect width="200" height="120" rx="12" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<!-- Top-left corner -->
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,20 L 0,0 L 20,0" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grAmethyst)" opacity="0.6" transform="translate(0,0)"/>
|
||||
</g>
|
||||
<!-- Top-right corner -->
|
||||
<g filter="url(#glowSm)" transform="translate(200, 0)">
|
||||
<path d="M 0,20 L 0,0 L -20,0" fill="none" stroke="#3B82F6" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grSapphire)" opacity="0.6"/>
|
||||
</g>
|
||||
<!-- Bottom-left corner -->
|
||||
<g filter="url(#glowSm)" transform="translate(0, 120)">
|
||||
<path d="M 0,-20 L 0,0 L 20,0" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grEmerald)" opacity="0.6"/>
|
||||
</g>
|
||||
<!-- Bottom-right corner -->
|
||||
<g filter="url(#glowSm)" transform="translate(200, 120)">
|
||||
<path d="M 0,-20 L 0,0 L -20,0" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grAmber)" opacity="0.6"/>
|
||||
</g>
|
||||
<text x="100" y="65" font-size="10" fill="#475569" text-anchor="middle">Card Content</text>
|
||||
<text x="100" y="152" class="lbl">Corner accent marks on cards</text>
|
||||
</g>
|
||||
|
||||
<!-- 5. HERO SHARD BURST -->
|
||||
<g transform="translate(475, 490)">
|
||||
<text x="0" y="-70" class="section-lbl" text-anchor="middle">HERO SHARD BURST</text>
|
||||
<!-- Central glow -->
|
||||
<circle r="30" fill="#8B5CF6" opacity="0.08" filter="url(#glowXl)">
|
||||
<animate attributeName="r" values="25;35;25" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- Radiating shards -->
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-40 L 4,-20 L 0,-15 L -4,-20 Z" fill="url(#grAmethyst)" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 35,-20 L 20,-16 L 15,-20 L 20,-24 Z" fill="url(#grSapphire)" opacity="0.4" transform="rotate(30)">
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 22,4 L 18,0 L 22,-4 Z" fill="url(#grEmerald)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.25;0.5;0.25" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 20,35 L 16,18 L 20,14 L 24,18 Z" fill="url(#grAmber)" opacity="0.35" transform="rotate(-20)">
|
||||
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="3.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M -35,20 L -18,16 L -14,20 L -18,24 Z" fill="url(#grRose)" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M -20,-35 L -16,-18 L -20,-14 L -24,-18 Z" fill="url(#grIndigo)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.25;0.55;0.25" dur="3.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<!-- Orbiting mote -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-50 A50,50 0 1 1 -0.1,-50"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-45 A45,45 0 1 0 -0.1,-45"/>
|
||||
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="80" class="lbl">Hero/splash background accent</text>
|
||||
</g>
|
||||
|
||||
<!-- 6. SHARD CLUSTER -->
|
||||
<text x="24" y="604" class="section-lbl">SHARD CLUSTER</text>
|
||||
<line x1="24" y1="610" x2="670" y2="610" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(175, 690)">
|
||||
<g filter="url(#glowMd)">
|
||||
<!-- Primary large shard -->
|
||||
<path d="M 0,-20 L 12,0 L 0,20 L -12,0 Z" fill="url(#grAmethyst)" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.4;0.6;0.4" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-20 L 12,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Secondary shard, offset -->
|
||||
<path d="M 18,-12 L 26,-2 L 20,10 L 14,0 Z" fill="url(#grSapphire)" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Tertiary small shard -->
|
||||
<path d="M -16,8 L -10,14 L -14,22 L -20,16 Z" fill="url(#grEmerald)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="3.5s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Tiny accent shards -->
|
||||
<path d="M 8,-18 L 12,-14 L 10,-10 L 6,-14 Z" fill="url(#grAmber)" opacity="0.25"/>
|
||||
<path d="M -20,-8 L -16,-12 L -12,-8 L -16,-4 Z" fill="url(#grRose)" opacity="0.2"/>
|
||||
</g>
|
||||
<text x="0" y="50" class="lbl">Decorative cluster for empty states, backgrounds</text>
|
||||
</g>
|
||||
|
||||
<!-- 7. EDGE SHIMMER -->
|
||||
<g transform="translate(475, 660)">
|
||||
<text x="0" y="-34" class="section-lbl" text-anchor="middle">EDGE SHIMMER</text>
|
||||
<!-- Demo card edge -->
|
||||
<rect x="-80" y="-20" width="160" height="80" rx="10" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<!-- Left edge shimmer -->
|
||||
<line x1="-80" y1="-18" x2="-80" y2="58" stroke="url(#prismaticH)" stroke-width="1.5" opacity="0.3"/>
|
||||
<!-- Shimmer travel -->
|
||||
<rect x="-81" y="-20" width="2" height="16" rx="1" fill="#fff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.4;0" dur="2.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y" values="-20;60" dur="2.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<!-- Top edge subtle shimmer -->
|
||||
<line x1="-78" y1="-20" x2="78" y2="-20" stroke="#8B5CF6" stroke-width="0.5" opacity="0.15"/>
|
||||
<rect x="-78" y="-21" width="24" height="2" rx="1" fill="#C4B5FD" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.25;0" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x" values="-78;78" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="0" y="20" font-size="10" fill="#475569" text-anchor="middle">Card Content</text>
|
||||
<text x="0" y="90" class="lbl">Edge shimmer on focused/hovered cards</text>
|
||||
</g>
|
||||
|
||||
<!-- 8. ORBITING MOTES (standalone) -->
|
||||
<text x="24" y="784" class="section-lbl">ORBITING MOTES</text>
|
||||
<line x1="24" y1="790" x2="670" y2="790" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g transform="translate(350, 840)" filter="url(#shimmer)">
|
||||
<!-- Mote orbit paths (faint) -->
|
||||
<circle r="30" fill="none" stroke="#1C2240" stroke-width="0.3" stroke-dasharray="2 4"/>
|
||||
<circle r="22" fill="none" stroke="#1C2240" stroke-width="0.3" stroke-dasharray="2 4"/>
|
||||
<!-- Orbiting motes -->
|
||||
<circle r="2.5" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-30 A30,30 0 1 1 -0.1,-30"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-30 A30,30 0 1 0 -0.1,-30"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="4s" repeatCount="indefinite" path="M0,-22 A22,22 0 1 1 -0.1,-22"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-22 A22,22 0 1 0 -0.1,-22"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-30 A30,30 0 1 1 -0.1,-30" begin="2s"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.5;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="0" y="52" class="lbl">Floating motes around logos, loaders, hero elements</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="874" font-size="8" fill="#334155" text-anchor="middle">Decorative elements use breathing animations, prismatic color cycling, glow filters from the soft-elegance visual language</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
762
initial mockups/assets/design-system.css
Normal file
762
initial mockups/assets/design-system.css
Normal file
@@ -0,0 +1,762 @@
|
||||
/* ============================================
|
||||
KALEI DESIGN SYSTEM
|
||||
Extracted from soft-elegance-final.svg
|
||||
============================================ */
|
||||
|
||||
/* --- CSS Custom Properties (Design Tokens) --- */
|
||||
:root {
|
||||
/* Backgrounds */
|
||||
--void: #050508;
|
||||
--kalei-navy: #0A0E1A;
|
||||
--deep-glass: #121628;
|
||||
--twilight: #1C2240;
|
||||
|
||||
/* Jewel Tones */
|
||||
--amethyst: #8B5CF6;
|
||||
--amethyst-light: #A78BFA;
|
||||
--amethyst-dark: #6D28D9;
|
||||
--sapphire: #3B82F6;
|
||||
--sapphire-light: #60A5FA;
|
||||
--sapphire-dark: #1D4ED8;
|
||||
--emerald: #10B981;
|
||||
--emerald-light: #34D399;
|
||||
--emerald-dark: #047857;
|
||||
--ruby: #EF4444;
|
||||
--amber: #F59E0B;
|
||||
--amber-light: #FCD34D;
|
||||
--amber-dark: #B45309;
|
||||
--rose: #EC4899;
|
||||
--rose-light: #F9A8D4;
|
||||
--indigo: #6366F1;
|
||||
--indigo-light: #818CF8;
|
||||
|
||||
/* Text */
|
||||
--pure-light: #FFFFFF;
|
||||
--soft-light: #E2E8F0;
|
||||
--dim-light: #94A3B8;
|
||||
--faint-light: #475569;
|
||||
|
||||
/* Prismatic Gradient */
|
||||
--prismatic: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899);
|
||||
--prismatic-subtle: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.15), rgba(16,185,129,0.15), rgba(245,158,11,0.15), rgba(236,72,153,0.15));
|
||||
|
||||
/* Typography */
|
||||
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Radii */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-2xl: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows (glow-based, not drop-shadow) */
|
||||
--glow-amethyst: 0 0 20px rgba(139, 92, 246, 0.3);
|
||||
--glow-sapphire: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
--glow-emerald: 0 0 20px rgba(16, 185, 129, 0.3);
|
||||
--glow-amber: 0 0 20px rgba(245, 158, 11, 0.3);
|
||||
--glow-rose: 0 0 20px rgba(236, 72, 153, 0.3);
|
||||
--glow-white: 0 0 16px rgba(255, 255, 255, 0.15);
|
||||
|
||||
/* Device frame */
|
||||
--device-width: 390px;
|
||||
--device-height: 844px;
|
||||
--status-bar-height: 54px;
|
||||
--tab-bar-height: 83px;
|
||||
--nav-header-height: 56px;
|
||||
}
|
||||
|
||||
/* --- Reset & Base --- */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-primary);
|
||||
color: var(--pure-light);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* --- Device Frame --- */
|
||||
.device-frame {
|
||||
width: var(--device-width);
|
||||
height: var(--device-height);
|
||||
background: var(--void);
|
||||
border-radius: 44px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: scale(var(--device-scale, 1.2));
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* --- Status Bar --- */
|
||||
.status-bar {
|
||||
height: var(--status-bar-height);
|
||||
padding: 14px 28px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.status-bar .time {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.status-bar .icons {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.status-bar .icons svg { width: 16px; height: 16px; }
|
||||
|
||||
/* --- Navigation Header --- */
|
||||
.nav-header {
|
||||
height: var(--nav-header-height);
|
||||
padding: 0 var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.nav-header .nav-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.nav-header .nav-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--amethyst-light);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-header .nav-back svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.nav-header .nav-action {
|
||||
color: var(--dim-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --- Screen Content Area --- */
|
||||
.screen-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 var(--space-4);
|
||||
position: relative;
|
||||
}
|
||||
.screen-content::-webkit-scrollbar { display: none; }
|
||||
.screen-content.no-pad { padding: 0; }
|
||||
.screen-content.centered {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- Tab Bar --- */
|
||||
.tab-bar {
|
||||
height: var(--tab-bar-height);
|
||||
background: var(--kalei-navy);
|
||||
border-top: 1px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
padding-top: 8px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
min-width: 60px;
|
||||
}
|
||||
.tab-item svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.tab-item .tab-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.tab-item.inactive svg { fill: var(--dim-light); stroke: var(--dim-light); }
|
||||
.tab-item.inactive .tab-label { color: var(--faint-light); }
|
||||
.tab-item.active .tab-label { color: var(--pure-light); }
|
||||
|
||||
/* Active tab colors by type */
|
||||
.tab-item.active[data-tab="turn"] svg { fill: var(--amethyst); stroke: var(--amethyst); }
|
||||
.tab-item.active[data-tab="turn"] .tab-label { color: var(--amethyst-light); }
|
||||
.tab-item.active[data-tab="mirror"] svg { fill: var(--amber); stroke: var(--amber); }
|
||||
.tab-item.active[data-tab="mirror"] .tab-label { color: var(--amber-light); }
|
||||
.tab-item.active[data-tab="lens"] svg { fill: var(--emerald); stroke: var(--emerald); }
|
||||
.tab-item.active[data-tab="lens"] .tab-label { color: var(--emerald-light); }
|
||||
.tab-item.active[data-tab="gallery"] svg { fill: var(--sapphire); stroke: var(--sapphire); }
|
||||
.tab-item.active[data-tab="gallery"] .tab-label { color: var(--sapphire-light); }
|
||||
.tab-item.active[data-tab="you"] svg { fill: var(--soft-light); stroke: var(--soft-light); }
|
||||
.tab-item.active[data-tab="you"] .tab-label { color: var(--soft-light); }
|
||||
|
||||
/* --- Typography --- */
|
||||
.display-xl { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1.1; }
|
||||
.display-lg { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.15; }
|
||||
.display-md { font-size: 24px; font-weight: 600; line-height: 1.2; }
|
||||
.heading { font-size: 20px; font-weight: 600; line-height: 1.3; }
|
||||
.subheading { font-size: 16px; font-weight: 600; line-height: 1.4; }
|
||||
.body-lg { font-size: 17px; font-weight: 400; line-height: 1.5; }
|
||||
.body { font-size: 15px; font-weight: 400; line-height: 1.5; }
|
||||
.body-sm { font-size: 13px; font-weight: 400; line-height: 1.5; }
|
||||
.label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
|
||||
.text-pure { color: var(--pure-light); }
|
||||
.text-soft { color: var(--soft-light); }
|
||||
.text-dim { color: var(--dim-light); }
|
||||
.text-faint { color: var(--faint-light); }
|
||||
.text-amethyst { color: var(--amethyst-light); }
|
||||
.text-sapphire { color: var(--sapphire-light); }
|
||||
.text-emerald { color: var(--emerald-light); }
|
||||
.text-amber { color: var(--amber-light); }
|
||||
.text-rose { color: var(--rose-light); }
|
||||
|
||||
.text-prismatic {
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* --- Buttons --- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-out;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-primary {
|
||||
height: 52px;
|
||||
padding: 0 var(--space-6);
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
width: 100%;
|
||||
box-shadow: var(--glow-amethyst);
|
||||
}
|
||||
.btn-primary:hover { background: var(--amethyst-light); }
|
||||
.btn-primary.btn-emerald { background: var(--emerald); box-shadow: var(--glow-emerald); }
|
||||
.btn-primary.btn-amber { background: var(--amber); box-shadow: var(--glow-amber); color: var(--void); }
|
||||
.btn-primary.btn-rose { background: var(--rose); box-shadow: var(--glow-rose); }
|
||||
|
||||
.btn-secondary {
|
||||
height: 44px;
|
||||
padding: 0 var(--space-5);
|
||||
background: var(--deep-glass);
|
||||
color: var(--soft-light);
|
||||
font-size: 15px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--twilight);
|
||||
width: 100%;
|
||||
}
|
||||
.btn-secondary:hover { background: var(--twilight); }
|
||||
|
||||
.btn-ghost {
|
||||
height: 40px;
|
||||
padding: 0 var(--space-4);
|
||||
background: transparent;
|
||||
color: var(--amethyst-light);
|
||||
font-size: 15px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.btn-ghost:hover { background: rgba(139, 92, 246, 0.1); }
|
||||
|
||||
.btn-sm { height: 36px; font-size: 13px; padding: 0 var(--space-3); border-radius: var(--radius-sm); }
|
||||
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-md); }
|
||||
.btn-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
|
||||
|
||||
/* --- Inputs --- */
|
||||
.input-field {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 14px;
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.input-field::placeholder { color: var(--faint-light); }
|
||||
.input-field:focus { border-color: var(--amethyst); }
|
||||
|
||||
.textarea-field {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px;
|
||||
font-family: var(--font-primary);
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
resize: none;
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.textarea-field::placeholder { color: var(--faint-light); }
|
||||
.textarea-field:focus { border-color: var(--amethyst); }
|
||||
|
||||
.input-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- Cards --- */
|
||||
.card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(28, 34, 64, 0.6);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-elevated {
|
||||
background: var(--deep-glass);
|
||||
border-color: var(--twilight);
|
||||
}
|
||||
.card-pattern {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-pattern .pattern-visual {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--void);
|
||||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-pattern .pattern-content {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.card-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.card-action:hover { background: var(--deep-glass); }
|
||||
.card-action .card-action-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.card-action .card-action-text { flex: 1; }
|
||||
.card-action .card-action-chevron { color: var(--faint-light); }
|
||||
|
||||
/* --- Chips / Tags --- */
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
height: 28px;
|
||||
padding: 0 var(--space-3);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.chip-amethyst { background: rgba(139,92,246,0.15); color: var(--amethyst-light); }
|
||||
.chip-sapphire { background: rgba(59,130,246,0.15); color: var(--sapphire-light); }
|
||||
.chip-emerald { background: rgba(16,185,129,0.15); color: var(--emerald-light); }
|
||||
.chip-amber { background: rgba(245,158,11,0.15); color: var(--amber-light); }
|
||||
.chip-rose { background: rgba(236,72,153,0.15); color: var(--rose-light); }
|
||||
|
||||
/* --- Fragment Highlight --- */
|
||||
.fragment-highlight {
|
||||
position: relative;
|
||||
display: inline;
|
||||
}
|
||||
.fragment-highlight::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--amber);
|
||||
border-radius: 2px;
|
||||
opacity: 0.6;
|
||||
box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
|
||||
animation: fragmentGlow 2s ease-in-out infinite;
|
||||
}
|
||||
.fragment-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 4px;
|
||||
color: var(--amber);
|
||||
animation: fragmentPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* --- Chat Bubbles (Mirror) --- */
|
||||
.chat-bubble {
|
||||
max-width: 80%;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: var(--radius-xl);
|
||||
margin-bottom: var(--space-3);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.chat-bubble.user {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
margin-left: auto;
|
||||
border-bottom-right-radius: var(--space-1);
|
||||
}
|
||||
.chat-bubble.ai {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
margin-right: auto;
|
||||
border-bottom-left-radius: var(--space-1);
|
||||
color: var(--soft-light);
|
||||
}
|
||||
|
||||
/* --- Progress Ring --- */
|
||||
.progress-ring {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.progress-ring svg { transform: rotate(-90deg); }
|
||||
.progress-ring .progress-text {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.progress-ring .progress-label {
|
||||
position: absolute;
|
||||
top: 58%;
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* --- Modals --- */
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(5, 5, 8, 0.7);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
}
|
||||
.modal-overlay.centered { align-items: center; }
|
||||
|
||||
.modal-sheet {
|
||||
width: 100%;
|
||||
max-height: 70%;
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
|
||||
padding: var(--space-6) var(--space-4) var(--space-8);
|
||||
position: relative;
|
||||
}
|
||||
.modal-sheet .modal-handle {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
margin: 0 auto var(--space-5);
|
||||
}
|
||||
.modal-card {
|
||||
width: 340px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
/* --- Dividers --- */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--twilight);
|
||||
margin: var(--space-4) 0;
|
||||
}
|
||||
|
||||
/* --- Section Headers --- */
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.section-header .section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.section-header .section-action {
|
||||
font-size: 13px;
|
||||
color: var(--amethyst-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --- Stat Block --- */
|
||||
.stat-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.stat-block {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* --- Toggle / Radio --- */
|
||||
.radio-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
margin-bottom: var(--space-2);
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.radio-option.selected {
|
||||
border-color: var(--amethyst);
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
}
|
||||
.radio-dot {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.radio-option.selected .radio-dot {
|
||||
border-color: var(--amethyst);
|
||||
}
|
||||
.radio-option.selected .radio-dot::after {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--amethyst);
|
||||
}
|
||||
|
||||
/* --- Step Progress --- */
|
||||
.step-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) 0;
|
||||
}
|
||||
.step-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
}
|
||||
.step-dot.active { background: var(--amethyst); box-shadow: 0 0 8px rgba(139, 92, 246, 0.4); }
|
||||
.step-dot.completed { background: var(--emerald); }
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-left: var(--space-2);
|
||||
}
|
||||
|
||||
/* --- Reframe Blocks --- */
|
||||
.reframe-block {
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--space-3);
|
||||
border-left: 3px solid;
|
||||
}
|
||||
.reframe-block.amethyst { border-color: var(--amethyst); background: rgba(139,92,246,0.06); }
|
||||
.reframe-block.sapphire { border-color: var(--sapphire); background: rgba(59,130,246,0.06); }
|
||||
.reframe-block.emerald { border-color: var(--emerald); background: rgba(16,185,129,0.06); }
|
||||
.reframe-block .reframe-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.reframe-block.amethyst .reframe-label { color: var(--amethyst-light); }
|
||||
.reframe-block.sapphire .reframe-label { color: var(--sapphire-light); }
|
||||
.reframe-block.emerald .reframe-label { color: var(--emerald-light); }
|
||||
.reframe-block .reframe-text {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
|
||||
/* --- Animations (from soft-elegance SVG language) --- */
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.03); }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.7; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
@keyframes fragmentGlow {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
@keyframes fragmentPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes hintPulse {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 0.6; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
@keyframes prismaticShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/* Loading shimmer effect */
|
||||
.loading-shimmer {
|
||||
background: linear-gradient(90deg, var(--deep-glass) 25%, rgba(28,34,64,0.6) 50%, var(--deep-glass) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s ease-in-out infinite;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* Breathing aura (decorative background) */
|
||||
.aura {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
opacity: 0.15;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Utilities --- */
|
||||
.mt-1 { margin-top: var(--space-1); }
|
||||
.mt-2 { margin-top: var(--space-2); }
|
||||
.mt-3 { margin-top: var(--space-3); }
|
||||
.mt-4 { margin-top: var(--space-4); }
|
||||
.mt-5 { margin-top: var(--space-5); }
|
||||
.mt-6 { margin-top: var(--space-6); }
|
||||
.mt-8 { margin-top: var(--space-8); }
|
||||
.mb-2 { margin-bottom: var(--space-2); }
|
||||
.mb-3 { margin-bottom: var(--space-3); }
|
||||
.mb-4 { margin-bottom: var(--space-4); }
|
||||
.mb-6 { margin-bottom: var(--space-6); }
|
||||
.gap-2 { gap: var(--space-2); }
|
||||
.gap-3 { gap: var(--space-3); }
|
||||
.gap-4 { gap: var(--space-4); }
|
||||
.flex { display: flex; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.text-center { text-align: center; }
|
||||
.w-full { width: 100%; }
|
||||
.relative { position: relative; }
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
199
initial mockups/assets/device-chrome.svg
Normal file
199
initial mockups/assets/device-chrome.svg
Normal file
@@ -0,0 +1,199 @@
|
||||
<svg viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="prismaticH" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="25%" stop-color="#3B82F6"/><stop offset="50%" stop-color="#10B981"/><stop offset="75%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
.chrome-text { font-size: 10px; fill: #E2E8F0; font-weight: 600; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="700" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">DEVICE CHROME ELEMENTS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">Status bar, tab bar, nav header, keyboard, device frame, modal scrim, toast, input accessory</text>
|
||||
|
||||
<!-- 1. STATUS BAR (iPhone 14 style) -->
|
||||
<text x="24" y="74" class="section-lbl">STATUS BAR</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 110)">
|
||||
<rect x="-195" y="-15" width="390" height="30" fill="#050508"/>
|
||||
<!-- Time -->
|
||||
<text x="-170" y="3" font-size="12" fill="#E2E8F0" font-weight="600">9:41</text>
|
||||
<!-- Dynamic island -->
|
||||
<rect x="-40" y="-8" width="80" height="16" rx="8" fill="#000"/>
|
||||
<!-- Right side indicators -->
|
||||
<!-- Signal -->
|
||||
<g transform="translate(130, -4)">
|
||||
<rect x="0" y="4" width="3" height="4" rx="0.5" fill="#E2E8F0" opacity="0.4"/>
|
||||
<rect x="4" y="2" width="3" height="6" rx="0.5" fill="#E2E8F0" opacity="0.6"/>
|
||||
<rect x="8" y="0" width="3" height="8" rx="0.5" fill="#E2E8F0" opacity="0.8"/>
|
||||
<rect x="12" y="-2" width="3" height="10" rx="0.5" fill="#E2E8F0"/>
|
||||
</g>
|
||||
<!-- WiFi -->
|
||||
<g transform="translate(152, 0)">
|
||||
<path d="M 0,-4 C 3,-4 5,-2 6,0" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M -2,-1 C 2,-1 4,0 5,2" fill="none" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round" opacity="0.8"/>
|
||||
<circle cx="2" cy="3" r="1" fill="#E2E8F0"/>
|
||||
</g>
|
||||
<!-- Battery -->
|
||||
<g transform="translate(166, -4)">
|
||||
<rect x="0" y="0" width="22" height="9" rx="2" fill="none" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/>
|
||||
<rect x="22" y="2" width="2" height="5" rx="1" fill="#E2E8F0" opacity="0.3"/>
|
||||
<rect x="1.5" y="1.5" width="16" height="6" rx="1" fill="#10B981" opacity="0.9"/>
|
||||
</g>
|
||||
<text x="0" y="30" class="lbl">iOS Status Bar — 390px wide, #050508 background</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. NAV HEADER -->
|
||||
<text x="24" y="164" class="section-lbl">NAVIGATION HEADER</text>
|
||||
<line x1="24" y1="170" x2="670" y2="170" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 208)">
|
||||
<rect x="-195" y="-22" width="390" height="44" fill="#0A0E1A"/>
|
||||
<line x1="-195" y1="22" x2="195" y2="22" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Back chevron -->
|
||||
<path d="M -175,-2 L -170,-7 M -175,-2 L -170,3" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<!-- Title -->
|
||||
<text x="0" y="4" font-size="14" fill="#E2E8F0" font-weight="700" text-anchor="middle" font-family="'Space Grotesk', sans-serif">Mirror</text>
|
||||
<!-- Right action (settings gear outline) -->
|
||||
<circle cx="172" cy="0" r="7" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
<circle cx="172" cy="0" r="2" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
<text x="0" y="44" class="lbl">Nav Header — back chevron, centered title, right action</text>
|
||||
</g>
|
||||
|
||||
<!-- 3. TAB BAR FRAME -->
|
||||
<text x="24" y="280" class="section-lbl">TAB BAR FRAME</text>
|
||||
<line x1="24" y1="286" x2="670" y2="286" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 330)">
|
||||
<rect x="-195" y="-28" width="390" height="56" fill="#0A0E1A"/>
|
||||
<!-- Top border with subtle prismatic -->
|
||||
<line x1="-195" y1="-28" x2="195" y2="-28" stroke="url(#prismaticH)" stroke-width="0.5" opacity="0.3"/>
|
||||
<!-- 5 tab slots -->
|
||||
<g font-size="8" fill="#475569" text-anchor="middle" font-weight="500">
|
||||
<!-- Turn (active) -->
|
||||
<g transform="translate(-156, 0)">
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,-10 L 8,0 L 0,10 L -8,0 Z" fill="url(#grAmethyst)" opacity="0.8"/>
|
||||
<path d="M 0,-10 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
<text x="0" y="20" fill="#A78BFA" font-weight="600">Turn</text>
|
||||
</g>
|
||||
<!-- Mirror (inactive) -->
|
||||
<g transform="translate(-78, 0)">
|
||||
<path d="M 0,-6 L 4,-3 L 6,3 L 0,7 L -6,3 L -4,-3 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<text x="0" y="20">Mirror</text>
|
||||
</g>
|
||||
<!-- Lens (inactive) -->
|
||||
<g transform="translate(0, 0)">
|
||||
<circle r="7" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<circle r="3" fill="none" stroke="#475569" stroke-width="0.5"/>
|
||||
<text x="0" y="20">Lens</text>
|
||||
</g>
|
||||
<!-- Gallery (inactive) -->
|
||||
<g transform="translate(78, 0)">
|
||||
<rect x="-6" y="-6" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||||
<rect x="1" y="-6" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||||
<rect x="-6" y="1" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||||
<rect x="1" y="1" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||||
<text x="0" y="20">Gallery</text>
|
||||
</g>
|
||||
<!-- You (inactive) -->
|
||||
<g transform="translate(156, 0)">
|
||||
<circle r="6" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<circle r="2.5" fill="none" stroke="#475569" stroke-width="0.6" cy="-1"/>
|
||||
<text x="0" y="20">You</text>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Home indicator -->
|
||||
<rect x="-50" y="30" width="100" height="4" rx="2" fill="#475569" opacity="0.3"/>
|
||||
<text x="0" y="52" class="lbl">Tab Bar — 5 tabs, prismatic top border, home indicator</text>
|
||||
</g>
|
||||
|
||||
<!-- 4. MODAL SCRIM -->
|
||||
<text x="24" y="410" class="section-lbl">MODAL SCRIM AND TOAST</text>
|
||||
<line x1="24" y1="416" x2="670" y2="416" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(200, 500)">
|
||||
<!-- Scrim background -->
|
||||
<rect x="-100" y="-50" width="200" height="100" rx="4" fill="#050508" opacity="0.7"/>
|
||||
<rect x="-100" y="-50" width="200" height="100" rx="4" fill="none" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Modal card on top -->
|
||||
<rect x="-70" y="-30" width="140" height="60" rx="12" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<!-- Grab handle -->
|
||||
<rect x="-16" y="-26" width="32" height="3" rx="1.5" fill="#475569" opacity="0.4"/>
|
||||
<text x="0" y="0" font-size="10" fill="#E2E8F0" text-anchor="middle" font-weight="600">Modal Content</text>
|
||||
<text x="0" y="14" font-size="8" fill="#64748B" text-anchor="middle">60% backdrop blur scrim</text>
|
||||
<text x="0" y="68" class="lbl">Modal Scrim — #050508 at 70% + backdrop blur</text>
|
||||
</g>
|
||||
|
||||
<!-- Toast -->
|
||||
<g transform="translate(530, 480)">
|
||||
<g filter="url(#glowSm)">
|
||||
<rect x="-90" y="-16" width="180" height="32" rx="16" fill="#121628" stroke="#10B981" stroke-width="0.6"/>
|
||||
<!-- Emerald fragment -->
|
||||
<g transform="translate(-68, 0)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<path d="M 0,-5 L 5,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
<text x="4" y="4" font-size="10" fill="#E2E8F0" text-anchor="middle" font-weight="500">Turn saved</text>
|
||||
</g>
|
||||
<text x="0" y="34" class="lbl">Success Toast — pill shape, emerald accent</text>
|
||||
</g>
|
||||
|
||||
<!-- Error Toast -->
|
||||
<g transform="translate(530, 540)">
|
||||
<g filter="url(#glowSm)">
|
||||
<rect x="-90" y="-16" width="180" height="32" rx="16" fill="#121628" stroke="#EF4444" stroke-width="0.6"/>
|
||||
<g transform="translate(-68, 0)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="#EF4444" opacity="0.8"/>
|
||||
</g>
|
||||
<text x="4" y="4" font-size="10" fill="#E2E8F0" text-anchor="middle" font-weight="500">Connection lost</text>
|
||||
</g>
|
||||
<text x="0" y="34" class="lbl">Error Toast — pill shape, ruby accent</text>
|
||||
</g>
|
||||
|
||||
<!-- 5. INPUT ACCESSORY / KEYBOARD TOP -->
|
||||
<text x="24" y="600" class="section-lbl">INPUT ACCESSORY</text>
|
||||
<line x1="24" y1="606" x2="670" y2="606" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 648)">
|
||||
<rect x="-195" y="-20" width="390" height="40" fill="#0A0E1A"/>
|
||||
<line x1="-195" y1="-20" x2="195" y2="-20" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Text input area -->
|
||||
<rect x="-180" y="-12" width="310" height="24" rx="12" fill="#121628" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<text x="-168" y="3" font-size="10" fill="#475569">Type your thought...</text>
|
||||
<!-- Send button -->
|
||||
<g transform="translate(165, 0)" filter="url(#glowSm)">
|
||||
<circle r="12" fill="url(#grAmethyst)" opacity="0.8"/>
|
||||
<path d="M -3,-3 L 4,0 L -3,3" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<text x="0" y="36" class="lbl">Input Accessory Bar — text field + send button, above keyboard</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="692" font-size="8" fill="#334155" text-anchor="middle">Device chrome at 390x844px (iPhone 14) — all elements use Kalei dark theme with jewel tone accents</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
250
initial mockups/assets/evidence-wall.svg
Normal file
250
initial mockups/assets/evidence-wall.svg
Normal file
@@ -0,0 +1,250 @@
|
||||
<svg viewBox="0 0 700 680" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="680" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">EVIDENCE WALL MOSAIC</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">5 tile shapes, 3 mosaic stages (early/mid/full), connection lines, empty state</text>
|
||||
|
||||
<!-- TILE SHAPES -->
|
||||
<text x="24" y="74" class="section-lbl">TILE SHAPES</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Tile 1: Diamond -->
|
||||
<g transform="translate(80, 130)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-24 L 24,0 L 0,24 L -24,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-24 L 24,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<!-- Inner fragment -->
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grAmethyst)" opacity="0.5" filter="url(#glowSm)"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
<text x="0" y="44" class="lbl">Diamond</text>
|
||||
</g>
|
||||
|
||||
<!-- Tile 2: Tall Hex -->
|
||||
<g transform="translate(200, 130)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-28 L 20,-14 L 20,14 L 0,28 L -20,14 L -20,-14 Z" fill="#121628" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<path d="M 0,-28 L 20,-14 L 0,0 L -20,-14 Z" fill="#3B82F6" opacity="0.05"/>
|
||||
<path d="M 0,-10 L 10,0 L 0,10 L -10,0 Z" fill="url(#grSapphire)" opacity="0.4" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="48" class="lbl">Tall Hex</text>
|
||||
</g>
|
||||
|
||||
<!-- Tile 3: Wide Rectangle -->
|
||||
<g transform="translate(340, 130)">
|
||||
<g filter="url(#glowMd)">
|
||||
<rect x="-30" y="-18" width="60" height="36" rx="4" fill="#121628" stroke="#10B981" stroke-width="0.8"/>
|
||||
<rect x="-30" y="-18" width="60" height="18" rx="4" fill="#10B981" opacity="0.04"/>
|
||||
<path d="M -8,-6 L 0,-12 L 8,-6 L 0,6 Z" fill="url(#grEmerald)" opacity="0.45" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="38" class="lbl">Wide Rect</text>
|
||||
</g>
|
||||
|
||||
<!-- Tile 4: Pentagon -->
|
||||
<g transform="translate(470, 130)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-24 L 23,-7 L 14,20 L -14,20 L -23,-7 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<path d="M 0,-24 L 23,-7 L 0,0 L -23,-7 Z" fill="#F59E0B" opacity="0.05"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grAmber)" opacity="0.45" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="42" class="lbl">Pentagon</text>
|
||||
</g>
|
||||
|
||||
<!-- Tile 5: Triangle -->
|
||||
<g transform="translate(600, 130)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-26 L 24,18 L -24,18 Z" fill="#121628" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<path d="M 0,-26 L 24,18 L 0,0 Z" fill="#EC4899" opacity="0.05"/>
|
||||
<path d="M 0,-6 L 6,4 L -6,4 Z" fill="url(#grRose)" opacity="0.45" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="42" class="lbl">Triangle</text>
|
||||
</g>
|
||||
|
||||
<!-- MOSAIC STAGES -->
|
||||
<text x="24" y="210" class="section-lbl">MOSAIC STAGES</text>
|
||||
<line x1="24" y1="216" x2="670" y2="216" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Early Stage (3 tiles) -->
|
||||
<g transform="translate(120, 320)">
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Tile A -->
|
||||
<path d="M 0,-20 L 18,0 L 0,20 L -18,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.6"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
<!-- Tile B -->
|
||||
<g transform="translate(30, 25)">
|
||||
<rect x="-16" y="-10" width="32" height="20" rx="3" fill="#121628" stroke="#10B981" stroke-width="0.6"/>
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||||
</g>
|
||||
<!-- Tile C -->
|
||||
<g transform="translate(-25, 30)">
|
||||
<path d="M 0,-14 L 14,8 L -14,8 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.6"/>
|
||||
<path d="M 0,-4 L 4,2 L -4,2 Z" fill="url(#grAmber)" opacity="0.35"/>
|
||||
</g>
|
||||
<!-- Connection lines -->
|
||||
<line x1="10" y1="10" x2="22" y2="18" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2 3"/>
|
||||
<line x1="-10" y1="10" x2="-18" y2="22" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2 3"/>
|
||||
</g>
|
||||
<text x="0" y="66" class="lbl">Early (3 tiles)</text>
|
||||
</g>
|
||||
|
||||
<!-- Mid Stage (8 tiles) -->
|
||||
<g transform="translate(350, 310)">
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Row 1 -->
|
||||
<path d="M 0,-30 L 14,-16 L 0,-2 L -14,-16 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.5"/>
|
||||
<path d="M 0,-20 L 4,-16 L 0,-12 L -4,-16 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
|
||||
<g transform="translate(28, -22)">
|
||||
<rect x="-12" y="-8" width="24" height="16" rx="2" fill="#121628" stroke="#3B82F6" stroke-width="0.5"/>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grSapphire)" opacity="0.35"/>
|
||||
</g>
|
||||
<g transform="translate(-28, -20)">
|
||||
<path d="M 0,-12 L 10,6 L -10,6 Z" fill="#121628" stroke="#EC4899" stroke-width="0.5"/>
|
||||
<path d="M 0,-4 L 3,2 L -3,2 Z" fill="url(#grRose)" opacity="0.35"/>
|
||||
</g>
|
||||
<!-- Row 2 -->
|
||||
<g transform="translate(20, 8)">
|
||||
<path d="M 0,-14 L 12,0 L 0,14 L -12,0 Z" fill="#121628" stroke="#10B981" stroke-width="0.5"/>
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||||
</g>
|
||||
<g transform="translate(-20, 10)">
|
||||
<path d="M 0,-12 L 10,-4 L 10,8 L -10,8 L -10,-4 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.5"/>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grAmber)" opacity="0.35"/>
|
||||
</g>
|
||||
<!-- Row 3 -->
|
||||
<g transform="translate(0, 30)">
|
||||
<rect x="-14" y="-8" width="28" height="16" rx="2" fill="#121628" stroke="#6366F1" stroke-width="0.5"/>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grIndigo)" opacity="0.35"/>
|
||||
</g>
|
||||
<g transform="translate(30, 28)">
|
||||
<path d="M 0,-10 L 8,4 L -8,4 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.5"/>
|
||||
</g>
|
||||
<g transform="translate(-32, 28)">
|
||||
<path d="M 0,-10 L 10,0 L 0,10 L -10,0 Z" fill="#121628" stroke="#3B82F6" stroke-width="0.5"/>
|
||||
</g>
|
||||
<!-- Connection lines between tiles -->
|
||||
<line x1="8" y1="-8" x2="18" y2="-16" stroke="#1C2240" stroke-width="0.4" stroke-dasharray="2 2"/>
|
||||
<line x1="-8" y1="-10" x2="-20" y2="-14" stroke="#1C2240" stroke-width="0.4" stroke-dasharray="2 2"/>
|
||||
<line x1="10" y1="6" x2="14" y2="4" stroke="#1C2240" stroke-width="0.4" stroke-dasharray="2 2"/>
|
||||
<line x1="-10" y1="8" x2="-14" y2="8" stroke="#1C2240" stroke-width="0.4" stroke-dasharray="2 2"/>
|
||||
</g>
|
||||
<text x="0" y="66" class="lbl">Mid (8 tiles, connections forming)</text>
|
||||
</g>
|
||||
|
||||
<!-- Full Stage (dense mosaic) -->
|
||||
<g transform="translate(580, 305)">
|
||||
<g filter="url(#glowMd)">
|
||||
<!-- Dense mosaic of tiles -->
|
||||
<path d="M 0,-38 L 12,-26 L 0,-14 L -12,-26 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.5"/>
|
||||
<path d="M 0,-30 L 4,-26 L 0,-22 L -4,-26 Z" fill="url(#grAmethyst)" opacity="0.5"/>
|
||||
|
||||
<g transform="translate(20, -30)">
|
||||
<rect x="-8" y="-6" width="16" height="12" rx="2" fill="#121628" stroke="#3B82F6" stroke-width="0.4"/>
|
||||
<path d="M 0,-2 L 2,0 L 0,2 L -2,0 Z" fill="url(#grSapphire)" opacity="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(-20, -28)">
|
||||
<path d="M 0,-8 L 8,4 L -8,4 Z" fill="#121628" stroke="#EC4899" stroke-width="0.4"/>
|
||||
<path d="M 0,-3 L 2,1 L -2,1 Z" fill="url(#grRose)" opacity="0.35"/>
|
||||
</g>
|
||||
<g transform="translate(16, -12)">
|
||||
<path d="M 0,-10 L 8,0 L 0,10 L -8,0 Z" fill="#121628" stroke="#10B981" stroke-width="0.4"/>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(-18, -10)">
|
||||
<path d="M 0,-8 L 7,-3 L 7,5 L -7,5 L -7,-3 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.4"/>
|
||||
<path d="M 0,-2 L 2,0 L 0,2 L -2,0 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(0, 6)">
|
||||
<rect x="-10" y="-6" width="20" height="12" rx="2" fill="#121628" stroke="#6366F1" stroke-width="0.4"/>
|
||||
<path d="M 0,-2 L 2,0 L 0,2 L -2,0 Z" fill="url(#grIndigo)" opacity="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(-22, 8)">
|
||||
<path d="M 0,-8 L 6,0 L 0,8 L -6,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(22, 8)">
|
||||
<path d="M 0,-6 L 6,4 L -6,4 Z" fill="#121628" stroke="#3B82F6" stroke-width="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(10, 22)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="#121628" stroke="#10B981" stroke-width="0.4"/>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||||
</g>
|
||||
<g transform="translate(-12, 22)">
|
||||
<rect x="-8" y="-6" width="16" height="12" rx="2" fill="#121628" stroke="#EC4899" stroke-width="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(0, 36)">
|
||||
<path d="M 0,-8 L 10,4 L -10,4 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.4"/>
|
||||
</g>
|
||||
<!-- Glowing connection web -->
|
||||
<g stroke="#1C2240" stroke-width="0.3" opacity="0.5">
|
||||
<line x1="0" y1="-20" x2="14" y2="-14"/>
|
||||
<line x1="0" y1="-20" x2="-14" y2="-14"/>
|
||||
<line x1="12" y1="-6" x2="6" y2="4"/>
|
||||
<line x1="-12" y1="-4" x2="-6" y2="6"/>
|
||||
<line x1="6" y1="10" x2="8" y2="18"/>
|
||||
<line x1="-6" y1="10" x2="-8" y2="18"/>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="66" class="lbl">Full (dense mosaic with connections)</text>
|
||||
</g>
|
||||
|
||||
<!-- EMPTY STATE -->
|
||||
<text x="24" y="420" class="section-lbl">EMPTY STATE</text>
|
||||
<line x1="24" y1="426" x2="670" y2="426" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 540)">
|
||||
<!-- Ghost tiles -->
|
||||
<g opacity="0.15">
|
||||
<path d="M 0,-30 L 16,-16 L 0,-2 L -16,-16 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
<path d="M 24,-20 L 36,-8 L 24,4 L 12,-8 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
<path d="M -24,-18 L -12,-6 L -24,6 L -36,-6 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
<rect x="-14" y="6" width="28" height="18" rx="3" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</g>
|
||||
<!-- Central message area -->
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grAmethyst)" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<text x="0" y="52" font-size="10" fill="#64748B" text-anchor="middle" font-weight="500">Start collecting evidence</text>
|
||||
<text x="0" y="66" font-size="8" fill="#475569" text-anchor="middle">Each Turn adds a tile to your wall</text>
|
||||
<text x="0" y="100" class="lbl">Empty state — dashed ghost tiles with CTA</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="672" font-size="8" fill="#334155" text-anchor="middle">Evidence Wall tiles use mixed shapes, jewel tones per feature, dashed connection lines, and glow on new additions</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
322
initial mockups/assets/fragment-icons.svg
Normal file
322
initial mockups/assets/fragment-icons.svg
Normal file
@@ -0,0 +1,322 @@
|
||||
<svg viewBox="0 0 700 520" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Prismatic gradients for each jewel tone -->
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="4.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FEF3C7;#FDE68A" dur="4.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"><animate attributeName="stop-color" values="#FBCFE8;#FCE7F3;#FBCFE8" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRuby" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FCA5A5"/><stop offset="100%" stop-color="#DC2626"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSoftLight" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#F1F5F9"/><stop offset="100%" stop-color="#94A3B8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grPrismatic" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"><animate attributeName="stop-color" values="#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowXl" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="10" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="520" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">FRAGMENT ICONS AND HIGHLIGHT EFFECTS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">The core diamond fragment in 5 sizes, 8 color states, highlight underline, highlight bubble</text>
|
||||
|
||||
<!-- SECTION 1: Five Sizes -->
|
||||
<text x="24" y="74" class="section-lbl">FIVE SIZES</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- XS: 12x12 -->
|
||||
<g transform="translate(80, 120)">
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-6 L -6,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="0.3" opacity="0.2"/>
|
||||
</g>
|
||||
<text x="0" y="24" class="lbl">XS (12px)</text>
|
||||
</g>
|
||||
|
||||
<!-- SM: 16x16 -->
|
||||
<g transform="translate(180, 120)">
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-8 L -8,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.4" opacity="0.2"/>
|
||||
<line x1="-8" y1="0" x2="8" y2="0" stroke="#fff" stroke-width="0.3" opacity="0.1"/>
|
||||
</g>
|
||||
<text x="0" y="24" class="lbl">SM (16px)</text>
|
||||
</g>
|
||||
|
||||
<!-- MD: 24x24 -->
|
||||
<g transform="translate(300, 120)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grAmethyst)" opacity="0.9">
|
||||
<animate attributeName="fill-opacity" values="0.85;1;0.85" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<path d="M 0,-12 L -12,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<line x1="-12" y1="0" x2="12" y2="0" stroke="#fff" stroke-width="0.3" opacity="0.12"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">MD (24px)</text>
|
||||
</g>
|
||||
|
||||
<!-- LG: 36x36 -->
|
||||
<g transform="translate(440, 120)">
|
||||
<g filter="url(#glowLg)">
|
||||
<path d="M 0,-18 L 18,0 L 0,18 L -18,0 Z" fill="url(#grAmethyst)" opacity="0.85">
|
||||
<animate attributeName="fill-opacity" values="0.80;0.95;0.80" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-18 L 18,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-18 L -18,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-18" x2="0" y2="18" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<line x1="-18" y1="0" x2="18" y2="0" stroke="#fff" stroke-width="0.4" opacity="0.12"/>
|
||||
<line x1="-9" y1="-9" x2="9" y2="9" stroke="#fff" stroke-width="0.3" opacity="0.08"/>
|
||||
<circle cx="-5" cy="-5" r="2" fill="#fff" opacity="0.25"/>
|
||||
<circle cx="3" cy="-2" r="1" fill="#fff" opacity="0.4"/>
|
||||
</g>
|
||||
<text x="0" y="36" class="lbl">LG (36px)</text>
|
||||
</g>
|
||||
|
||||
<!-- XL: 48x48 -->
|
||||
<g transform="translate(600, 120)">
|
||||
<g filter="url(#glowXl)">
|
||||
<path d="M 0,-24 L 24,0 L 0,24 L -24,0 Z" fill="url(#grAmethyst)" opacity="0.85">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.95;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 L 24,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-24 L -24,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<path d="M 0,24 L 24,0 L 0,0 Z" fill="#000" opacity="0.08"/>
|
||||
<line x1="0" y1="-24" x2="0" y2="24" stroke="#fff" stroke-width="0.6" opacity="0.2"/>
|
||||
<line x1="-24" y1="0" x2="24" y2="0" stroke="#fff" stroke-width="0.5" opacity="0.15"/>
|
||||
<line x1="-12" y1="-12" x2="12" y2="12" stroke="#fff" stroke-width="0.3" opacity="0.08"/>
|
||||
<line x1="12" y1="-12" x2="-12" y2="12" stroke="#fff" stroke-width="0.3" opacity="0.08"/>
|
||||
<circle cx="-7" cy="-7" r="3" fill="#fff" opacity="0.2"/>
|
||||
<circle cx="4" cy="-3" r="1.5" fill="#fff" opacity="0.4"/>
|
||||
<line x1="0" y1="-24" x2="24" y2="0" stroke="#C4B5FD" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.4;0" dur="3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="-24" x2="-24" y2="0" stroke="#E9D5FF" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="3s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
<text x="0" y="44" class="lbl">XL (48px)</text>
|
||||
</g>
|
||||
|
||||
<!-- SECTION 2: Eight Color States -->
|
||||
<text x="24" y="204" class="section-lbl">EIGHT COLOR STATES</text>
|
||||
<line x1="24" y1="210" x2="670" y2="210" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Amethyst -->
|
||||
<g transform="translate(56, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Amethyst</text>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire -->
|
||||
<g transform="translate(138, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grSapphire)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Sapphire</text>
|
||||
</g>
|
||||
|
||||
<!-- Emerald -->
|
||||
<g transform="translate(220, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grEmerald)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Emerald</text>
|
||||
</g>
|
||||
|
||||
<!-- Amber -->
|
||||
<g transform="translate(302, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grAmber)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Amber</text>
|
||||
</g>
|
||||
|
||||
<!-- Rose -->
|
||||
<g transform="translate(384, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grRose)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Rose</text>
|
||||
</g>
|
||||
|
||||
<!-- Ruby -->
|
||||
<g transform="translate(466, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grRuby)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Ruby</text>
|
||||
</g>
|
||||
|
||||
<!-- Indigo -->
|
||||
<g transform="translate(548, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grIndigo)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Indigo</text>
|
||||
</g>
|
||||
|
||||
<!-- Soft Light -->
|
||||
<g transform="translate(630, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grSoftLight)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Soft Light</text>
|
||||
</g>
|
||||
|
||||
<!-- SECTION 3: Special States and Highlights -->
|
||||
<text x="24" y="330" class="section-lbl">SPECIAL STATES AND HIGHLIGHTS</text>
|
||||
<line x1="24" y1="336" x2="670" y2="336" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Active/Detected glow -->
|
||||
<g transform="translate(80, 390)">
|
||||
<g filter="url(#glowLg)">
|
||||
<path d="M 0,-14 L 14,0 L 0,14 L -14,0 Z" fill="url(#grAmethyst)" opacity="0.95">
|
||||
<animate attributeName="fill-opacity" values="0.85;1;0.85" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-14 L 14,0 L 0,0 Z" fill="#fff" opacity="0.2"/>
|
||||
<line x1="0" y1="-14" x2="0" y2="14" stroke="#fff" stroke-width="0.5" opacity="0.25"/>
|
||||
<circle cx="-4" cy="-4" r="2" fill="#fff" opacity="0.35"/>
|
||||
<path d="M 0,-18 L 18,0 L 0,18 L -18,0 Z" fill="none" stroke="#A78BFA" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-22 L 22,0 L 0,22 L -22,0 Z" fill="none" stroke="#A78BFA" stroke-width="0.5" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="2s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<text x="0" y="44" class="lbl">Active / Detected</text>
|
||||
</g>
|
||||
|
||||
<!-- Prismatic cycling -->
|
||||
<g transform="translate(220, 390)">
|
||||
<g filter="url(#glowLg)">
|
||||
<path d="M 0,-14 L 14,0 L 0,14 L -14,0 Z" fill="url(#grPrismatic)" opacity="0.9">
|
||||
<animate attributeName="fill-opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-14 L 14,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<line x1="0" y1="-14" x2="0" y2="14" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-4" cy="-4" r="2" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="44" class="lbl">Prismatic Cycle</text>
|
||||
</g>
|
||||
|
||||
<!-- Dimmed / Inactive -->
|
||||
<g transform="translate(360, 390)">
|
||||
<path d="M 0,-14 L 14,0 L 0,14 L -14,0 Z" fill="none" stroke="#475569" stroke-width="0.8" opacity="0.5"/>
|
||||
<line x1="0" y1="-14" x2="0" y2="14" stroke="#475569" stroke-width="0.3" opacity="0.3"/>
|
||||
<text x="0" y="44" class="lbl">Dimmed / Inactive</text>
|
||||
</g>
|
||||
|
||||
<!-- Highlight Underline -->
|
||||
<g transform="translate(500, 380)">
|
||||
<text x="0" y="0" font-size="11" fill="#E2E8F0" text-anchor="middle" font-weight="500">highlighted text</text>
|
||||
<g filter="url(#shimmer)">
|
||||
<rect x="-48" y="4" width="96" height="3" rx="1.5" fill="url(#grAmethyst)" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.7;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="-48" y="4" width="20" height="3" rx="1.5" fill="#fff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x" values="-48;48" dur="2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="translate(-52, 5)">
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grAmethyst)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="30" class="lbl">Highlight Underline</text>
|
||||
</g>
|
||||
|
||||
<!-- Highlight Bubble -->
|
||||
<g transform="translate(350, 470)">
|
||||
<g filter="url(#glowMd)">
|
||||
<rect x="-80" y="-18" width="160" height="36" rx="18" fill="#121628" stroke="#8B5CF6" stroke-width="0.8" opacity="0.9"/>
|
||||
<rect x="-78" y="-16" width="156" height="32" rx="16" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g transform="translate(-56, 0)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.9" filter="url(#glowSm)"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
<text x="4" y="4" font-size="10" fill="#C4B5FD" text-anchor="middle" font-weight="500">Catastrophizing</text>
|
||||
<rect x="-82" y="-20" width="164" height="40" rx="20" fill="none" stroke="#8B5CF6" stroke-width="0.5" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
<text x="0" y="38" class="lbl">Highlight Bubble (distortion detected in text)</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="510" font-size="8" fill="#334155" text-anchor="middle">Fragment — Core visual element of Kalei — Crystalline faceted diamond with gradient fills, specular highlights, glow filters</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
380
initial mockups/assets/icons-actions.svg
Normal file
380
initial mockups/assets/icons-actions.svg
Normal file
@@ -0,0 +1,380 @@
|
||||
<svg viewBox="0 0 560 560" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="gl" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="gAme" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gSoft" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#F1F5F9"/><stop offset="100%" stop-color="#94A3B8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gSap" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gAmb" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, sans-serif; }
|
||||
.lbl { font-size: 8px; fill: #64748B; text-anchor: middle; font-weight: 500; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="560" height="560" fill="#050508"/>
|
||||
<text x="280" y="22" font-size="12" font-weight="600" fill="#94A3B8" text-anchor="middle" letter-spacing="0.1em">ACTION & UI ICONS</text>
|
||||
|
||||
<!-- === ROW 1: NAVIGATION (Soft Light #E2E8F0 strokes) === -->
|
||||
<text x="20" y="50" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">NAVIGATION</text>
|
||||
|
||||
<!-- Back chevron -->
|
||||
<g transform="translate(30, 60)">
|
||||
<path d="M 14,4 L 6,12 L 14,20" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Back</text>
|
||||
</g>
|
||||
|
||||
<!-- Close X -->
|
||||
<g transform="translate(90, 60)">
|
||||
<path d="M 6,6 L 18,18 M 18,6 L 6,18" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Close</text>
|
||||
</g>
|
||||
|
||||
<!-- More (3 diamonds) -->
|
||||
<g transform="translate(150, 60)">
|
||||
<path d="M 12,4 L 14,6 L 12,8 L 10,6 Z" fill="#E2E8F0" opacity="0.8"/>
|
||||
<path d="M 12,10 L 14,12 L 12,14 L 10,12 Z" fill="#E2E8F0" opacity="0.8"/>
|
||||
<path d="M 12,16 L 14,18 L 12,20 L 10,18 Z" fill="#E2E8F0" opacity="0.8"/>
|
||||
<text x="12" y="34" class="lbl">More</text>
|
||||
</g>
|
||||
|
||||
<!-- Chevron right -->
|
||||
<g transform="translate(210, 60)">
|
||||
<path d="M 10,4 L 18,12 L 10,20" fill="none" stroke="#94A3B8" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Next</text>
|
||||
</g>
|
||||
|
||||
<!-- Up (scroll to top / expand) -->
|
||||
<g transform="translate(270, 60)">
|
||||
<path d="M 4,16 L 12,6 L 20,16" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Up</text>
|
||||
</g>
|
||||
|
||||
<!-- Down -->
|
||||
<g transform="translate(330, 60)">
|
||||
<path d="M 4,8 L 12,18 L 20,8" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Down</text>
|
||||
</g>
|
||||
|
||||
<!-- === ROW 2: PRIMARY ACTIONS (Amethyst) === -->
|
||||
<text x="20" y="120" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">PRIMARY ACTIONS</text>
|
||||
|
||||
<!-- Save / Bookmark (gem shape) -->
|
||||
<g transform="translate(30, 130)" filter="url(#gl)">
|
||||
<path d="M 12,3 L 20,8 L 20,21 L 12,17 L 4,21 L 4,8 Z" fill="url(#gAme)" opacity="0.85"/>
|
||||
<path d="M 12,3 L 20,8 L 4,8 Z" fill="#fff" opacity="0.12"/>
|
||||
<text x="12" y="34" class="lbl">Save</text>
|
||||
</g>
|
||||
|
||||
<!-- Share (angular arrow up-right) -->
|
||||
<g transform="translate(90, 130)" filter="url(#gl)">
|
||||
<path d="M 12,4 L 18,4 L 18,10" fill="none" stroke="#A78BFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M 18,4 L 6,16" fill="none" stroke="#A78BFA" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M 6,8 L 6,20 L 18,20" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
|
||||
<text x="12" y="34" class="lbl">Share</text>
|
||||
</g>
|
||||
|
||||
<!-- Copy -->
|
||||
<g transform="translate(150, 130)">
|
||||
<rect x="8" y="6" width="12" height="14" rx="2" fill="none" stroke="#A78BFA" stroke-width="1.2"/>
|
||||
<rect x="4" y="4" width="12" height="14" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1"/>
|
||||
<text x="12" y="34" class="lbl">Copy</text>
|
||||
</g>
|
||||
|
||||
<!-- Delete -->
|
||||
<g transform="translate(210, 130)">
|
||||
<path d="M 6,8 L 18,8" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M 8,8 L 8,20 L 16,20 L 16,8" fill="none" stroke="#EF4444" stroke-width="1"/>
|
||||
<path d="M 10,6 L 10,8 M 14,6 L 14,8" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="10" y1="11" x2="10" y2="17" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
||||
<line x1="14" y1="11" x2="14" y2="17" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
||||
<text x="12" y="34" class="lbl">Delete</text>
|
||||
</g>
|
||||
|
||||
<!-- Edit -->
|
||||
<g transform="translate(270, 130)">
|
||||
<path d="M 4,20 L 4,16 L 16,4 L 20,8 L 8,20 Z" fill="none" stroke="#A78BFA" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<line x1="14" y1="6" x2="18" y2="10" stroke="#A78BFA" stroke-width="0.8" opacity="0.5"/>
|
||||
<text x="12" y="34" class="lbl">Edit</text>
|
||||
</g>
|
||||
|
||||
<!-- Refresh (angular cycle) -->
|
||||
<g transform="translate(330, 130)">
|
||||
<path d="M 18,10 A 7,7 0 1 0 16,18" fill="none" stroke="#A78BFA" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M 18,6 L 18,11 L 13,11" fill="none" stroke="#A78BFA" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Refresh</text>
|
||||
</g>
|
||||
|
||||
<!-- Send (angular arrow) -->
|
||||
<g transform="translate(390, 130)" filter="url(#gl)">
|
||||
<path d="M 4,20 L 4,12 L 20,4 L 12,20 L 10,14 Z" fill="url(#gAme)" opacity="0.8"/>
|
||||
<path d="M 4,12 L 20,4 L 10,14 Z" fill="#fff" opacity="0.1"/>
|
||||
<text x="12" y="34" class="lbl">Send</text>
|
||||
</g>
|
||||
|
||||
<!-- === ROW 3: STATUS (contextual colors) === -->
|
||||
<text x="20" y="190" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">STATUS & FEEDBACK</text>
|
||||
|
||||
<!-- Checkmark (Emerald, animated subtle pulse) -->
|
||||
<g transform="translate(30, 200)" filter="url(#gl)">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M 7,12 L 11,16 L 18,8" fill="none" stroke="url(#gEm)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<text x="12" y="34" class="lbl">Success</text>
|
||||
</g>
|
||||
|
||||
<!-- Warning (Amber triangle) -->
|
||||
<g transform="translate(90, 200)" filter="url(#gl)">
|
||||
<path d="M 12,3 L 22,21 L 2,21 Z" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<path d="M 12,3 L 22,21 L 2,21 Z" fill="#F59E0B" opacity="0.08"/>
|
||||
<line x1="12" y1="10" x2="12" y2="15" stroke="#FCD34D" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="18" r="1" fill="#FCD34D"/>
|
||||
<text x="12" y="34" class="lbl">Warning</text>
|
||||
</g>
|
||||
|
||||
<!-- Info (hexagonal i) -->
|
||||
<g transform="translate(150, 200)">
|
||||
<path d="M 12,2 L 20,7 L 20,17 L 12,22 L 4,17 L 4,7 Z" fill="none" stroke="#3B82F6" stroke-width="1" opacity="0.6"/>
|
||||
<circle cx="12" cy="8" r="1" fill="#60A5FA"/>
|
||||
<line x1="12" y1="11" x2="12" y2="17" stroke="#60A5FA" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Info</text>
|
||||
</g>
|
||||
|
||||
<!-- Lock -->
|
||||
<g transform="translate(210, 200)">
|
||||
<rect x="6" y="12" width="12" height="10" rx="2" fill="none" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
<path d="M 9,12 L 9,8 A 3,3 0 0 1 15,8 L 15,12" fill="none" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
<circle cx="12" cy="17" r="1.2" fill="#94A3B8"/>
|
||||
<text x="12" y="34" class="lbl">Lock</text>
|
||||
</g>
|
||||
|
||||
<!-- Unlock -->
|
||||
<g transform="translate(270, 200)">
|
||||
<rect x="6" y="12" width="12" height="10" rx="2" fill="none" stroke="#10B981" stroke-width="1.2"/>
|
||||
<path d="M 9,12 L 9,8 A 3,3 0 0 1 15,8 L 15,6" fill="none" stroke="#10B981" stroke-width="1.2"/>
|
||||
<circle cx="12" cy="17" r="1.2" fill="#10B981"/>
|
||||
<text x="12" y="34" class="lbl">Unlock</text>
|
||||
</g>
|
||||
|
||||
<!-- Error (Ruby X in circle) -->
|
||||
<g transform="translate(330, 200)">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M 8,8 L 16,16 M 16,8 L 8,16" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Error</text>
|
||||
</g>
|
||||
|
||||
<!-- === ROW 4: FEATURE-SPECIFIC (mixed jewel tones) === -->
|
||||
<text x="20" y="260" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">FEATURE ICONS</text>
|
||||
|
||||
<!-- Turn/Rotate (animated slowly) -->
|
||||
<g transform="translate(30, 270)" filter="url(#gl)">
|
||||
<path d="M 12,4 L 18,12 L 12,20 L 6,12 Z" fill="url(#gAme)" opacity="0.7"/>
|
||||
<path d="M 12,4 L 18,12 L 6,12 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Rotation arc -->
|
||||
<path d="M 20,6 A 9,9 0 0 1 20,18" fill="none" stroke="#C4B5FD" stroke-width="0.8" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="12s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<text x="12" y="34" class="lbl">Rotate</text>
|
||||
</g>
|
||||
|
||||
<!-- Streak flame (Amber, animated flicker) -->
|
||||
<g transform="translate(90, 270)" filter="url(#gl)">
|
||||
<path d="M 12,3 Q 16,8 15,14 Q 18,10 17,6 Q 20,12 16,20 L 8,20 Q 4,12 7,6 Q 6,10 9,14 Q 8,8 12,3 Z" fill="url(#gAmb)" opacity="0.85">
|
||||
<animate attributeName="opacity" values="0.75;0.95;0.75" dur="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 12,3 Q 14,7 13,10 L 11,10 Q 10,7 12,3 Z" fill="#fff" opacity="0.15"/>
|
||||
<text x="12" y="34" class="lbl">Streak</text>
|
||||
</g>
|
||||
|
||||
<!-- Bell (notification) -->
|
||||
<g transform="translate(150, 270)">
|
||||
<path d="M 12,3 L 12,5 M 8,20 Q 12,23 16,20" fill="none" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M 6,18 L 6,12 Q 6,6 12,5 Q 18,6 18,12 L 18,18 Z" fill="none" stroke="#E2E8F0" stroke-width="1.2"/>
|
||||
<!-- Notification dot -->
|
||||
<circle cx="17" cy="6" r="2.5" fill="#EF4444" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="12" y="34" class="lbl">Notify</text>
|
||||
</g>
|
||||
|
||||
<!-- Heart (angular, Rose) -->
|
||||
<g transform="translate(210, 270)" filter="url(#gl)">
|
||||
<path d="M 12,19 L 4,11 L 4,7 L 8,3 L 12,7 L 16,3 L 20,7 L 20,11 Z" fill="url(#gRose)" opacity="0.8"/>
|
||||
<path d="M 12,7 L 8,3 L 4,7 L 4,11 Z" fill="#fff" opacity="0.1"/>
|
||||
<text x="12" y="34" class="lbl">Heart</text>
|
||||
</g>
|
||||
|
||||
<!-- Star (6-pointed crystalline) -->
|
||||
<g transform="translate(270, 270)" filter="url(#gl)">
|
||||
<path d="M 12,2 L 14,9 L 21,9 L 16,14 L 18,21 L 12,17 L 6,21 L 8,14 L 3,9 L 10,9 Z" fill="url(#gAmb)" opacity="0.75"/>
|
||||
<path d="M 12,2 L 14,9 L 10,9 Z" fill="#fff" opacity="0.12"/>
|
||||
<text x="12" y="34" class="lbl">Star</text>
|
||||
</g>
|
||||
|
||||
<!-- Settings (hexagonal gear) -->
|
||||
<g transform="translate(330, 270)">
|
||||
<path d="M 10,2 L 14,2 L 16,5 L 20,5 L 22,9 L 20,12 L 22,15 L 20,19 L 16,19 L 14,22 L 10,22 L 8,19 L 4,19 L 2,15 L 4,12 L 2,9 L 4,5 L 8,5 Z" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
<circle cx="12" cy="12" r="4" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
<text x="12" y="34" class="lbl">Settings</text>
|
||||
</g>
|
||||
|
||||
<!-- Calendar -->
|
||||
<g transform="translate(390, 270)">
|
||||
<rect x="4" y="6" width="16" height="16" rx="2" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
<line x1="4" y1="10" x2="20" y2="10" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
<line x1="8" y1="4" x2="8" y2="8" stroke="#94A3B8" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="16" y1="4" x2="16" y2="8" stroke="#94A3B8" stroke-width="1" stroke-linecap="round"/>
|
||||
<!-- Date dots -->
|
||||
<circle cx="8" cy="14" r="1" fill="#94A3B8" opacity="0.5"/>
|
||||
<circle cx="12" cy="14" r="1" fill="#8B5CF6" opacity="0.8"/>
|
||||
<circle cx="16" cy="14" r="1" fill="#94A3B8" opacity="0.5"/>
|
||||
<circle cx="8" cy="18" r="1" fill="#94A3B8" opacity="0.5"/>
|
||||
<circle cx="12" cy="18" r="1" fill="#94A3B8" opacity="0.5"/>
|
||||
<text x="12" y="34" class="lbl">Calendar</text>
|
||||
</g>
|
||||
|
||||
<!-- === ROW 5: MEDIA & UI CONTROLS === -->
|
||||
<text x="20" y="330" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">MEDIA & CONTROLS</text>
|
||||
|
||||
<!-- Play -->
|
||||
<g transform="translate(30, 340)">
|
||||
<path d="M 7,4 L 20,12 L 7,20 Z" fill="url(#gAme)" opacity="0.8"/>
|
||||
<path d="M 7,4 L 20,12 L 7,12 Z" fill="#fff" opacity="0.08"/>
|
||||
<text x="12" y="34" class="lbl">Play</text>
|
||||
</g>
|
||||
|
||||
<!-- Pause -->
|
||||
<g transform="translate(90, 340)">
|
||||
<rect x="6" y="5" width="4" height="14" rx="1" fill="#E2E8F0" opacity="0.8"/>
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" fill="#E2E8F0" opacity="0.8"/>
|
||||
<text x="12" y="34" class="lbl">Pause</text>
|
||||
</g>
|
||||
|
||||
<!-- Filter / Funnel -->
|
||||
<g transform="translate(150, 340)">
|
||||
<path d="M 3,5 L 21,5 L 14,14 L 14,20 L 10,22 L 10,14 Z" fill="none" stroke="#94A3B8" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Filter</text>
|
||||
</g>
|
||||
|
||||
<!-- Search -->
|
||||
<g transform="translate(210, 340)">
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#94A3B8" stroke-width="1.3"/>
|
||||
<line x1="15" y1="15" x2="21" y2="21" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Search</text>
|
||||
</g>
|
||||
|
||||
<!-- Eye / View -->
|
||||
<g transform="translate(270, 340)">
|
||||
<path d="M 2,12 Q 12,4 22,12 Q 12,20 2,12 Z" fill="none" stroke="#94A3B8" stroke-width="1.1"/>
|
||||
<!-- Diamond pupil -->
|
||||
<path d="M 12,8 L 15,12 L 12,16 L 9,12 Z" fill="#94A3B8" opacity="0.6"/>
|
||||
<text x="12" y="34" class="lbl">View</text>
|
||||
</g>
|
||||
|
||||
<!-- Expand -->
|
||||
<g transform="translate(330, 340)">
|
||||
<path d="M 4,4 L 10,4 M 4,4 L 4,10" stroke="#94A3B8" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M 20,4 L 14,4 M 20,4 L 20,10" stroke="#94A3B8" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M 4,20 L 10,20 M 4,20 L 4,14" stroke="#94A3B8" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M 20,20 L 14,20 M 20,20 L 20,14" stroke="#94A3B8" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Expand</text>
|
||||
</g>
|
||||
|
||||
<!-- Clock / Timer -->
|
||||
<g transform="translate(390, 340)">
|
||||
<path d="M 12,2 L 18,5 L 21,11 L 18,17 L 12,20 L 6,17 L 3,11 L 6,5 Z" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
<line x1="12" y1="7" x2="12" y2="11" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="12" y1="11" x2="16" y2="14" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Timer</text>
|
||||
</g>
|
||||
|
||||
<!-- === ROW 6: SPECIAL PURPOSE === -->
|
||||
<text x="20" y="400" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">SPECIAL PURPOSE</text>
|
||||
|
||||
<!-- Upgrade / Crown (prismatic animated) -->
|
||||
<g transform="translate(30, 410)" filter="url(#gl)">
|
||||
<path d="M 4,18 L 4,10 L 8,14 L 12,6 L 16,14 L 20,10 L 20,18 Z" fill="url(#gAme)" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.7;0.95;0.7" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 4,10 L 8,14 L 12,6 L 16,14 L 20,10 Z" fill="#fff" opacity="0.1"/>
|
||||
<text x="12" y="34" class="lbl">Premium</text>
|
||||
</g>
|
||||
|
||||
<!-- Science / Beaker -->
|
||||
<g transform="translate(90, 410)">
|
||||
<path d="M 9,4 L 9,12 L 4,20 L 20,20 L 15,12 L 15,4" fill="none" stroke="#60A5FA" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<line x1="7" y1="4" x2="17" y2="4" stroke="#60A5FA" stroke-width="1"/>
|
||||
<circle cx="10" cy="16" r="1.5" fill="#60A5FA" opacity="0.4"/>
|
||||
<circle cx="14" cy="18" r="1" fill="#60A5FA" opacity="0.3"/>
|
||||
<text x="12" y="34" class="lbl">Science</text>
|
||||
</g>
|
||||
|
||||
<!-- Habit / Loop (animated subtle rotation) -->
|
||||
<g transform="translate(150, 410)">
|
||||
<path d="M 12,4 A 8,8 0 1 1 4,12" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="20s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 12,4 L 14,7 L 10,7 Z" fill="#10B981"/>
|
||||
<circle cx="12" cy="12" r="3" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.4"/>
|
||||
<text x="12" y="34" class="lbl">Habit</text>
|
||||
</g>
|
||||
|
||||
<!-- Breathe / Meditation -->
|
||||
<g transform="translate(210, 410)">
|
||||
<circle cx="12" cy="12" r="8" fill="none" stroke="#6366F1" stroke-width="1" opacity="0.4">
|
||||
<animate attributeName="r" values="6;10;6" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="12" cy="12" r="3" fill="#818CF8" opacity="0.6">
|
||||
<animate attributeName="r" values="2;4;2" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="12" y="34" class="lbl">Breathe</text>
|
||||
</g>
|
||||
|
||||
<!-- Evidence (diamond mosaic) -->
|
||||
<g transform="translate(270, 410)" filter="url(#gl)">
|
||||
<path d="M 8,6 L 12,3 L 16,6 L 12,9 Z" fill="#8B5CF6" opacity="0.6"/>
|
||||
<path d="M 4,12 L 8,9 L 12,12 L 8,15 Z" fill="#3B82F6" opacity="0.5"/>
|
||||
<path d="M 12,12 L 16,9 L 20,12 L 16,15 Z" fill="#10B981" opacity="0.5"/>
|
||||
<path d="M 8,18 L 12,15 L 16,18 L 12,21 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<text x="12" y="34" class="lbl">Evidence</text>
|
||||
</g>
|
||||
|
||||
<!-- Fragment (the core ◇) -->
|
||||
<g transform="translate(330, 410)" filter="url(#gl)">
|
||||
<path d="M 12,2 L 20,12 L 12,22 L 4,12 Z" fill="url(#gAmb)" opacity="0.85"/>
|
||||
<path d="M 12,2 L 20,12 L 4,12 Z" fill="#fff" opacity="0.12"/>
|
||||
<line x1="4" y1="12" x2="20" y2="12" stroke="#fff" stroke-width="0.4" opacity="0.3"/>
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2.5s" repeatCount="indefinite"/>
|
||||
<text x="12" y="34" class="lbl">Fragment</text>
|
||||
</g>
|
||||
|
||||
<!-- Spectrum (prismatic bar) -->
|
||||
<g transform="translate(390, 410)">
|
||||
<rect x="4" y="8" width="4" height="8" rx="1" fill="#8B5CF6" opacity="0.7"/>
|
||||
<rect x="9" y="6" width="4" height="12" rx="1" fill="#3B82F6" opacity="0.7"/>
|
||||
<rect x="14" y="10" width="4" height="6" rx="1" fill="#10B981" opacity="0.7"/>
|
||||
<rect x="4" y="18" width="14" height="2" rx="1" fill="#1C2240"/>
|
||||
<text x="12" y="34" class="lbl">Spectrum</text>
|
||||
</g>
|
||||
|
||||
<!-- Totals -->
|
||||
<text x="280" y="480" font-size="9" fill="#475569" text-anchor="middle">38 icons — 24×24px each — Glow filters on primary actions — Animations on streak, breathe, rotate, notify</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
187
initial mockups/assets/icons-distortions.svg
Normal file
187
initial mockups/assets/icons-distortions.svg
Normal file
@@ -0,0 +1,187 @@
|
||||
<svg viewBox="0 0 560 320" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="gAmber" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="amberGr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="560" height="320" fill="#050508"/>
|
||||
<text x="280" y="24" font-size="12" font-weight="600" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">COGNITIVE DISTORTION ICONS</text>
|
||||
<text x="280" y="38" font-size="9" fill="#475569" text-anchor="middle">10 fragment types — Amber (#F59E0B) default, each with unique crystalline geometry</text>
|
||||
|
||||
<!-- Row 1: 5 icons -->
|
||||
<!-- Each icon is 24x24, rendered in a 100x100 cell with label -->
|
||||
|
||||
<!-- 1. CATASTROPHIZING — A downward-cascading shard breaking into pieces -->
|
||||
<g transform="translate(28, 60)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Main shard falling -->
|
||||
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#amberGr)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Smaller fragment broken off, lower-left -->
|
||||
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<!-- Smaller fragment, lower-right -->
|
||||
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
<!-- Downward motion lines -->
|
||||
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="-3" y1="12" x2="-5" y2="17" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="3" y1="12" x2="5" y2="17" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Catastrophizing</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. BLACK-AND-WHITE — A diamond split in half: one side filled, one side outline -->
|
||||
<g transform="translate(140, 60)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Left half: filled -->
|
||||
<path d="M 0,-10 L -7,0 L 0,10 L 0,0 Z" fill="url(#amberGr)" opacity="0.85"/>
|
||||
<!-- Right half: outline only -->
|
||||
<path d="M 0,-10 L 7,0 L 0,10 L 0,0 Z" fill="none" stroke="#F59E0B" stroke-width="1"/>
|
||||
<!-- Center dividing line -->
|
||||
<line x1="0" y1="-10" x2="0" y2="10" stroke="#FEF3C7" stroke-width="0.6" opacity="0.5"/>
|
||||
<!-- Top facet highlight on filled side -->
|
||||
<path d="M 0,-10 L -7,0 L 0,0 Z" fill="#fff" opacity="0.12"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Black-and-White</text>
|
||||
</g>
|
||||
|
||||
<!-- 3. MIND READING — A hexagonal head with a small eye/diamond inside -->
|
||||
<g transform="translate(252, 60)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Hexagonal head outline -->
|
||||
<path d="M 0,-10 L 8,-5 L 8,5 L 0,10 L -8,5 L -8,-5 Z" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.7"/>
|
||||
<!-- Inner diamond (the "read" thought) -->
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#amberGr)" opacity="0.8"/>
|
||||
<path d="M 0,-4 L 4,0 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Radiating lines from inner diamond (thought waves) -->
|
||||
<line x1="5" y1="-3" x2="9" y2="-6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||||
<line x1="5" y1="3" x2="9" y2="6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||||
<line x1="-5" y1="-3" x2="-9" y2="-6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Mind Reading</text>
|
||||
</g>
|
||||
|
||||
<!-- 4. FORTUNE TELLING — A crystal ball shape with forward-pointing shard -->
|
||||
<g transform="translate(364, 60)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Crystal ball: faceted circle (octagon) -->
|
||||
<path d="M 0,-9 L 6,-6 L 9,0 L 6,6 L 0,9 L -6,6 L -9,0 L -6,-6 Z" fill="none" stroke="#F59E0B" stroke-width="0.8" opacity="0.6"/>
|
||||
<!-- Inner glow -->
|
||||
<circle cx="0" cy="0" r="4" fill="#F59E0B" opacity="0.15"/>
|
||||
<!-- Forward arrow shard -->
|
||||
<path d="M 2,0 L 10,-3 L 14,0 L 10,3 Z" fill="url(#amberGr)" opacity="0.8"/>
|
||||
<path d="M 2,0 L 10,-3 L 14,0 Z" fill="#fff" opacity="0.12"/>
|
||||
<!-- Base -->
|
||||
<path d="M -5,9 L 5,9 L 3,12 L -3,12 Z" fill="#F59E0B" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Fortune Telling</text>
|
||||
</g>
|
||||
|
||||
<!-- 5. PERSONALIZATION — Inward-pointing shard arrows converging on center -->
|
||||
<g transform="translate(476, 60)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Center dot -->
|
||||
<circle cx="0" cy="0" r="2.5" fill="url(#amberGr)" opacity="0.8"/>
|
||||
<!-- Four inward-pointing shards -->
|
||||
<path d="M 0,-12 L 2,-6 L 0,-4 L -2,-6 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<path d="M 12,0 L 6,2 L 4,0 L 6,-2 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M 0,12 L -2,6 L 0,4 L 2,6 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M -12,0 L -6,-2 L -4,0 L -6,2 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<!-- Subtle connecting lines -->
|
||||
<line x1="0" y1="-4" x2="0" y2="-2.5" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="4" y1="0" x2="2.5" y2="0" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Personalization</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 2: 5 icons -->
|
||||
|
||||
<!-- 6. DISCOUNTING POSITIVES — A star/gem shape with a line through it -->
|
||||
<g transform="translate(28, 180)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- 6-pointed star -->
|
||||
<path d="M 0,-10 L 3,-4 L 9,-4 L 5,1 L 7,7 L 0,4 L -7,7 L -5,1 L -9,-4 L -3,-4 Z" fill="url(#amberGr)" opacity="0.5"/>
|
||||
<path d="M 0,-10 L 3,-4 L -3,-4 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Strike-through line (discounting) -->
|
||||
<line x1="-10" y1="4" x2="10" y2="-4" stroke="#FEF3C7" stroke-width="1.2" opacity="0.7"/>
|
||||
<!-- Dimmed effect on the star -->
|
||||
<path d="M 0,-10 L 3,-4 L 9,-4 L 5,1 L 7,7 L 0,4 L -7,7 L -5,1 L -9,-4 L -3,-4 Z" fill="#050508" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Discounting +</text>
|
||||
</g>
|
||||
|
||||
<!-- 7. EMOTIONAL REASONING — A heart shape made of angular geometry with = sign -->
|
||||
<g transform="translate(140, 180)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Angular heart: two triangles forming a V-heart -->
|
||||
<path d="M 0,8 L -8,-1 L -5,-7 L 0,-3 L 5,-7 L 8,-1 Z" fill="url(#amberGr)" opacity="0.7"/>
|
||||
<path d="M 0,-3 L -5,-7 L -8,-1 Z" fill="#fff" opacity="0.12"/>
|
||||
<!-- Equals sign next to it -->
|
||||
<line x1="9" y1="-2" x2="14" y2="-2" stroke="#FCD34D" stroke-width="1" opacity="0.6"/>
|
||||
<line x1="9" y1="2" x2="14" y2="2" stroke="#FCD34D" stroke-width="1" opacity="0.6"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Emotional Reasoning</text>
|
||||
</g>
|
||||
|
||||
<!-- 8. SHOULD STATEMENTS — A rigid angular ruler/bracket shape -->
|
||||
<g transform="translate(252, 180)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Rigid L-bracket -->
|
||||
<path d="M -6,-10 L -6,10 L 6,10" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linejoin="miter"/>
|
||||
<!-- Tick marks along the ruler -->
|
||||
<line x1="-6" y1="-6" x2="-3" y2="-6" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="-2" x2="-3" y2="-2" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="2" x2="-3" y2="2" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="6" x2="-3" y2="6" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<!-- Angular exclamation inside -->
|
||||
<path d="M 2,-4 L 3,-1 L 1,-1 Z" fill="#FCD34D" opacity="0.6"/>
|
||||
<circle cx="2" cy="1" r="0.8" fill="#FCD34D" opacity="0.6"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Should Statements</text>
|
||||
</g>
|
||||
|
||||
<!-- 9. LABELING — An angular tag/label shape -->
|
||||
<g transform="translate(364, 180)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Tag shape: pentagon pointing right -->
|
||||
<path d="M -8,-7 L 5,-7 L 10,0 L 5,7 L -8,7 Z" fill="url(#amberGr)" opacity="0.6"/>
|
||||
<path d="M -8,-7 L 5,-7 L 10,0 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Hole in tag -->
|
||||
<circle cx="-3" cy="0" r="2" fill="#050508" opacity="0.6" stroke="#FCD34D" stroke-width="0.5"/>
|
||||
<!-- Inner line -->
|
||||
<line x1="1" y1="-3" x2="1" y2="3" stroke="#FEF3C7" stroke-width="0.4" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Labeling</text>
|
||||
</g>
|
||||
|
||||
<!-- 10. OVERGENERALIZATION — One dot replicating into many -->
|
||||
<g transform="translate(476, 180)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Single source diamond -->
|
||||
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#amberGr)" opacity="0.9"/>
|
||||
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Arrow -->
|
||||
<line x1="-3" y1="0" x2="0" y2="0" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
<!-- Multiple replicated diamonds (spreading out) -->
|
||||
<path d="M 2,-6 L 4,-8 L 6,-6 L 4,-4 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<path d="M 4,0 L 6,-2 L 8,0 L 6,2 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M 2,6 L 4,4 L 6,6 L 4,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 8,-4 L 10,-6 L 12,-4 L 10,-2 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
<path d="M 8,4 L 10,2 L 12,4 L 10,6 Z" fill="#F59E0B" opacity="0.35"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Overgeneralization</text>
|
||||
</g>
|
||||
|
||||
<!-- Color reference -->
|
||||
<text x="280" y="278" font-size="9" fill="#475569" text-anchor="middle">Primary: #F59E0B (Amber) — Gradient: #FDE68A to #D97706 — Highlight: #FCD34D</text>
|
||||
<text x="280" y="292" font-size="9" fill="#475569" text-anchor="middle">All icons 24x24px — Glow filter for active/detected state — Outlined for reference/guide</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
258
initial mockups/assets/icons-tab-bar.svg
Normal file
258
initial mockups/assets/icons-tab-bar.svg
Normal file
@@ -0,0 +1,258 @@
|
||||
<svg viewBox="0 0 520 480" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Glow filters matched to soft-elegance: layered gaussian blur + source merge -->
|
||||
<filter id="gAmethyst" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="gAmber" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="gEmerald" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="gSapphire" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="gSoft" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Gradients — mimicking the soft-elegance per-blade gradient approach -->
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSoftLight" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#F1F5F9"/>
|
||||
<stop offset="100%" stop-color="#CBD5E1"/>
|
||||
</linearGradient>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="520" height="480" fill="#050508"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="260" y="32" font-size="14" font-weight="600" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">TAB BAR ICONS</text>
|
||||
|
||||
<!-- ================================================ -->
|
||||
<!-- ROW 1: ACTIVE STATES -->
|
||||
<!-- ================================================ -->
|
||||
<text x="260" y="68" font-size="11" fill="#475569" text-anchor="middle" letter-spacing="0.08em">ACTIVE</text>
|
||||
|
||||
<!-- ◇ TURN — Active (Amethyst) -->
|
||||
<g transform="translate(52, 100)">
|
||||
<g filter="url(#gAmethyst)">
|
||||
<!-- Outer diamond -->
|
||||
<path d="M 24,2 L 44,24 L 24,46 L 4,24 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<!-- Inner facet: horizontal midline creating top/bottom facets -->
|
||||
<line x1="4" y1="24" x2="44" y2="24" stroke="#fff" stroke-width="0.5" opacity="0.35"/>
|
||||
<!-- Inner facet: vertical center line -->
|
||||
<line x1="24" y1="2" x2="24" y2="46" stroke="#fff" stroke-width="0.4" opacity="0.2"/>
|
||||
<!-- Top facet highlight -->
|
||||
<path d="M 24,2 L 44,24 L 4,24 Z" fill="#fff" opacity="0.12"/>
|
||||
<!-- Specular glint -->
|
||||
<circle cx="18" cy="18" r="2" fill="#fff" opacity="0.4"/>
|
||||
<!-- Small rotating inner shard (suggests kaleidoscope turn) -->
|
||||
<path d="M 24,12 L 30,24 L 24,36 L 18,24 Z" fill="none" stroke="#E9D5FF" stroke-width="0.6" opacity="0.5"/>
|
||||
</g>
|
||||
<text x="24" y="64" font-size="10" font-weight="600" fill="#C4B5FD" text-anchor="middle" letter-spacing="0.06em">TURN</text>
|
||||
</g>
|
||||
|
||||
<!-- ✦ MIRROR — Active (Amber) -->
|
||||
<g transform="translate(152, 100)">
|
||||
<g filter="url(#gAmber)">
|
||||
<!-- Hexagonal mirror shape -->
|
||||
<path d="M 24,3 L 42,14 L 42,35 L 24,46 L 6,35 L 6,14 Z" fill="url(#grAmber)" opacity="0.9"/>
|
||||
<!-- Horizontal reflection line -->
|
||||
<line x1="6" y1="24.5" x2="42" y2="24.5" stroke="#fff" stroke-width="0.6" opacity="0.4"/>
|
||||
<!-- Inner hexagon (mirror reflection) -->
|
||||
<path d="M 24,10 L 35,17 L 35,32 L 24,39 L 13,32 L 13,17 Z" fill="none" stroke="#FEF3C7" stroke-width="0.5" opacity="0.4"/>
|
||||
<!-- Top facet light -->
|
||||
<path d="M 24,3 L 42,14 L 6,14 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Specular -->
|
||||
<circle cx="19" cy="17" r="1.8" fill="#fff" opacity="0.35"/>
|
||||
</g>
|
||||
<text x="24" y="64" font-size="10" font-weight="600" fill="#FCD34D" text-anchor="middle" letter-spacing="0.06em">MIRROR</text>
|
||||
</g>
|
||||
|
||||
<!-- ◎ LENS — Active (Emerald) -->
|
||||
<g transform="translate(252, 100)">
|
||||
<g filter="url(#gEmerald)">
|
||||
<!-- Outer lens circle -->
|
||||
<circle cx="24" cy="24" r="20" fill="none" stroke="url(#grEmerald)" stroke-width="2" opacity="0.9"/>
|
||||
<!-- Middle ring -->
|
||||
<circle cx="24" cy="24" r="13" fill="none" stroke="#6EE7B7" stroke-width="1" opacity="0.5"/>
|
||||
<!-- Inner core (focus point) -->
|
||||
<circle cx="24" cy="24" r="5" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<!-- Cross-hair lines suggesting focus/precision -->
|
||||
<line x1="24" y1="6" x2="24" y2="14" stroke="#A7F3D0" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="24" y1="34" x2="24" y2="42" stroke="#A7F3D0" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="6" y1="24" x2="14" y2="24" stroke="#A7F3D0" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="34" y1="24" x2="42" y2="24" stroke="#A7F3D0" stroke-width="0.5" opacity="0.4"/>
|
||||
<!-- Specular -->
|
||||
<circle cx="19" cy="19" r="2.5" fill="#fff" opacity="0.2"/>
|
||||
</g>
|
||||
<text x="24" y="64" font-size="10" font-weight="600" fill="#6EE7B7" text-anchor="middle" letter-spacing="0.06em">LENS</text>
|
||||
</g>
|
||||
|
||||
<!-- ▦ GALLERY — Active (Sapphire) -->
|
||||
<g transform="translate(352, 100)">
|
||||
<g filter="url(#gSapphire)">
|
||||
<!-- 2x2 grid of small faceted shapes -->
|
||||
<!-- Top-left diamond -->
|
||||
<path d="M 12,6 L 20,12 L 12,18 L 4,12 Z" fill="url(#grSapphire)" opacity="0.85"/>
|
||||
<path d="M 12,6 L 20,12 L 4,12 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Top-right diamond -->
|
||||
<path d="M 36,6 L 44,12 L 36,18 L 28,12 Z" fill="url(#grSapphire)" opacity="0.75"/>
|
||||
<path d="M 36,6 L 44,12 L 28,12 Z" fill="#fff" opacity="0.08"/>
|
||||
<!-- Bottom-left diamond -->
|
||||
<path d="M 12,28 L 20,34 L 12,40 L 4,34 Z" fill="url(#grSapphire)" opacity="0.7"/>
|
||||
<path d="M 12,28 L 20,34 L 4,34 Z" fill="#fff" opacity="0.08"/>
|
||||
<!-- Bottom-right diamond -->
|
||||
<path d="M 36,28 L 44,34 L 36,40 L 28,34 Z" fill="url(#grSapphire)" opacity="0.85"/>
|
||||
<path d="M 36,28 L 44,34 L 28,34 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Thin connecting lines -->
|
||||
<line x1="20" y1="12" x2="28" y2="12" stroke="#93C5FD" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="12" y1="18" x2="12" y2="28" stroke="#93C5FD" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="36" y1="18" x2="36" y2="28" stroke="#93C5FD" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="20" y1="34" x2="28" y2="34" stroke="#93C5FD" stroke-width="0.4" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="24" y="64" font-size="10" font-weight="600" fill="#93C5FD" text-anchor="middle" letter-spacing="0.06em">GALLERY</text>
|
||||
</g>
|
||||
|
||||
<!-- ● YOU — Active (Soft Light) -->
|
||||
<g transform="translate(452, 100)">
|
||||
<g filter="url(#gSoft)">
|
||||
<!-- Angular avatar: hexagonal head + angular shoulders -->
|
||||
<path d="M 24,4 L 32,10 L 32,20 L 24,26 L 16,20 L 16,10 Z" fill="url(#grSoftLight)" opacity="0.85"/>
|
||||
<path d="M 24,4 L 32,10 L 16,10 Z" fill="#fff" opacity="0.12"/>
|
||||
<!-- Shoulders: angular trapezoid -->
|
||||
<path d="M 8,46 L 14,32 L 24,28 L 34,32 L 40,46 Z" fill="url(#grSoftLight)" opacity="0.65"/>
|
||||
<path d="M 14,32 L 24,28 L 34,32 Z" fill="#fff" opacity="0.08"/>
|
||||
<!-- Specular on face -->
|
||||
<circle cx="20" cy="14" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="24" y="64" font-size="10" font-weight="600" fill="#E2E8F0" text-anchor="middle" letter-spacing="0.06em">YOU</text>
|
||||
</g>
|
||||
|
||||
<!-- ================================================ -->
|
||||
<!-- ROW 2: INACTIVE STATES -->
|
||||
<!-- ================================================ -->
|
||||
<text x="260" y="212" font-size="11" fill="#475569" text-anchor="middle" letter-spacing="0.08em">INACTIVE</text>
|
||||
|
||||
<!-- ◇ TURN — Inactive -->
|
||||
<g transform="translate(52, 240)">
|
||||
<path d="M 24,2 L 44,24 L 24,46 L 4,24 Z" fill="none" stroke="#475569" stroke-width="1.2"/>
|
||||
<line x1="4" y1="24" x2="44" y2="24" stroke="#475569" stroke-width="0.4" opacity="0.3"/>
|
||||
<path d="M 24,12 L 30,24 L 24,36 L 18,24 Z" fill="none" stroke="#475569" stroke-width="0.5" opacity="0.3"/>
|
||||
<text x="24" y="64" font-size="10" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.06em">TURN</text>
|
||||
</g>
|
||||
|
||||
<!-- ✦ MIRROR — Inactive -->
|
||||
<g transform="translate(152, 240)">
|
||||
<path d="M 24,3 L 42,14 L 42,35 L 24,46 L 6,35 L 6,14 Z" fill="none" stroke="#475569" stroke-width="1.2"/>
|
||||
<line x1="6" y1="24.5" x2="42" y2="24.5" stroke="#475569" stroke-width="0.4" opacity="0.3"/>
|
||||
<path d="M 24,10 L 35,17 L 35,32 L 24,39 L 13,32 L 13,17 Z" fill="none" stroke="#475569" stroke-width="0.4" opacity="0.25"/>
|
||||
<text x="24" y="64" font-size="10" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.06em">MIRROR</text>
|
||||
</g>
|
||||
|
||||
<!-- ◎ LENS — Inactive -->
|
||||
<g transform="translate(252, 240)">
|
||||
<circle cx="24" cy="24" r="20" fill="none" stroke="#475569" stroke-width="1.2"/>
|
||||
<circle cx="24" cy="24" r="13" fill="none" stroke="#475569" stroke-width="0.5" opacity="0.3"/>
|
||||
<circle cx="24" cy="24" r="5" fill="none" stroke="#475569" stroke-width="0.8" opacity="0.5"/>
|
||||
<line x1="24" y1="6" x2="24" y2="14" stroke="#475569" stroke-width="0.4" opacity="0.25"/>
|
||||
<line x1="24" y1="34" x2="24" y2="42" stroke="#475569" stroke-width="0.4" opacity="0.25"/>
|
||||
<line x1="6" y1="24" x2="14" y2="24" stroke="#475569" stroke-width="0.4" opacity="0.25"/>
|
||||
<line x1="34" y1="24" x2="42" y2="24" stroke="#475569" stroke-width="0.4" opacity="0.25"/>
|
||||
<text x="24" y="64" font-size="10" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.06em">LENS</text>
|
||||
</g>
|
||||
|
||||
<!-- ▦ GALLERY — Inactive -->
|
||||
<g transform="translate(352, 240)">
|
||||
<path d="M 12,6 L 20,12 L 12,18 L 4,12 Z" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<path d="M 36,6 L 44,12 L 36,18 L 28,12 Z" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<path d="M 12,28 L 20,34 L 12,40 L 4,34 Z" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<path d="M 36,28 L 44,34 L 36,40 L 28,34 Z" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<line x1="20" y1="12" x2="28" y2="12" stroke="#475569" stroke-width="0.3" opacity="0.25"/>
|
||||
<line x1="12" y1="18" x2="12" y2="28" stroke="#475569" stroke-width="0.3" opacity="0.25"/>
|
||||
<line x1="36" y1="18" x2="36" y2="28" stroke="#475569" stroke-width="0.3" opacity="0.25"/>
|
||||
<line x1="20" y1="34" x2="28" y2="34" stroke="#475569" stroke-width="0.3" opacity="0.25"/>
|
||||
<text x="24" y="64" font-size="10" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.06em">GALLERY</text>
|
||||
</g>
|
||||
|
||||
<!-- ● YOU — Inactive -->
|
||||
<g transform="translate(452, 240)">
|
||||
<path d="M 24,4 L 32,10 L 32,20 L 24,26 L 16,20 L 16,10 Z" fill="none" stroke="#475569" stroke-width="1.2"/>
|
||||
<path d="M 8,46 L 14,32 L 24,28 L 34,32 L 40,46 Z" fill="none" stroke="#475569" stroke-width="1" opacity="0.6"/>
|
||||
<text x="24" y="64" font-size="10" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.06em">YOU</text>
|
||||
</g>
|
||||
|
||||
<!-- ================================================ -->
|
||||
<!-- ROW 3: SIMULATED TAB BAR (in-context preview) -->
|
||||
<!-- ================================================ -->
|
||||
<text x="260" y="356" font-size="11" fill="#475569" text-anchor="middle" letter-spacing="0.08em">TAB BAR PREVIEW (Turn active)</text>
|
||||
|
||||
<!-- Tab bar background -->
|
||||
<rect x="35" y="370" width="450" height="80" rx="16" fill="#0A0E1A" stroke="#1C2240" stroke-width="1"/>
|
||||
<line x1="35" y1="370" x2="485" y2="370" stroke="#1C2240" stroke-width="1"/>
|
||||
|
||||
<!-- Turn — Active -->
|
||||
<g transform="translate(62, 380)">
|
||||
<g filter="url(#gAmethyst)">
|
||||
<path d="M 12,1 L 22,12 L 12,23 L 2,12 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<path d="M 12,1 L 22,12 L 2,12 Z" fill="#fff" opacity="0.1"/>
|
||||
<line x1="2" y1="12" x2="22" y2="12" stroke="#fff" stroke-width="0.4" opacity="0.25"/>
|
||||
</g>
|
||||
<text x="12" y="36" font-size="9" font-weight="600" fill="#C4B5FD" text-anchor="middle" letter-spacing="0.04em">Turn</text>
|
||||
</g>
|
||||
|
||||
<!-- Mirror — Inactive -->
|
||||
<g transform="translate(152, 380)">
|
||||
<path d="M 12,1.5 L 21,7.5 L 21,17.5 L 12,23.5 L 3,17.5 L 3,7.5 Z" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<text x="12" y="36" font-size="9" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.04em">Mirror</text>
|
||||
</g>
|
||||
|
||||
<!-- Lens — Inactive -->
|
||||
<g transform="translate(242, 380)">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<circle cx="12" cy="12" r="3" fill="none" stroke="#475569" stroke-width="0.6" opacity="0.5"/>
|
||||
<text x="12" y="36" font-size="9" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.04em">Lens</text>
|
||||
</g>
|
||||
|
||||
<!-- Gallery — Inactive -->
|
||||
<g transform="translate(327, 380)">
|
||||
<path d="M 6,3 L 10,6 L 6,9 L 2,6 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<path d="M 18,3 L 22,6 L 18,9 L 14,6 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<path d="M 6,15 L 10,18 L 6,21 L 2,18 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<path d="M 18,15 L 22,18 L 18,21 L 14,18 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<text x="12" y="36" font-size="9" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.04em">Gallery</text>
|
||||
</g>
|
||||
|
||||
<!-- You — Inactive -->
|
||||
<g transform="translate(417, 380)">
|
||||
<path d="M 12,2 L 16,5 L 16,10 L 12,13 L 8,10 L 8,5 Z" fill="none" stroke="#475569" stroke-width="0.9"/>
|
||||
<path d="M 4,23 L 7,16 L 12,14 L 17,16 L 20,23 Z" fill="none" stroke="#475569" stroke-width="0.8" opacity="0.6"/>
|
||||
<text x="12" y="36" font-size="9" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.04em">You</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
329
initial mockups/assets/kalei-logo.svg
Normal file
329
initial mockups/assets/kalei-logo.svg
Normal file
@@ -0,0 +1,329 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient for halo -->
|
||||
<radialGradient id="prismatic" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF"><animate attributeName="stop-color" values="#FFFFFF;#E0D5FF;#FFFFFF" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="40%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Core transition glow (replaces hard white circle) -->
|
||||
<radialGradient id="coreHalo" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
<stop offset="60%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
<stop offset="80%" stop-color="#C4B5FD" stop-opacity="0.08"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/><animate attributeName="stop-opacity" values="0.05;0.12;0.05" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Filters -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="bladeTipGlow" x="-200%" y="-200%" width="500%" height="500%">
|
||||
<feGaussianBlur stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Subtle breathing aura -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Edge shimmer with color tint -->
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#C4B5FD" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#93C5FD" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="0.83s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#6EE7B7" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="1.66s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#FDE68A" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#FBCFE8" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="3.33s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#A5B4FC" stroke-width="1.2" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="4.16s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Blade tip glow points — soft colored pulses at outer tips of each blade -->
|
||||
<g filter="url(#bladeTipGlow)">
|
||||
<circle cx="-30" cy="160" r="4" fill="#A78BFA" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#3B82F6" opacity="0" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="4.5s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#10B981" opacity="0" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="5s" begin="1s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#F59E0B" opacity="0" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="4.2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#EC4899" opacity="0" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="4.8s" begin="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#6366F1" opacity="0" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0;0.35;0" dur="4.3s" begin="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE - SOFT ELEGANCE FINALIST -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Soft radial gradient halo with prismatic color cycling -->
|
||||
<circle r="45" fill="url(#prismatic)" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Organic core transition glow (replaces hard white circle) -->
|
||||
<circle r="55" fill="url(#coreHalo)">
|
||||
<animate attributeName="r" values="50;58;50" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Secondary set of 6 thicker colored rays (per brand colors) rotating slowly -->
|
||||
<g opacity="0.35">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="150s" repeatCount="indefinite"/>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#A78BFA">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#3B82F6" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#10B981" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.4s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#F59E0B" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#EC4899" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.3s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#6366F1" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.5s" begin="2s" repeatCount="indefinite"/>
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<!-- Primary set of 12 thin white rays radiating outward, alternating lengths -->
|
||||
<g opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="75s" repeatCount="indefinite"/>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="0s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(30)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(60)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(90)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.8s" begin="0.9s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(120)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(150)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.6s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(180)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.3s" begin="1.8s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(210)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.7s" begin="2.1s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(240)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.1s" begin="2.4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(270)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.9s" begin="2.7s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(300)">
|
||||
<animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(330)">
|
||||
<animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.8s" begin="3.3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Central bright white-to-prismatic circle with heavy glow and pulsing -->
|
||||
<circle r="12" fill="#ffffff" filter="url(#coreGlow)" opacity="0.95">
|
||||
<animate attributeName="r" values="10;14;10" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.85;1;0.85" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Inner refraction crescent -->
|
||||
<circle cx="-4" cy="-4" r="6" fill="#ffffff" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.2;0.35;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Tiny sharp specular highlight off-center -->
|
||||
<circle cx="3" cy="-3" r="1.5" fill="#ffffff" opacity="0.9" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Additional warm specular (new — adds dimension) -->
|
||||
<circle cx="-2" cy="5" r="2" fill="#FDE68A" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.15;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/>
|
||||
<animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 21 KiB |
389
initial mockups/assets/loading-animations.svg
Normal file
389
initial mockups/assets/loading-animations.svg
Normal file
@@ -0,0 +1,389 @@
|
||||
<svg viewBox="0 0 700 820" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="shimmerGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#1C2240" stop-opacity="0"/>
|
||||
<stop offset="50%" stop-color="#2A3158" stop-opacity="1"/>
|
||||
<stop offset="100%" stop-color="#1C2240" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="successGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#10B981" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#10B981" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<filter id="glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="820" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">LOADING AND ANIMATION STATES</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">Spinners, skeleton shimmers, Turn animation, AI thinking, success burst, breathing logo</text>
|
||||
|
||||
<!-- Row 1: Spinners -->
|
||||
<text x="24" y="74" class="section-lbl">SPINNERS</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- 1. Fragment Spinner — rotating diamond with trail -->
|
||||
<g transform="translate(100, 140)">
|
||||
<g filter="url(#glowMd)">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.5s" repeatCount="indefinite"/>
|
||||
<!-- Trail fragments (fading) -->
|
||||
<path d="M 0,-20 L 4,-16 L 0,-12 L -4,-16 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<path d="M 0,-20 L 4,-16 L 0,-16 Z" fill="#fff" opacity="0.2"/>
|
||||
<g transform="rotate(90)">
|
||||
<path d="M 0,-20 L 4,-16 L 0,-12 L -4,-16 Z" fill="url(#grSapphire)" opacity="0.6"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<path d="M 0,-20 L 4,-16 L 0,-12 L -4,-16 Z" fill="url(#grEmerald)" opacity="0.3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<path d="M 0,-20 L 4,-16 L 0,-12 L -4,-16 Z" fill="url(#grAmber)" opacity="0.15"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="42" class="lbl">Fragment Spinner</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. Iris Spinner — mini kaleidoscope rotation -->
|
||||
<g transform="translate(260, 140)">
|
||||
<g filter="url(#glowMd)">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grAmethyst)" opacity="0.6">
|
||||
<animate attributeName="fill-opacity" values="0.4;0.7;0.4" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(60)">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grSapphire)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grEmerald)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grAmber)" opacity="0.6"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grRose)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grIndigo)" opacity="0.5"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="3" fill="#fff" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.3;0.7;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="42" class="lbl">Iris Spinner (mini logo)</text>
|
||||
</g>
|
||||
|
||||
<!-- 3. Dot Pulse Loader -->
|
||||
<g transform="translate(420, 140)">
|
||||
<g filter="url(#glowSm)">
|
||||
<circle cx="-16" cy="0" r="4" fill="url(#grAmethyst)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="1.2s" begin="0s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="3;5;3" dur="1.2s" begin="0s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="0" cy="0" r="4" fill="url(#grSapphire)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="1.2s" begin="0.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="3;5;3" dur="1.2s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="16" cy="0" r="4" fill="url(#grEmerald)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="1.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="3;5;3" dur="1.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Dot Pulse</text>
|
||||
</g>
|
||||
|
||||
<!-- 4. Fragment Orbit Loader -->
|
||||
<g transform="translate(580, 140)">
|
||||
<g filter="url(#shimmer)">
|
||||
<!-- Orbit path -->
|
||||
<circle r="18" fill="none" stroke="#1C2240" stroke-width="0.4"/>
|
||||
<!-- Orbiting fragment -->
|
||||
<g>
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#grAmethyst)" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.5;1;0.5" dur="1.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateMotion dur="1.8s" repeatCount="indefinite" path="M0,-18 A18,18 0 1 1 -0.1,-18"/>
|
||||
</g>
|
||||
<!-- Ghost trail -->
|
||||
<g>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="#8B5CF6" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="1.8s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateMotion dur="1.8s" repeatCount="indefinite" path="M0,-18 A18,18 0 1 1 -0.1,-18" begin="0.3s"/>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="38" class="lbl">Fragment Orbit</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 2: Skeleton Shimmers -->
|
||||
<text x="24" y="204" class="section-lbl">SKELETON SHIMMERS</text>
|
||||
<line x1="24" y1="210" x2="670" y2="210" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Text skeleton -->
|
||||
<g transform="translate(175, 250)">
|
||||
<rect x="-120" y="-8" width="160" height="10" rx="5" fill="#121628"/>
|
||||
<rect x="-120" y="-8" width="40" height="10" rx="5" fill="url(#shimmerGrad)" opacity="0.5">
|
||||
<animate attributeName="x" values="-160;120" dur="1.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="-120" y="8" width="200" height="10" rx="5" fill="#121628"/>
|
||||
<rect x="-120" y="8" width="40" height="10" rx="5" fill="url(#shimmerGrad)" opacity="0.5">
|
||||
<animate attributeName="x" values="-160;160" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="-120" y="24" width="120" height="10" rx="5" fill="#121628"/>
|
||||
<rect x="-120" y="24" width="40" height="10" rx="5" fill="url(#shimmerGrad)" opacity="0.5">
|
||||
<animate attributeName="x" values="-160;80" dur="1.5s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="-20" y="54" class="lbl">Text skeleton shimmer</text>
|
||||
</g>
|
||||
|
||||
<!-- Card skeleton -->
|
||||
<g transform="translate(500, 250)">
|
||||
<rect x="-80" y="-30" width="160" height="80" rx="10" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Image placeholder -->
|
||||
<rect x="-68" y="-20" width="40" height="40" rx="6" fill="#121628"/>
|
||||
<rect x="-68" y="-20" width="20" height="40" rx="6" fill="url(#shimmerGrad)" opacity="0.4">
|
||||
<animate attributeName="x" values="-88;-28" dur="1.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<!-- Text lines -->
|
||||
<rect x="-16" y="-16" width="80" height="8" rx="4" fill="#121628"/>
|
||||
<rect x="-16" y="-16" width="20" height="8" rx="4" fill="url(#shimmerGrad)" opacity="0.4">
|
||||
<animate attributeName="x" values="-36;64" dur="1.5s" begin="0.1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="-16" y="-2" width="60" height="8" rx="4" fill="#121628"/>
|
||||
<rect x="-16" y="12" width="40" height="6" rx="3" fill="#121628"/>
|
||||
<text x="0" y="66" class="lbl">Card skeleton shimmer</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 3: Turn Animation, AI Thinking -->
|
||||
<text x="24" y="344" class="section-lbl">FEATURE ANIMATIONS</text>
|
||||
<line x1="24" y1="350" x2="670" y2="350" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Turn Animation — kaleidoscope shift -->
|
||||
<g transform="translate(175, 430)">
|
||||
<g filter="url(#glowLg)">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="60" dur="2s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grAmethyst)" opacity="0.5">
|
||||
<animate attributeName="fill-opacity" values="0.3;0.6;0.3" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(60)">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grSapphire)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grAmber)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grRose)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grIndigo)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Core pulse -->
|
||||
<circle r="8" fill="#fff" opacity="0.4" filter="url(#glowMd)">
|
||||
<animate attributeName="r" values="6;10;6" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#fff" opacity="0.7"/>
|
||||
</g>
|
||||
<text x="0" y="60" class="lbl">Turn Animation (reframe moment)</text>
|
||||
<text x="0" y="72" font-size="8" fill="#475569" text-anchor="middle">Rotates 60deg per cycle, pulses core</text>
|
||||
</g>
|
||||
|
||||
<!-- AI Thinking — 3 fragments oscillating -->
|
||||
<g transform="translate(475, 430)">
|
||||
<g filter="url(#glowMd)">
|
||||
<!-- Background bubble -->
|
||||
<rect x="-50" y="-20" width="100" height="40" rx="20" fill="#121628" stroke="#1C2240" stroke-width="0.6"/>
|
||||
<!-- Three oscillating fragments -->
|
||||
<g transform="translate(-20, 0)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#grAmethyst)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.2;0.8;0.2" dur="1.5s" begin="0s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="-20,-3;-20,3;-20,-3" dur="1.5s" begin="0s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(0, 0)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#grSapphire)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.2;0.8;0.2" dur="1.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="0,-3;0,3;0,-3" dur="1.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(20, 0)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#grEmerald)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.2;0.8;0.2" dur="1.5s" begin="0.6s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="20,-3;20,3;20,-3" dur="1.5s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="40" class="lbl">AI Thinking (Claude processing)</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 4: Success Burst, Breathing Logo -->
|
||||
<text x="24" y="524" class="section-lbl">COMPLETION STATES</text>
|
||||
<line x1="24" y1="530" x2="670" y2="530" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Success Burst -->
|
||||
<g transform="translate(175, 610)">
|
||||
<g filter="url(#glowLg)">
|
||||
<!-- Burst ring -->
|
||||
<circle r="30" fill="none" stroke="#10B981" stroke-width="2" opacity="0">
|
||||
<animate attributeName="r" values="10;35;40" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;0.3;0" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="20" fill="none" stroke="#6EE7B7" stroke-width="1" opacity="0">
|
||||
<animate attributeName="r" values="8;25;30" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.2;0" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- Central checkmark fragment -->
|
||||
<circle r="16" fill="url(#successGlow)" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<path d="M 0,-10 L 10,0 L 0,10 L -10,0 Z" fill="url(#grEmerald)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 10,0 L 0,0 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M -4,0 L -1,4 L 5,-3" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<!-- Particle shards -->
|
||||
<g>
|
||||
<path d="M 0,-22 L 2,-20 L 0,-18 L -2,-20 Z" fill="#6EE7B7" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.8;0" dur="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<g transform="rotate(72)"><path d="M 0,-22 L 2,-20 L 0,-18 L -2,-20 Z" fill="#6EE7B7" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.7;0" dur="1.5s" begin="0.1s" repeatCount="indefinite"/>
|
||||
</path></g>
|
||||
<g transform="rotate(144)"><path d="M 0,-22 L 2,-20 L 0,-18 L -2,-20 Z" fill="#A7F3D0" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</path></g>
|
||||
<g transform="rotate(216)"><path d="M 0,-22 L 2,-20 L 0,-18 L -2,-20 Z" fill="#6EE7B7" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.7;0" dur="1.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</path></g>
|
||||
<g transform="rotate(288)"><path d="M 0,-22 L 2,-20 L 0,-18 L -2,-20 Z" fill="#A7F3D0" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="1.5s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</path></g>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="56" class="lbl">Success Burst (Turn complete, goal achieved)</text>
|
||||
</g>
|
||||
|
||||
<!-- Breathing Logo -->
|
||||
<g transform="translate(475, 610)">
|
||||
<g filter="url(#glowMd)">
|
||||
<!-- Outer breathing aura -->
|
||||
<circle r="30" fill="#8B5CF6" opacity="0.04">
|
||||
<animate attributeName="r" values="25;35;25" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.02;0.08;0.02" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- Mini 3-blade iris -->
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 3,-1 L -2,22 L -3,1 Z" fill="url(#grAmethyst)" opacity="0.4">
|
||||
<animate attributeName="fill-opacity" values="0.3;0.5;0.3" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 3,-1 L -2,22 L -3,1 Z" fill="url(#grSapphire)" opacity="0.35"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 3,-1 L -2,22 L -3,1 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="4" fill="#fff" opacity="0.5" filter="url(#glowSm)">
|
||||
<animate attributeName="opacity" values="0.3;0.7;0.3" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="3;5;3" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="52" class="lbl">Breathing Logo (idle/splash)</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 5: Page Transition -->
|
||||
<text x="24" y="700" class="section-lbl">TRANSITIONS</text>
|
||||
<line x1="24" y1="706" x2="670" y2="706" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Page fade transition -->
|
||||
<g transform="translate(175, 760)">
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- "From" state -->
|
||||
<rect x="-55" y="-20" width="40" height="40" rx="6" fill="#121628" stroke="#1C2240" stroke-width="0.5" opacity="0.4"/>
|
||||
<text x="-35" y="2" font-size="7" fill="#475569" text-anchor="middle">From</text>
|
||||
<!-- Arrow -->
|
||||
<path d="M -8,0 L 8,0 M 4,-4 L 8,0 L 4,4" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<!-- "To" state -->
|
||||
<rect x="15" y="-20" width="40" height="40" rx="6" fill="#121628" stroke="#8B5CF6" stroke-width="0.5" opacity="0.8"/>
|
||||
<text x="35" y="2" font-size="7" fill="#C4B5FD" text-anchor="middle">To</text>
|
||||
</g>
|
||||
<text x="0" y="40" class="lbl">Fade + slide up transition</text>
|
||||
</g>
|
||||
|
||||
<!-- Fragment scatter transition -->
|
||||
<g transform="translate(475, 760)">
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Scattered fragments converging -->
|
||||
<path d="M -30,-15 L -26,-11 L -30,-7 L -34,-11 Z" fill="url(#grAmethyst)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="-30,-15;0,0;-30,-15" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 25,-20 L 29,-16 L 25,-12 L 21,-16 Z" fill="url(#grSapphire)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2s" begin="0.2s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="25,-20;0,0;25,-20" dur="2s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 20,18 L 24,22 L 20,26 L 16,22 Z" fill="url(#grEmerald)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="20,18;0,0;20,18" dur="2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M -28,12 L -24,16 L -28,20 L -32,16 Z" fill="url(#grAmber)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="-28,12;0,0;-28,12" dur="2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Center convergence point -->
|
||||
<circle r="3" fill="#fff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.8;0" dur="2s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="40" class="lbl">Fragment scatter/converge transition</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="812" font-size="8" fill="#334155" text-anchor="middle">All animations use SMIL for broad SVG compatibility — breathing, rotation, opacity, and transform animations</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 21 KiB |
301
initial mockups/assets/patterns-kaleidoscope.svg
Normal file
301
initial mockups/assets/patterns-kaleidoscope.svg
Normal file
@@ -0,0 +1,301 @@
|
||||
<svg viewBox="0 0 700 740" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="4.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="coreGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#fff" stop-opacity="0.3"/>
|
||||
<stop offset="50%" stop-color="#8B5CF6" stop-opacity="0.1"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<filter id="glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Clip for circular pattern containers -->
|
||||
<clipPath id="circClip60"><circle r="60"/></clipPath>
|
||||
<clipPath id="circClip40"><circle r="40"/></clipPath>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="740" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">KALEIDOSCOPE PATTERNS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">7 pattern variants for cards, Gallery, hero displays — each uses 6-fold symmetry from the logo</text>
|
||||
|
||||
<!-- Row 1: Turn, Mirror, Ritual -->
|
||||
<text x="24" y="74" class="section-lbl">FEATURE PATTERNS</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- 1. TURN PATTERN (Amethyst) — 6 blades rotating slowly -->
|
||||
<g transform="translate(120, 170)">
|
||||
<circle r="62" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g clip-path="url(#circClip60)">
|
||||
<circle r="60" fill="#0A0E1A"/>
|
||||
<g filter="url(#glowMd)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.5">
|
||||
<animate attributeName="fill-opacity" values="0.4;0.6;0.4" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,0 L 8,-2 L -5,55 Z" fill="#fff" opacity="0.08"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(60)">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Core glow -->
|
||||
<circle r="12" fill="url(#coreGlow)" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="4" fill="#fff" opacity="0.5" filter="url(#glowSm)">
|
||||
<animate attributeName="r" values="3;5;3" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="82" class="lbl">Turn Pattern</text>
|
||||
<text x="0" y="94" font-size="8" fill="#475569" text-anchor="middle">Amethyst blades</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. MIRROR PATTERN (Amber) — angular, reflective symmetry -->
|
||||
<g transform="translate(350, 170)">
|
||||
<circle r="62" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g clip-path="url(#circClip60)">
|
||||
<circle r="60" fill="#0A0E1A"/>
|
||||
<g filter="url(#glowMd)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="90s" repeatCount="indefinite"/>
|
||||
<!-- Mirrored angular shards -->
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 6,-4 L 10,50 L -4,2 Z" fill="url(#grAmber)" opacity="0.45"/>
|
||||
<path d="M 0,0 L -6,-4 L -10,50 L 4,2 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 6,-4 L 10,50 L -4,2 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||||
<path d="M 0,0 L -6,-4 L -10,50 L 4,2 Z" fill="url(#grAmber)" opacity="0.35"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 6,-4 L 10,50 L -4,2 Z" fill="url(#grAmber)" opacity="0.45"/>
|
||||
<path d="M 0,0 L -6,-4 L -10,50 L 4,2 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="10" fill="url(#coreGlow)" opacity="0.7"/>
|
||||
<circle r="3" fill="#FDE68A" opacity="0.5" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="82" class="lbl">Mirror Pattern</text>
|
||||
<text x="0" y="94" font-size="8" fill="#475569" text-anchor="middle">Amber shards, bilateral</text>
|
||||
</g>
|
||||
|
||||
<!-- 3. RITUAL PATTERN (Emerald) — concentric rings with fragments -->
|
||||
<g transform="translate(580, 170)">
|
||||
<circle r="62" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g clip-path="url(#circClip60)">
|
||||
<circle r="60" fill="#0A0E1A"/>
|
||||
<g filter="url(#glowMd)">
|
||||
<!-- Concentric ring fragments -->
|
||||
<circle r="45" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.2" stroke-dasharray="6 8"/>
|
||||
<circle r="30" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.25" stroke-dasharray="4 6"/>
|
||||
<!-- 6 fragments on outer ring -->
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="45s" repeatCount="indefinite"/>
|
||||
<path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.6"/>
|
||||
<path d="M 0,-45 L 3,-42 L 0,-42 Z" fill="#fff" opacity="0.1"/>
|
||||
<g transform="rotate(60)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.5"/></g>
|
||||
<g transform="rotate(120)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.55"/></g>
|
||||
<g transform="rotate(180)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.5"/></g>
|
||||
<g transform="rotate(240)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.6"/></g>
|
||||
<g transform="rotate(300)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.5"/></g>
|
||||
</g>
|
||||
<!-- Inner ring fragments -->
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="30s" repeatCount="indefinite"/>
|
||||
<path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.5"/>
|
||||
<g transform="rotate(90)"><path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.4"/></g>
|
||||
<g transform="rotate(180)"><path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.5"/></g>
|
||||
<g transform="rotate(270)"><path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.4"/></g>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="8" fill="url(#coreGlow)" opacity="0.6"/>
|
||||
<circle r="3" fill="#6EE7B7" opacity="0.5" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="82" class="lbl">Ritual Pattern</text>
|
||||
<text x="0" y="94" font-size="8" fill="#475569" text-anchor="middle">Emerald concentric rings</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 2: Simple, Complex, Thumbnail, Hero -->
|
||||
<text x="24" y="310" class="section-lbl">COMPLEXITY VARIANTS</text>
|
||||
<line x1="24" y1="316" x2="670" y2="316" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- 4. SIMPLE — minimal 3-blade -->
|
||||
<g transform="translate(100, 400)">
|
||||
<circle r="42" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g clip-path="url(#circClip40)">
|
||||
<circle r="40" fill="#0A0E1A"/>
|
||||
<g filter="url(#glowSm)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="50s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 5,-2 L -2,36 L -5,1 Z" fill="url(#grAmethyst)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 5,-2 L -2,36 L -5,1 Z" fill="url(#grSapphire)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 5,-2 L -2,36 L -5,1 Z" fill="url(#grEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="3" fill="#fff" opacity="0.4" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="60" class="lbl">Simple</text>
|
||||
</g>
|
||||
|
||||
<!-- 5. COMPLEX — full 6-blade prismatic -->
|
||||
<g transform="translate(270, 400)">
|
||||
<circle r="42" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g clip-path="url(#circClip40)">
|
||||
<circle r="40" fill="#0A0E1A"/>
|
||||
<g filter="url(#glowMd)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="70s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grAmethyst)" opacity="0.5"/>
|
||||
<path d="M 0,0 L 6,-2 L -4,38 Z" fill="#fff" opacity="0.06"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(60)">
|
||||
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grSapphire)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||||
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grAmber)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grRose)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||||
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grIndigo)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="8" fill="url(#coreGlow)" opacity="0.7"/>
|
||||
<circle r="3" fill="#fff" opacity="0.6" filter="url(#glowSm)">
|
||||
<animate attributeName="r" values="2;4;2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="60" class="lbl">Complex</text>
|
||||
</g>
|
||||
|
||||
<!-- 6. THUMBNAIL — tiny for list items -->
|
||||
<g transform="translate(420, 400)">
|
||||
<circle r="20" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="40s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 420,400 L 423,399 L 418,418 L 417,401 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120, 420, 400)">
|
||||
<path d="M 420,400 L 423,399 L 418,418 L 417,401 Z" fill="url(#grSapphire)" opacity="0.35"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240, 420, 400)">
|
||||
<path d="M 420,400 L 423,399 L 418,418 L 417,401 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="420" cy="400" r="2" fill="#fff" opacity="0.4"/>
|
||||
<text x="0" y="40" class="lbl">Thumbnail</text>
|
||||
</g>
|
||||
|
||||
<!-- 7. HERO — large, full prismatic with all effects -->
|
||||
<text x="24" y="490" class="section-lbl">HERO VARIANT</text>
|
||||
<line x1="24" y1="496" x2="670" y2="496" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 610)">
|
||||
<circle r="100" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Outer aura -->
|
||||
<circle r="95" fill="#8B5CF6" opacity="0.03" filter="url(#glowLg)">
|
||||
<animate attributeName="r" values="85;100;85" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<g>
|
||||
<g filter="url(#glowLg)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite"/>
|
||||
<!-- Full 6-blade iris -->
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grAmethyst)" opacity="0.55">
|
||||
<animate attributeName="fill-opacity" values="0.45;0.65;0.45" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 350,610 L 358,608 L 340,690 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="350" y1="610" x2="340" y2="690" stroke="#C4B5FD" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(60, 350, 610)">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grSapphire)" opacity="0.5"/>
|
||||
<line x1="350" y1="610" x2="340" y2="690" stroke="#93C5FD" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="5s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120, 350, 610)">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grEmerald)" opacity="0.45"/>
|
||||
<line x1="350" y1="610" x2="340" y2="690" stroke="#6EE7B7" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="5s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180, 350, 610)">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grAmber)" opacity="0.55"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240, 350, 610)">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grRose)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300, 350, 610)">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grIndigo)" opacity="0.45"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Core -->
|
||||
<circle r="20" fill="url(#coreGlow)" opacity="0.8" filter="url(#glowMd)">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="6" fill="#fff" opacity="0.7" filter="url(#glowSm)">
|
||||
<animate attributeName="r" values="5;8;5" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-3" cy="-3" r="2" fill="#fff" opacity="0.3"/>
|
||||
<text x="0" y="120" class="lbl">Hero Pattern — full prismatic 6-blade iris with edge shimmers, core glow, breathing animation</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="734" font-size="8" fill="#334155" text-anchor="middle">All patterns use 6-fold rotational symmetry, screen blend mode, and the soft-elegance crystalline visual language</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
186
initial mockups/assets/preview-all-assets.html
Normal file
186
initial mockups/assets/preview-all-assets.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kalei SVG Asset Library — Preview</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
||||
body {
|
||||
background: #050508;
|
||||
color: #E2E8F0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
padding: 40px;
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.subtitle { color: #94A3B8; font-size: 14px; margin-bottom: 40px; }
|
||||
.section {
|
||||
margin-bottom: 48px;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
.section h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #A78BFA;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.section .desc {
|
||||
font-size: 13px;
|
||||
color: #94A3B8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.section .file-name {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
background: #121628;
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.asset-frame {
|
||||
background: #0A0E1A;
|
||||
border: 1px solid #1C2240;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
max-height: 600px;
|
||||
}
|
||||
.asset-frame object, .asset-frame img {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
}
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>KALEI ASSET LIBRARY</h1>
|
||||
<p class="subtitle">All SVG assets for the Kalei platform, derived from the soft-elegance logo visual language. 12 files, 100+ elements.</p>
|
||||
|
||||
<div class="section">
|
||||
<h2>Tab Bar Icons</h2>
|
||||
<div class="desc">5 navigation icons (Turn, Mirror, Lens, Gallery, You) in active + inactive states</div>
|
||||
<div class="file-name">icons-tab-bar.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="icons-tab-bar.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Cognitive Distortion Icons</h2>
|
||||
<div class="desc">10 fragment type icons for Mirror feature detection</div>
|
||||
<div class="file-name">icons-distortions.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="icons-distortions.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Action & UI Icons</h2>
|
||||
<div class="desc">30 icons for navigation, actions, status, and feature-specific use</div>
|
||||
<div class="file-name">icons-actions.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="icons-actions.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Fragment Icons & Highlights</h2>
|
||||
<div class="desc">The core ◇ fragment in 5 sizes, 8 color states, plus highlight effects</div>
|
||||
<div class="file-name">fragment-icons.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="fragment-icons.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Decorative Shard Elements</h2>
|
||||
<div class="desc">Background auras, floating shards, dividers, corner accents, edge shimmers</div>
|
||||
<div class="file-name">decorative-shards.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="decorative-shards.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-2">
|
||||
<div class="section">
|
||||
<h2>Kaleidoscope Patterns</h2>
|
||||
<div class="desc">7 pattern variants for cards, Gallery, and hero displays</div>
|
||||
<div class="file-name">patterns-kaleidoscope.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="patterns-kaleidoscope.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Progress Indicators</h2>
|
||||
<div class="desc">Rings, bars, calendars, timers, counters</div>
|
||||
<div class="file-name">progress-indicators.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="progress-indicators.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Evidence Wall</h2>
|
||||
<div class="desc">Tile shapes, mosaic compositions (early/mid/full), empty state</div>
|
||||
<div class="file-name">evidence-wall.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="evidence-wall.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Loading & Animation States</h2>
|
||||
<div class="desc">Spinners, skeleton shimmers, Turn animation, AI thinking, success burst</div>
|
||||
<div class="file-name">loading-animations.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="loading-animations.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Device Chrome</h2>
|
||||
<div class="desc">Status bar, tab bar, nav header, keyboard, device frame, modal scrim, toast</div>
|
||||
<div class="file-name">device-chrome.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="device-chrome.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Spectrum Visualizations</h2>
|
||||
<div class="desc">The River, Your Glass, Turn Impact, Rhythm Detection, Growth Trajectory</div>
|
||||
<div class="file-name">spectrum-visualizations.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="spectrum-visualizations.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; padding: 40px 0; color: #475569; font-size: 12px;">
|
||||
Kalei Asset Library — 12 SVG files, 100+ elements, 1 CSS design system
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
257
initial mockups/assets/progress-indicators.svg
Normal file
257
initial mockups/assets/progress-indicators.svg
Normal file
@@ -0,0 +1,257 @@
|
||||
<svg viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="prismaticH" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"><animate attributeName="stop-color" values="#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
.val { font-size: 18px; fill: #E2E8F0; font-weight: 700; text-anchor: middle; }
|
||||
.val-sm { font-size: 8px; fill: #64748B; text-anchor: middle; font-weight: 500; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="700" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">PROGRESS INDICATORS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">Rings, bars, calendars, timers, counters — all with prismatic styling</text>
|
||||
|
||||
<!-- Row 1: Large Ring, Small Ring -->
|
||||
<text x="24" y="74" class="section-lbl">PROGRESS RINGS</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Large Ring (72% complete) -->
|
||||
<g transform="translate(140, 160)">
|
||||
<!-- Background track -->
|
||||
<circle r="50" fill="none" stroke="#1C2240" stroke-width="6" opacity="0.5"/>
|
||||
<!-- Progress arc — 72% = ~259 degrees -->
|
||||
<g filter="url(#glowMd)">
|
||||
<circle r="50" fill="none" stroke="url(#grAmethyst)" stroke-width="6" stroke-linecap="round"
|
||||
stroke-dasharray="226 314" stroke-dashoffset="0" transform="rotate(-90)">
|
||||
<animate attributeName="stroke-dasharray" values="0 314;226 314" dur="1.5s" fill="freeze"/>
|
||||
</circle>
|
||||
</g>
|
||||
<!-- End cap glow -->
|
||||
<circle cx="0" cy="0" r="3" fill="#A78BFA" opacity="0.6" filter="url(#glowSm)"
|
||||
transform="rotate(169) translate(50, 0)"/>
|
||||
<!-- Center text -->
|
||||
<text x="0" y="4" class="val">72%</text>
|
||||
<text x="0" y="16" class="val-sm">COMPLETE</text>
|
||||
<text x="0" y="74" class="lbl">Large Ring (Lens progress)</text>
|
||||
</g>
|
||||
|
||||
<!-- Small Ring (3/6 steps) -->
|
||||
<g transform="translate(340, 160)">
|
||||
<circle r="28" fill="none" stroke="#1C2240" stroke-width="4" opacity="0.5"/>
|
||||
<g filter="url(#glowSm)">
|
||||
<circle r="28" fill="none" stroke="url(#grEmerald)" stroke-width="4" stroke-linecap="round"
|
||||
stroke-dasharray="88 176" stroke-dashoffset="0" transform="rotate(-90)"/>
|
||||
</g>
|
||||
<text x="0" y="2" font-size="13" fill="#E2E8F0" font-weight="700" text-anchor="middle">3/6</text>
|
||||
<text x="0" y="14" class="val-sm">STEPS</text>
|
||||
<text x="0" y="52" class="lbl">Small Ring (step counter)</text>
|
||||
</g>
|
||||
|
||||
<!-- Prismatic Ring (special/celebration) -->
|
||||
<g transform="translate(540, 160)">
|
||||
<circle r="40" fill="none" stroke="#1C2240" stroke-width="5" opacity="0.4"/>
|
||||
<g filter="url(#glowMd)">
|
||||
<circle r="40" fill="none" stroke="url(#prismaticH)" stroke-width="5" stroke-linecap="round"
|
||||
stroke-dasharray="251 251" transform="rotate(-90)"/>
|
||||
</g>
|
||||
<!-- Orbiting mote -->
|
||||
<circle r="2" fill="#fff" opacity="0" filter="url(#glowSm)">
|
||||
<animateMotion dur="3s" repeatCount="indefinite" path="M0,-40 A40,40 0 1 1 -0.1,-40"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="0" y="4" class="val">100</text>
|
||||
<text x="0" y="16" class="val-sm">COMPLETE</text>
|
||||
<text x="0" y="64" class="lbl">Prismatic Ring (100% celebration)</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 2: Linear Bar, Step Dots -->
|
||||
<text x="24" y="274" class="section-lbl">LINEAR INDICATORS</text>
|
||||
<line x1="24" y1="280" x2="670" y2="280" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Linear Progress Bar -->
|
||||
<g transform="translate(350, 310)">
|
||||
<!-- Track -->
|
||||
<rect x="-250" y="-4" width="500" height="8" rx="4" fill="#1C2240" opacity="0.6"/>
|
||||
<!-- Fill -->
|
||||
<g filter="url(#glowSm)">
|
||||
<rect x="-250" y="-4" width="325" height="8" rx="4" fill="url(#grAmethyst)" opacity="0.8">
|
||||
<animate attributeName="width" values="0;325" dur="1.2s" fill="freeze"/>
|
||||
</rect>
|
||||
</g>
|
||||
<!-- Shimmer sweep -->
|
||||
<rect x="-250" y="-4" width="40" height="8" rx="4" fill="#fff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.15;0" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x" values="-250;75" dur="2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<!-- End glow -->
|
||||
<circle cx="75" cy="0" r="4" fill="#A78BFA" opacity="0.4" filter="url(#glowSm)"/>
|
||||
<text x="-250" y="-14" font-size="9" fill="#94A3B8" font-weight="500">Progress</text>
|
||||
<text x="250" y="-14" font-size="9" fill="#C4B5FD" font-weight="600" text-anchor="end">65%</text>
|
||||
<text x="0" y="28" class="lbl">Linear bar with shimmer sweep</text>
|
||||
</g>
|
||||
|
||||
<!-- Step Dots (5 steps, 3 complete) -->
|
||||
<g transform="translate(350, 380)">
|
||||
<!-- Connecting line -->
|
||||
<line x1="-120" y1="0" x2="120" y2="0" stroke="#1C2240" stroke-width="1.5"/>
|
||||
<!-- Filled progress line -->
|
||||
<line x1="-120" y1="0" x2="0" y2="0" stroke="url(#grEmerald)" stroke-width="1.5" filter="url(#glowSm)"/>
|
||||
<!-- Step 1: complete -->
|
||||
<g transform="translate(-120, 0)">
|
||||
<circle r="8" fill="url(#grEmerald)" opacity="0.9" filter="url(#glowSm)"/>
|
||||
<path d="M -3,0 L -1,3 L 4,-2" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Step 2: complete -->
|
||||
<g transform="translate(-60, 0)">
|
||||
<circle r="8" fill="url(#grEmerald)" opacity="0.9" filter="url(#glowSm)"/>
|
||||
<path d="M -3,0 L -1,3 L 4,-2" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Step 3: complete -->
|
||||
<g transform="translate(0, 0)">
|
||||
<circle r="8" fill="url(#grEmerald)" opacity="0.9" filter="url(#glowSm)"/>
|
||||
<path d="M -3,0 L -1,3 L 4,-2" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Step 4: current -->
|
||||
<g transform="translate(60, 0)">
|
||||
<circle r="8" fill="#121628" stroke="#10B981" stroke-width="1.5"/>
|
||||
<circle r="3" fill="#10B981" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<!-- Step 5: future -->
|
||||
<g transform="translate(120, 0)">
|
||||
<circle r="8" fill="#121628" stroke="#1C2240" stroke-width="1"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Step dots (Lens 6-step flow)</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 3: Streak Calendar, Ritual Bar -->
|
||||
<text x="24" y="434" class="section-lbl">STREAK AND RITUAL</text>
|
||||
<line x1="24" y1="440" x2="670" y2="440" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Streak Calendar (7-day week) -->
|
||||
<g transform="translate(175, 500)">
|
||||
<!-- Days of week -->
|
||||
<g font-size="8" fill="#475569" text-anchor="middle" font-weight="500">
|
||||
<text x="-90" y="-26">M</text><text x="-60" y="-26">T</text><text x="-30" y="-26">W</text>
|
||||
<text x="0" y="-26">T</text><text x="30" y="-26">F</text><text x="60" y="-26">S</text><text x="90" y="-26">S</text>
|
||||
</g>
|
||||
<!-- Day circles -->
|
||||
<!-- Mon: complete -->
|
||||
<circle cx="-90" cy="0" r="12" fill="url(#grAmber)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M -93,0 L -91,3 L -86,-2" fill="none" stroke="#fff" stroke-width="1" stroke-linecap="round" transform="translate(0,0)"/>
|
||||
<!-- Tue: complete -->
|
||||
<circle cx="-60" cy="0" r="12" fill="url(#grAmber)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M -63,0 L -61,3 L -56,-2" fill="none" stroke="#fff" stroke-width="1" stroke-linecap="round"/>
|
||||
<!-- Wed: complete -->
|
||||
<circle cx="-30" cy="0" r="12" fill="url(#grAmber)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M -33,0 L -31,3 L -26,-2" fill="none" stroke="#fff" stroke-width="1" stroke-linecap="round"/>
|
||||
<!-- Thu: today, in progress -->
|
||||
<circle cx="0" cy="0" r="12" fill="#121628" stroke="#F59E0B" stroke-width="1.5"/>
|
||||
<circle cx="0" cy="0" r="4" fill="#F59E0B" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.3;0.7;0.3" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- Fri-Sun: future -->
|
||||
<circle cx="30" cy="0" r="12" fill="#121628" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<circle cx="60" cy="0" r="12" fill="#121628" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<circle cx="90" cy="0" r="12" fill="#121628" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<!-- Streak count -->
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,22 L 3,28 L 0,26 L -3,28 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<text x="0" y="42" font-size="10" fill="#FDE68A" text-anchor="middle" font-weight="600">3 day streak</text>
|
||||
</g>
|
||||
<text x="0" y="58" class="lbl">Streak Calendar (weekly view)</text>
|
||||
</g>
|
||||
|
||||
<!-- Ritual Progress Bar (3 of 5 steps in a ritual sequence) -->
|
||||
<g transform="translate(500, 500)">
|
||||
<!-- Ritual steps as connected fragments -->
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Step 1: done -->
|
||||
<path d="M -80,0 L -72,-8 L -64,0 L -72,8 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<path d="M -72,-8 L -64,0 L -72,0 Z" fill="#fff" opacity="0.12"/>
|
||||
<line x1="-64" y1="0" x2="-48" y2="0" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<!-- Step 2: done -->
|
||||
<path d="M -48,0 L -40,-8 L -32,0 L -40,8 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<line x1="-32" y1="0" x2="-16" y2="0" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<!-- Step 3: done -->
|
||||
<path d="M -16,0 L -8,-8 L 0,0 L -8,8 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<line x1="0" y1="0" x2="16" y2="0" stroke="#1C2240" stroke-width="1"/>
|
||||
<!-- Step 4: current -->
|
||||
<path d="M 16,0 L 24,-8 L 32,0 L 24,8 Z" fill="#121628" stroke="#10B981" stroke-width="1"/>
|
||||
<circle cx="24" cy="0" r="2" fill="#10B981" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<line x1="32" y1="0" x2="48" y2="0" stroke="#1C2240" stroke-width="1"/>
|
||||
<!-- Step 5: future -->
|
||||
<path d="M 48,0 L 56,-8 L 64,0 L 56,8 Z" fill="none" stroke="#1C2240" stroke-width="0.8"/>
|
||||
</g>
|
||||
<text x="-8" y="28" class="lbl">Ritual Bar (fragment-shaped steps)</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 4: Timer, Evidence Counter -->
|
||||
<text x="24" y="584" class="section-lbl">TIMER AND COUNTERS</text>
|
||||
<line x1="24" y1="590" x2="670" y2="590" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Timer Ring -->
|
||||
<g transform="translate(175, 640)">
|
||||
<circle r="30" fill="none" stroke="#1C2240" stroke-width="3" opacity="0.4"/>
|
||||
<g filter="url(#glowSm)">
|
||||
<circle r="30" fill="none" stroke="url(#grAmethyst)" stroke-width="3" stroke-linecap="round"
|
||||
stroke-dasharray="141 188" transform="rotate(-90)">
|
||||
<animate attributeName="stroke-dasharray" values="188 188;0 188" dur="60s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="2" font-size="14" fill="#E2E8F0" font-weight="600" text-anchor="middle">2:45</text>
|
||||
<text x="0" y="52" class="lbl">Timer Ring (Rehearsal countdown)</text>
|
||||
</g>
|
||||
|
||||
<!-- Evidence Counter -->
|
||||
<g transform="translate(450, 640)">
|
||||
<g filter="url(#glowMd)">
|
||||
<rect x="-60" y="-24" width="120" height="48" rx="12" fill="#121628" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<!-- Inner glow -->
|
||||
<rect x="-58" y="-22" width="116" height="44" rx="10" fill="#3B82F6" opacity="0.04"/>
|
||||
<!-- Fragment icon -->
|
||||
<g transform="translate(-32, 0)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grSapphire)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
<!-- Count -->
|
||||
<text x="14" y="4" font-size="16" fill="#E2E8F0" font-weight="700" text-anchor="middle">24</text>
|
||||
<text x="14" y="16" font-size="7" fill="#64748B" text-anchor="middle" font-weight="500">EVIDENCE</text>
|
||||
</g>
|
||||
<text x="0" y="48" class="lbl">Evidence Counter (Evidence Wall)</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="692" font-size="8" fill="#334155" text-anchor="middle">All indicators use jewel tone gradients, glow filters, and animated transitions from the Kalei design system</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
261
initial mockups/assets/spectrum-visualizations.svg
Normal file
261
initial mockups/assets/spectrum-visualizations.svg
Normal file
@@ -0,0 +1,261 @@
|
||||
<svg viewBox="0 0 700 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<!-- River flow gradient -->
|
||||
<linearGradient id="riverGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.6"/>
|
||||
<stop offset="30%" stop-color="#3B82F6" stop-opacity="0.5"/>
|
||||
<stop offset="60%" stop-color="#10B981" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#F59E0B" stop-opacity="0.6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="riverGradFill" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.15"/>
|
||||
<stop offset="30%" stop-color="#3B82F6" stop-opacity="0.1"/>
|
||||
<stop offset="60%" stop-color="#10B981" stop-opacity="0.08"/>
|
||||
<stop offset="100%" stop-color="#F59E0B" stop-opacity="0.12"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
.axis-lbl { font-size: 7px; fill: #475569; font-weight: 500; }
|
||||
.data-lbl { font-size: 8px; fill: #94A3B8; font-weight: 500; text-anchor: middle; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="900" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">SPECTRUM VISUALIZATIONS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">5 analytics views: The River, Your Glass, Turn Impact, Rhythm Detection, Growth Trajectory</text>
|
||||
|
||||
<!-- 1. THE RIVER — emotional flow over time -->
|
||||
<text x="24" y="74" class="section-lbl">THE RIVER</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 150)">
|
||||
<rect x="-280" y="-50" width="560" height="100" rx="8" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- X axis labels -->
|
||||
<g class="axis-lbl" text-anchor="middle">
|
||||
<text x="-240" y="60">Mon</text><text x="-160" y="60">Tue</text><text x="-80" y="60">Wed</text>
|
||||
<text x="0" y="60">Thu</text><text x="80" y="60">Fri</text><text x="160" y="60">Sat</text><text x="240" y="60">Sun</text>
|
||||
</g>
|
||||
<!-- River band (area chart) -->
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Upper bound -->
|
||||
<path d="M -260,-20 C -200,-30 -140,5 -80,-10 C -20,-25 40,10 100,-5 C 160,-20 220,0 260,-15"
|
||||
fill="none" stroke="url(#riverGrad)" stroke-width="1.5" opacity="0.8"/>
|
||||
<!-- Lower bound -->
|
||||
<path d="M -260,15 C -200,25 -140,5 -80,20 C -20,30 40,10 100,18 C 160,25 220,8 260,20"
|
||||
fill="none" stroke="url(#riverGrad)" stroke-width="1" opacity="0.5"/>
|
||||
<!-- Fill between -->
|
||||
<path d="M -260,-20 C -200,-30 -140,5 -80,-10 C -20,-25 40,10 100,-5 C 160,-20 220,0 260,-15
|
||||
L 260,20 C 220,8 160,25 100,18 C 40,10 -20,30 -80,20 C -140,5 -200,25 -260,15 Z"
|
||||
fill="url(#riverGradFill)" opacity="0.6"/>
|
||||
<!-- Data point fragments -->
|
||||
<g>
|
||||
<path d="M -240,-18 L -237,-15 L -240,-12 L -243,-15 Z" fill="url(#grAmethyst)" opacity="0.7"/>
|
||||
<path d="M -160,8 L -157,11 L -160,14 L -163,11 Z" fill="url(#grSapphire)" opacity="0.6"/>
|
||||
<path d="M -80,-8 L -77,-5 L -80,-2 L -83,-5 Z" fill="url(#grEmerald)" opacity="0.7"/>
|
||||
<path d="M 0,-22 L 3,-19 L 0,-16 L -3,-19 Z" fill="url(#grAmethyst)" opacity="0.8"/>
|
||||
<path d="M 80,8 L 83,11 L 80,14 L 77,11 Z" fill="url(#grAmber)" opacity="0.6"/>
|
||||
<path d="M 160,-18 L 163,-15 L 160,-12 L 157,-15 Z" fill="url(#grRose)" opacity="0.7"/>
|
||||
<path d="M 240,-12 L 243,-9 L 240,-6 L 237,-9 Z" fill="url(#grIndigo)" opacity="0.7"/>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="76" class="lbl">The River — emotional flow over time, prismatic gradient band</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. YOUR GLASS — distortion distribution -->
|
||||
<text x="24" y="244" class="section-lbl">YOUR GLASS</text>
|
||||
<line x1="24" y1="250" x2="670" y2="250" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(200, 360)">
|
||||
<!-- Radar/spider chart -->
|
||||
<g opacity="0.15">
|
||||
<!-- Axis lines -->
|
||||
<line x1="0" y1="0" x2="0" y2="-70" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="61" y2="-35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="61" y2="35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="0" y2="70" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="-61" y2="35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="-61" y2="-35" stroke="#475569" stroke-width="0.5"/>
|
||||
<!-- Concentric hex guides -->
|
||||
<path d="M 0,-35 L 30,-17 L 30,17 L 0,35 L -30,17 L -30,-17 Z" fill="none" stroke="#475569" stroke-width="0.3"/>
|
||||
<path d="M 0,-70 L 61,-35 L 61,35 L 0,70 L -61,35 L -61,-35 Z" fill="none" stroke="#475569" stroke-width="0.3"/>
|
||||
</g>
|
||||
<!-- Data shape (user's distortion profile) -->
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-55 L 40,-20 L 50,25 L 10,50 L -45,30 L -35,-25 Z"
|
||||
fill="#F59E0B" fill-opacity="0.08" stroke="#F59E0B" stroke-width="1.2" opacity="0.6"/>
|
||||
<!-- Vertex fragments -->
|
||||
<path d="M 0,-55 L 3,-52 L 0,-49 L -3,-52 Z" fill="url(#grAmber)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M 40,-20 L 43,-17 L 40,-14 L 37,-17 Z" fill="url(#grAmber)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
<path d="M 50,25 L 53,28 L 50,31 L 47,28 Z" fill="url(#grAmber)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
<path d="M 10,50 L 13,53 L 10,56 L 7,53 Z" fill="url(#grAmber)" opacity="0.6" filter="url(#glowSm)"/>
|
||||
<path d="M -45,30 L -42,33 L -45,36 L -48,33 Z" fill="url(#grAmber)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
<path d="M -35,-25 L -32,-22 L -35,-19 L -38,-22 Z" fill="url(#grAmber)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<!-- Labels -->
|
||||
<g class="data-lbl">
|
||||
<text x="0" y="-78">Catastrophizing</text>
|
||||
<text x="72" y="-20">Black-White</text>
|
||||
<text x="72" y="30">Mind Reading</text>
|
||||
<text x="0" y="68">Fortune Telling</text>
|
||||
<text x="-72" y="30">Personalization</text>
|
||||
<text x="-72" y="-20">Should Stmts</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- 3. TURN IMPACT — before/after bar chart -->
|
||||
<g transform="translate(530, 360)">
|
||||
<text x="0" y="-88" class="section-lbl" text-anchor="middle">TURN IMPACT</text>
|
||||
<!-- Bar pairs (before/after) -->
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Pair 1: Distress -->
|
||||
<rect x="-50" y="-40" width="14" height="40" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="-34" y="-60" width="14" height="60" rx="2" fill="url(#grEmerald)" opacity="0.6"/>
|
||||
<text x="-36" y="14" class="data-lbl">Distress</text>
|
||||
|
||||
<!-- Pair 2: Clarity -->
|
||||
<rect x="0" y="-25" width="14" height="25" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="16" y="-55" width="14" height="55" rx="2" fill="url(#grEmerald)" opacity="0.6"/>
|
||||
<text x="14" y="14" class="data-lbl">Clarity</text>
|
||||
|
||||
<!-- Pair 3: Hope -->
|
||||
<rect x="50" y="-20" width="14" height="20" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="66" y="-50" width="14" height="50" rx="2" fill="url(#grEmerald)" opacity="0.6"/>
|
||||
<text x="64" y="14" class="data-lbl">Hope</text>
|
||||
</g>
|
||||
<!-- Legend -->
|
||||
<g transform="translate(0, 30)">
|
||||
<rect x="-30" y="0" width="8" height="8" rx="1" fill="#EF4444" opacity="0.4"/>
|
||||
<text x="-18" y="7" font-size="7" fill="#94A3B8">Before</text>
|
||||
<rect x="20" y="0" width="8" height="8" rx="1" fill="#10B981" opacity="0.6"/>
|
||||
<text x="32" y="7" font-size="7" fill="#94A3B8">After</text>
|
||||
</g>
|
||||
<text x="10" y="56" class="lbl">Turn Impact — before/after comparison</text>
|
||||
</g>
|
||||
|
||||
<!-- 4. RHYTHM DETECTION -->
|
||||
<text x="24" y="470" class="section-lbl">RHYTHM DETECTION</text>
|
||||
<line x1="24" y1="476" x2="670" y2="476" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 560)">
|
||||
<rect x="-280" y="-50" width="560" height="100" rx="8" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Time axis -->
|
||||
<g class="axis-lbl" text-anchor="middle">
|
||||
<text x="-220" y="60">6am</text><text x="-110" y="60">9am</text><text x="0" y="60">12pm</text>
|
||||
<text x="110" y="60">3pm</text><text x="220" y="60">6pm</text>
|
||||
</g>
|
||||
<!-- Activity dots (when user engages) -->
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Morning cluster -->
|
||||
<circle cx="-200" cy="-10" r="4" fill="url(#grAmethyst)" opacity="0.3"/>
|
||||
<circle cx="-180" cy="-15" r="5" fill="url(#grAmethyst)" opacity="0.5"/>
|
||||
<circle cx="-160" cy="-20" r="6" fill="url(#grAmethyst)" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-140" cy="-12" r="4" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
<!-- Midday lull -->
|
||||
<circle cx="-40" cy="5" r="3" fill="url(#grSapphire)" opacity="0.2"/>
|
||||
<circle cx="0" cy="0" r="3" fill="url(#grSapphire)" opacity="0.25"/>
|
||||
<!-- Afternoon peak -->
|
||||
<circle cx="100" cy="-25" r="7" fill="url(#grEmerald)" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="120" cy="-18" r="5" fill="url(#grEmerald)" opacity="0.5"/>
|
||||
<circle cx="140" cy="-10" r="4" fill="url(#grEmerald)" opacity="0.4"/>
|
||||
<!-- Evening -->
|
||||
<circle cx="200" cy="10" r="4" fill="url(#grAmber)" opacity="0.3"/>
|
||||
<circle cx="220" cy="5" r="5" fill="url(#grAmber)" opacity="0.4"/>
|
||||
</g>
|
||||
<!-- Pattern line (smoothed) -->
|
||||
<path d="M -260,10 C -200,-10 -140,-20 -80,0 C -20,15 40,10 100,-25 C 160,-10 220,5 260,10"
|
||||
fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3" stroke-dasharray="4 4"/>
|
||||
<!-- Peak labels -->
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M -160,-32 L -157,-29 L -160,-26 L -163,-29 Z" fill="url(#grAmethyst)" opacity="0.8"/>
|
||||
<text x="-160" y="-38" font-size="7" fill="#C4B5FD" text-anchor="middle" font-weight="500">Morning Peak</text>
|
||||
</g>
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 100,-37 L 103,-34 L 100,-31 L 97,-34 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<text x="100" y="-43" font-size="7" fill="#6EE7B7" text-anchor="middle" font-weight="500">Afternoon Peak</text>
|
||||
</g>
|
||||
<text x="0" y="76" class="lbl">Rhythm Detection — engagement patterns over time of day, sized by intensity</text>
|
||||
</g>
|
||||
|
||||
<!-- 5. GROWTH TRAJECTORY -->
|
||||
<text x="24" y="660" class="section-lbl">GROWTH TRAJECTORY</text>
|
||||
<line x1="24" y1="666" x2="670" y2="666" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 770)">
|
||||
<rect x="-280" y="-70" width="560" height="140" rx="8" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Axes -->
|
||||
<line x1="-260" y1="55" x2="260" y2="55" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<line x1="-260" y1="55" x2="-260" y2="-55" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Month labels -->
|
||||
<g class="axis-lbl" text-anchor="middle">
|
||||
<text x="-200" y="68">Jan</text><text x="-110" y="68">Feb</text><text x="-20" y="68">Mar</text>
|
||||
<text x="70" y="68">Apr</text><text x="160" y="68">May</text><text x="240" y="68">Jun</text>
|
||||
</g>
|
||||
<!-- Growth line -->
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M -220,40 C -180,35 -140,20 -80,10 C -20,0 40,-15 100,-25 C 160,-35 200,-40 240,-50"
|
||||
fill="none" stroke="url(#grAmethyst)" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
|
||||
<!-- Fill under curve -->
|
||||
<path d="M -220,40 C -180,35 -140,20 -80,10 C -20,0 40,-15 100,-25 C 160,-35 200,-40 240,-50 L 240,55 L -220,55 Z"
|
||||
fill="#8B5CF6" opacity="0.04"/>
|
||||
<!-- Data point fragments -->
|
||||
<path d="M -220,40 L -217,43 L -220,46 L -223,43 Z" fill="url(#grAmethyst)" opacity="0.6" filter="url(#glowSm)"/>
|
||||
<path d="M -110,18 L -107,21 L -110,24 L -113,21 Z" fill="url(#grAmethyst)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
<path d="M -20,4 L -17,7 L -20,10 L -23,7 Z" fill="url(#grAmethyst)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
<path d="M 70,-18 L 73,-15 L 70,-12 L 67,-15 Z" fill="url(#grAmethyst)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M 160,-36 L 163,-33 L 160,-30 L 157,-33 Z" fill="url(#grAmethyst)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M 240,-50 L 243,-47 L 240,-44 L 237,-47 Z" fill="url(#grAmethyst)" opacity="0.9" filter="url(#glowSm)">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<!-- Milestone markers -->
|
||||
<g filter="url(#glowSm)">
|
||||
<circle cx="-20" cy="4" r="8" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.4"/>
|
||||
<text x="-20" y="-10" font-size="7" fill="#6EE7B7" text-anchor="middle">10th Turn</text>
|
||||
</g>
|
||||
<g filter="url(#glowSm)">
|
||||
<circle cx="160" cy="-36" r="8" fill="none" stroke="#F59E0B" stroke-width="0.8" opacity="0.4"/>
|
||||
<text x="160" y="-48" font-size="7" fill="#FDE68A" text-anchor="middle">30-day streak</text>
|
||||
</g>
|
||||
<!-- Y-axis label -->
|
||||
<text x="-272" y="-10" font-size="7" fill="#475569" transform="rotate(-90, -272, -10)" text-anchor="middle">Resilience Score</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="860" class="lbl">Growth Trajectory — resilience over months with milestone markers</text>
|
||||
<text x="350" y="890" font-size="8" fill="#334155" text-anchor="middle">All Spectrum visualizations use fragment-shaped data points, jewel tone gradients, and glow effects</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
Reference in New Issue
Block a user