380 lines
19 KiB
XML
380 lines
19 KiB
XML
<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> |
