322 lines
17 KiB
XML
322 lines
17 KiB
XML
|
<svg viewBox="0 0 700 520" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<!-- Prismatic gradients for each jewel tone -->
|
||
|
|
<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"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="4.5s" repeatCount="indefinite"/></stop>
|
||
|
|
<stop offset="100%" stop-color="#2563EB"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop>
|
||
|
|
<stop offset="100%" stop-color="#059669"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FEF3C7;#FDE68A" dur="4.2s" repeatCount="indefinite"/></stop>
|
||
|
|
<stop offset="100%" stop-color="#D97706"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#FBCFE8"><animate attributeName="stop-color" values="#FBCFE8;#FCE7F3;#FBCFE8" dur="4.8s" repeatCount="indefinite"/></stop>
|
||
|
|
<stop offset="100%" stop-color="#DB2777"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="grRuby" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#FCA5A5"/><stop offset="100%" stop-color="#DC2626"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.2s" repeatCount="indefinite"/></stop>
|
||
|
|
<stop offset="100%" stop-color="#4338CA"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="grSoftLight" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#F1F5F9"/><stop offset="100%" stop-color="#94A3B8"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="grPrismatic" x1="0" y1="0" x2="1" y2="1">
|
||
|
|
<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>
|
||
|
|
<filter id="glowXl" x="-100%" y="-100%" width="300%" height="300%">
|
||
|
|
<feGaussianBlur stdDeviation="10" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
|
|
</filter>
|
||
|
|
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><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="520" fill="#050508"/>
|
||
|
|
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">FRAGMENT ICONS AND HIGHLIGHT EFFECTS</text>
|
||
|
|
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">The core diamond fragment in 5 sizes, 8 color states, highlight underline, highlight bubble</text>
|
||
|
|
|
||
|
|
<!-- SECTION 1: Five Sizes -->
|
||
|
|
<text x="24" y="74" class="section-lbl">FIVE SIZES</text>
|
||
|
|
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<!-- XS: 12x12 -->
|
||
|
|
<g transform="translate(80, 120)">
|
||
|
|
<g filter="url(#glowSm)">
|
||
|
|
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
<path d="M 0,-6 L -6,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||
|
|
<line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="0.3" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="24" class="lbl">XS (12px)</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- SM: 16x16 -->
|
||
|
|
<g transform="translate(180, 120)">
|
||
|
|
<g filter="url(#glowSm)">
|
||
|
|
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
<path d="M 0,-8 L -8,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||
|
|
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.4" opacity="0.2"/>
|
||
|
|
<line x1="-8" y1="0" x2="8" y2="0" stroke="#fff" stroke-width="0.3" opacity="0.1"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="24" class="lbl">SM (16px)</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- MD: 24x24 -->
|
||
|
|
<g transform="translate(300, 120)">
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grAmethyst)" opacity="0.9">
|
||
|
|
<animate attributeName="fill-opacity" values="0.85;1;0.85" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<path d="M 0,-12 L -12,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<line x1="-12" y1="0" x2="12" y2="0" stroke="#fff" stroke-width="0.3" opacity="0.12"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="28" class="lbl">MD (24px)</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- LG: 36x36 -->
|
||
|
|
<g transform="translate(440, 120)">
|
||
|
|
<g filter="url(#glowLg)">
|
||
|
|
<path d="M 0,-18 L 18,0 L 0,18 L -18,0 Z" fill="url(#grAmethyst)" opacity="0.85">
|
||
|
|
<animate attributeName="fill-opacity" values="0.80;0.95;0.80" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<path d="M 0,-18 L 18,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
<path d="M 0,-18 L -18,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||
|
|
<line x1="0" y1="-18" x2="0" y2="18" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<line x1="-18" y1="0" x2="18" y2="0" stroke="#fff" stroke-width="0.4" opacity="0.12"/>
|
||
|
|
<line x1="-9" y1="-9" x2="9" y2="9" stroke="#fff" stroke-width="0.3" opacity="0.08"/>
|
||
|
|
<circle cx="-5" cy="-5" r="2" fill="#fff" opacity="0.25"/>
|
||
|
|
<circle cx="3" cy="-2" r="1" fill="#fff" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="36" class="lbl">LG (36px)</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- XL: 48x48 -->
|
||
|
|
<g transform="translate(600, 120)">
|
||
|
|
<g filter="url(#glowXl)">
|
||
|
|
<path d="M 0,-24 L 24,0 L 0,24 L -24,0 Z" fill="url(#grAmethyst)" opacity="0.85">
|
||
|
|
<animate attributeName="fill-opacity" values="0.75;0.95;0.75" dur="5s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<path d="M 0,-24 L 24,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
<path d="M 0,-24 L -24,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||
|
|
<path d="M 0,24 L 24,0 L 0,0 Z" fill="#000" opacity="0.08"/>
|
||
|
|
<line x1="0" y1="-24" x2="0" y2="24" stroke="#fff" stroke-width="0.6" opacity="0.2"/>
|
||
|
|
<line x1="-24" y1="0" x2="24" y2="0" stroke="#fff" stroke-width="0.5" opacity="0.15"/>
|
||
|
|
<line x1="-12" y1="-12" x2="12" y2="12" stroke="#fff" stroke-width="0.3" opacity="0.08"/>
|
||
|
|
<line x1="12" y1="-12" x2="-12" y2="12" stroke="#fff" stroke-width="0.3" opacity="0.08"/>
|
||
|
|
<circle cx="-7" cy="-7" r="3" fill="#fff" opacity="0.2"/>
|
||
|
|
<circle cx="4" cy="-3" r="1.5" fill="#fff" opacity="0.4"/>
|
||
|
|
<line x1="0" y1="-24" x2="24" y2="0" stroke="#C4B5FD" stroke-width="0.8" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.4;0" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
<line x1="0" y1="-24" x2="-24" y2="0" stroke="#E9D5FF" stroke-width="0.8" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="3s" begin="1.5s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="44" class="lbl">XL (48px)</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- SECTION 2: Eight Color States -->
|
||
|
|
<text x="24" y="204" class="section-lbl">EIGHT COLOR STATES</text>
|
||
|
|
<line x1="24" y1="210" x2="670" y2="210" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<!-- Amethyst -->
|
||
|
|
<g transform="translate(56, 252)">
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="28" class="lbl">Amethyst</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Sapphire -->
|
||
|
|
<g transform="translate(138, 252)">
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grSapphire)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="28" class="lbl">Sapphire</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Emerald -->
|
||
|
|
<g transform="translate(220, 252)">
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grEmerald)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="28" class="lbl">Emerald</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Amber -->
|
||
|
|
<g transform="translate(302, 252)">
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grAmber)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="28" class="lbl">Amber</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Rose -->
|
||
|
|
<g transform="translate(384, 252)">
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grRose)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="28" class="lbl">Rose</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Ruby -->
|
||
|
|
<g transform="translate(466, 252)">
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grRuby)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="28" class="lbl">Ruby</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Indigo -->
|
||
|
|
<g transform="translate(548, 252)">
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grIndigo)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="28" class="lbl">Indigo</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Soft Light -->
|
||
|
|
<g transform="translate(630, 252)">
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grSoftLight)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="28" class="lbl">Soft Light</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- SECTION 3: Special States and Highlights -->
|
||
|
|
<text x="24" y="330" class="section-lbl">SPECIAL STATES AND HIGHLIGHTS</text>
|
||
|
|
<line x1="24" y1="336" x2="670" y2="336" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<!-- Active/Detected glow -->
|
||
|
|
<g transform="translate(80, 390)">
|
||
|
|
<g filter="url(#glowLg)">
|
||
|
|
<path d="M 0,-14 L 14,0 L 0,14 L -14,0 Z" fill="url(#grAmethyst)" opacity="0.95">
|
||
|
|
<animate attributeName="fill-opacity" values="0.85;1;0.85" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<path d="M 0,-14 L 14,0 L 0,0 Z" fill="#fff" opacity="0.2"/>
|
||
|
|
<line x1="0" y1="-14" x2="0" y2="14" stroke="#fff" stroke-width="0.5" opacity="0.25"/>
|
||
|
|
<circle cx="-4" cy="-4" r="2" fill="#fff" opacity="0.35"/>
|
||
|
|
<path d="M 0,-18 L 18,0 L 0,18 L -18,0 Z" fill="none" stroke="#A78BFA" stroke-width="1" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.5;0" dur="2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="stroke-width" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<path d="M 0,-22 L 22,0 L 0,22 L -22,0 Z" fill="none" stroke="#A78BFA" stroke-width="0.5" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="2s" begin="0.3s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="44" class="lbl">Active / Detected</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Prismatic cycling -->
|
||
|
|
<g transform="translate(220, 390)">
|
||
|
|
<g filter="url(#glowLg)">
|
||
|
|
<path d="M 0,-14 L 14,0 L 0,14 L -14,0 Z" fill="url(#grPrismatic)" opacity="0.9">
|
||
|
|
<animate attributeName="fill-opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<path d="M 0,-14 L 14,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
<line x1="0" y1="-14" x2="0" y2="14" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-4" cy="-4" r="2" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="44" class="lbl">Prismatic Cycle</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Dimmed / Inactive -->
|
||
|
|
<g transform="translate(360, 390)">
|
||
|
|
<path d="M 0,-14 L 14,0 L 0,14 L -14,0 Z" fill="none" stroke="#475569" stroke-width="0.8" opacity="0.5"/>
|
||
|
|
<line x1="0" y1="-14" x2="0" y2="14" stroke="#475569" stroke-width="0.3" opacity="0.3"/>
|
||
|
|
<text x="0" y="44" class="lbl">Dimmed / Inactive</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Highlight Underline -->
|
||
|
|
<g transform="translate(500, 380)">
|
||
|
|
<text x="0" y="0" font-size="11" fill="#E2E8F0" text-anchor="middle" font-weight="500">highlighted text</text>
|
||
|
|
<g filter="url(#shimmer)">
|
||
|
|
<rect x="-48" y="4" width="96" height="3" rx="1.5" fill="url(#grAmethyst)" opacity="0.6">
|
||
|
|
<animate attributeName="opacity" values="0.4;0.7;0.4" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="-48" y="4" width="20" height="3" rx="1.5" fill="#fff" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="x" values="-48;48" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
</g>
|
||
|
|
<g transform="translate(-52, 5)">
|
||
|
|
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grAmethyst)" opacity="0.8" filter="url(#glowSm)"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="30" class="lbl">Highlight Underline</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Highlight Bubble -->
|
||
|
|
<g transform="translate(350, 470)">
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<rect x="-80" y="-18" width="160" height="36" rx="18" fill="#121628" stroke="#8B5CF6" stroke-width="0.8" opacity="0.9"/>
|
||
|
|
<rect x="-78" y="-16" width="156" height="32" rx="16" fill="#8B5CF6" opacity="0.06"/>
|
||
|
|
<g transform="translate(-56, 0)">
|
||
|
|
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.9" filter="url(#glowSm)"/>
|
||
|
|
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
</g>
|
||
|
|
<text x="4" y="4" font-size="10" fill="#C4B5FD" text-anchor="middle" font-weight="500">Catastrophizing</text>
|
||
|
|
<rect x="-82" y="-20" width="164" height="40" rx="20" fill="none" stroke="#8B5CF6" stroke-width="0.5" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="38" class="lbl">Highlight Bubble (distortion detected in text)</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="350" y="510" font-size="8" fill="#334155" text-anchor="middle">Fragment — Core visual element of Kalei — Crystalline faceted diamond with gradient fills, specular highlights, glow filters</text>
|
||
|
|
</svg>
|