250 lines
13 KiB
XML
250 lines
13 KiB
XML
|
<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>
|