257 lines
14 KiB
XML
257 lines
14 KiB
XML
<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> |