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