261 lines
15 KiB
XML
261 lines
15 KiB
XML
|
<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>
|