299 lines
17 KiB
XML
299 lines
17 KiB
XML
<svg viewBox="0 0 700 880" 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>
|
|
<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="50%" stop-color="#10B981"><animate attributeName="stop-color" values="#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981" dur="8s" repeatCount="indefinite"/></stop>
|
|
<stop offset="100%" stop-color="#EC4899"><animate attributeName="stop-color" values="#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899" dur="8s" repeatCount="indefinite"/></stop>
|
|
</linearGradient>
|
|
<radialGradient id="auraGrad" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.15"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
|
<stop offset="60%" stop-color="#8B5CF6" stop-opacity="0.04"/>
|
|
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
|
</radialGradient>
|
|
|
|
<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="8" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="glowXl" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur stdDeviation="14" 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="880" fill="#050508"/>
|
|
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">DECORATIVE SHARD ELEMENTS</text>
|
|
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">Background auras, floating shards, prismatic dividers, corner accents, edge shimmers</text>
|
|
|
|
<!-- 1. BREATHING AURA -->
|
|
<text x="24" y="74" class="section-lbl">BREATHING AURA</text>
|
|
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
|
<g transform="translate(175, 160)">
|
|
<circle r="70" fill="url(#auraGrad)">
|
|
<animate attributeName="r" values="60;75;60" dur="6s" repeatCount="indefinite"/>
|
|
<animate attributeName="opacity" values="0.6;1;0.6" dur="6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="40" fill="#8B5CF6" opacity="0.05" filter="url(#glowXl)">
|
|
<animate attributeName="r" values="35;45;35" dur="4s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<text x="0" y="100" class="lbl">Behind cards, hero sections</text>
|
|
</g>
|
|
|
|
<!-- 2. FLOATING SHARDS -->
|
|
<g transform="translate(475, 100)">
|
|
<text x="0" y="-14" class="section-lbl" text-anchor="middle">FLOATING SHARDS</text>
|
|
<!-- Shard 1 - large, slow drift -->
|
|
<g filter="url(#glowMd)">
|
|
<path d="M 0,-18 L 10,-4 L 2,16 L -8,6 Z" fill="url(#grAmethyst)" opacity="0.25">
|
|
<animate attributeName="opacity" values="0.15;0.35;0.15" dur="7s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 0,-18 L 10,-4 L -8,6 Z" fill="#fff" opacity="0.06"/>
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;5,-8;0,0" dur="12s" repeatCount="indefinite"/>
|
|
</g>
|
|
<!-- Shard 2 - medium, angled -->
|
|
<g transform="translate(50, 30)" filter="url(#glowSm)">
|
|
<path d="M 0,-10 L 7,2 L -2,12 L -6,0 Z" fill="url(#grSapphire)" opacity="0.2">
|
|
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="5s" repeatCount="indefinite"/>
|
|
</path>
|
|
<animateTransform attributeName="transform" type="translate" values="50,30;55,22;50,30" dur="9s" repeatCount="indefinite"/>
|
|
</g>
|
|
<!-- Shard 3 - small, faster -->
|
|
<g transform="translate(-40, 50)" filter="url(#glowSm)">
|
|
<path d="M 0,-6 L 5,0 L 0,8 L -4,2 Z" fill="url(#grEmerald)" opacity="0.2">
|
|
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="4s" repeatCount="indefinite"/>
|
|
</path>
|
|
<animateTransform attributeName="transform" type="translate" values="-40,50;-35,42;-40,50" dur="7s" repeatCount="indefinite"/>
|
|
</g>
|
|
<!-- Shard 4 - tiny mote -->
|
|
<g transform="translate(30, -20)" filter="url(#shimmer)">
|
|
<path d="M 0,-4 L 3,0 L 0,4 L -3,0 Z" fill="url(#grRose)" opacity="0.3">
|
|
<animate attributeName="opacity" values="0.15;0.4;0.15" dur="3s" repeatCount="indefinite"/>
|
|
</path>
|
|
<animateTransform attributeName="transform" type="translate" values="30,-20;33,-25;30,-20" dur="5s" repeatCount="indefinite"/>
|
|
</g>
|
|
<!-- Shard 5 - amber fleck -->
|
|
<g transform="translate(-60, -10)" filter="url(#shimmer)">
|
|
<path d="M 0,-5 L 4,0 L 0,5 L -4,0 Z" fill="url(#grAmber)" opacity="0.2">
|
|
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="6s" repeatCount="indefinite"/>
|
|
</path>
|
|
<animateTransform attributeName="transform" type="translate" values="-60,-10;-58,-16;-60,-10" dur="8s" repeatCount="indefinite"/>
|
|
</g>
|
|
<text x="0" y="100" class="lbl">Scattered across backgrounds, parallax layers</text>
|
|
</g>
|
|
|
|
<!-- 3. PRISMATIC DIVIDER -->
|
|
<text x="24" y="274" class="section-lbl">PRISMATIC DIVIDER</text>
|
|
<line x1="24" y1="280" x2="670" y2="280" stroke="#1C2240" stroke-width="0.5"/>
|
|
<g transform="translate(350, 320)" filter="url(#glowMd)">
|
|
<!-- Main prismatic line -->
|
|
<line x1="-280" y1="0" x2="280" y2="0" stroke="url(#prismaticH)" stroke-width="1.5" opacity="0.6"/>
|
|
<!-- Glow underneath -->
|
|
<line x1="-280" y1="0" x2="280" y2="0" stroke="url(#prismaticH)" stroke-width="4" opacity="0.15"/>
|
|
<!-- Center diamond accent -->
|
|
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.7" filter="url(#shimmer)">
|
|
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
|
<!-- Shimmer sweep -->
|
|
<rect x="-280" y="-1" width="40" height="2" fill="#fff" opacity="0" rx="1">
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="3s" repeatCount="indefinite"/>
|
|
<animate attributeName="x" values="-280;280" dur="3s" repeatCount="indefinite"/>
|
|
</rect>
|
|
<!-- End shards -->
|
|
<g transform="translate(-280, 0)" filter="url(#glowSm)">
|
|
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="#8B5CF6" opacity="0.4"/>
|
|
</g>
|
|
<g transform="translate(280, 0)" filter="url(#glowSm)">
|
|
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="#EC4899" opacity="0.4"/>
|
|
</g>
|
|
<text x="0" y="30" class="lbl">Section divider with cycling prismatic gradient</text>
|
|
</g>
|
|
|
|
<!-- 4. CORNER ACCENTS -->
|
|
<text x="24" y="384" class="section-lbl">CORNER ACCENTS</text>
|
|
<line x1="24" y1="390" x2="670" y2="390" stroke="#1C2240" stroke-width="0.5"/>
|
|
|
|
<!-- Demo card with corner accents -->
|
|
<g transform="translate(100, 420)">
|
|
<rect width="200" height="120" rx="12" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.8"/>
|
|
<!-- Top-left corner -->
|
|
<g filter="url(#glowSm)">
|
|
<path d="M 0,20 L 0,0 L 20,0" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
|
|
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grAmethyst)" opacity="0.6" transform="translate(0,0)"/>
|
|
</g>
|
|
<!-- Top-right corner -->
|
|
<g filter="url(#glowSm)" transform="translate(200, 0)">
|
|
<path d="M 0,20 L 0,0 L -20,0" fill="none" stroke="#3B82F6" stroke-width="1" opacity="0.5"/>
|
|
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grSapphire)" opacity="0.6"/>
|
|
</g>
|
|
<!-- Bottom-left corner -->
|
|
<g filter="url(#glowSm)" transform="translate(0, 120)">
|
|
<path d="M 0,-20 L 0,0 L 20,0" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
|
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grEmerald)" opacity="0.6"/>
|
|
</g>
|
|
<!-- Bottom-right corner -->
|
|
<g filter="url(#glowSm)" transform="translate(200, 120)">
|
|
<path d="M 0,-20 L 0,0 L -20,0" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
|
|
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grAmber)" opacity="0.6"/>
|
|
</g>
|
|
<text x="100" y="65" font-size="10" fill="#475569" text-anchor="middle">Card Content</text>
|
|
<text x="100" y="152" class="lbl">Corner accent marks on cards</text>
|
|
</g>
|
|
|
|
<!-- 5. HERO SHARD BURST -->
|
|
<g transform="translate(475, 490)">
|
|
<text x="0" y="-70" class="section-lbl" text-anchor="middle">HERO SHARD BURST</text>
|
|
<!-- Central glow -->
|
|
<circle r="30" fill="#8B5CF6" opacity="0.08" filter="url(#glowXl)">
|
|
<animate attributeName="r" values="25;35;25" dur="5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<!-- Radiating shards -->
|
|
<g filter="url(#glowMd)">
|
|
<path d="M 0,-40 L 4,-20 L 0,-15 L -4,-20 Z" fill="url(#grAmethyst)" opacity="0.5">
|
|
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="4s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 35,-20 L 20,-16 L 15,-20 L 20,-24 Z" fill="url(#grSapphire)" opacity="0.4" transform="rotate(30)">
|
|
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="4.5s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 40,0 L 22,4 L 18,0 L 22,-4 Z" fill="url(#grEmerald)" opacity="0.4">
|
|
<animate attributeName="opacity" values="0.25;0.5;0.25" dur="5s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 20,35 L 16,18 L 20,14 L 24,18 Z" fill="url(#grAmber)" opacity="0.35" transform="rotate(-20)">
|
|
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="3.8s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M -35,20 L -18,16 L -14,20 L -18,24 Z" fill="url(#grRose)" opacity="0.35">
|
|
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="4.2s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M -20,-35 L -16,-18 L -20,-14 L -24,-18 Z" fill="url(#grIndigo)" opacity="0.4">
|
|
<animate attributeName="opacity" values="0.25;0.55;0.25" dur="3.5s" repeatCount="indefinite"/>
|
|
</path>
|
|
</g>
|
|
<!-- Orbiting mote -->
|
|
<g filter="url(#shimmer)">
|
|
<circle r="2" fill="#A78BFA" opacity="0">
|
|
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-50 A50,50 0 1 1 -0.1,-50"/>
|
|
<animate attributeName="opacity" values="0;0.8;0;0;0" dur="8s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="1.5" fill="#3B82F6" opacity="0">
|
|
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-45 A45,45 0 1 0 -0.1,-45"/>
|
|
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
</g>
|
|
<text x="0" y="80" class="lbl">Hero/splash background accent</text>
|
|
</g>
|
|
|
|
<!-- 6. SHARD CLUSTER -->
|
|
<text x="24" y="604" class="section-lbl">SHARD CLUSTER</text>
|
|
<line x1="24" y1="610" x2="670" y2="610" stroke="#1C2240" stroke-width="0.5"/>
|
|
|
|
<g transform="translate(175, 690)">
|
|
<g filter="url(#glowMd)">
|
|
<!-- Primary large shard -->
|
|
<path d="M 0,-20 L 12,0 L 0,20 L -12,0 Z" fill="url(#grAmethyst)" opacity="0.5">
|
|
<animate attributeName="opacity" values="0.4;0.6;0.4" dur="5s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 0,-20 L 12,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
|
</g>
|
|
<g filter="url(#glowSm)">
|
|
<!-- Secondary shard, offset -->
|
|
<path d="M 18,-12 L 26,-2 L 20,10 L 14,0 Z" fill="url(#grSapphire)" opacity="0.35">
|
|
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4s" begin="0.5s" repeatCount="indefinite"/>
|
|
</path>
|
|
<!-- Tertiary small shard -->
|
|
<path d="M -16,8 L -10,14 L -14,22 L -20,16 Z" fill="url(#grEmerald)" opacity="0.3">
|
|
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="3.5s" begin="1s" repeatCount="indefinite"/>
|
|
</path>
|
|
<!-- Tiny accent shards -->
|
|
<path d="M 8,-18 L 12,-14 L 10,-10 L 6,-14 Z" fill="url(#grAmber)" opacity="0.25"/>
|
|
<path d="M -20,-8 L -16,-12 L -12,-8 L -16,-4 Z" fill="url(#grRose)" opacity="0.2"/>
|
|
</g>
|
|
<text x="0" y="50" class="lbl">Decorative cluster for empty states, backgrounds</text>
|
|
</g>
|
|
|
|
<!-- 7. EDGE SHIMMER -->
|
|
<g transform="translate(475, 660)">
|
|
<text x="0" y="-34" class="section-lbl" text-anchor="middle">EDGE SHIMMER</text>
|
|
<!-- Demo card edge -->
|
|
<rect x="-80" y="-20" width="160" height="80" rx="10" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.8"/>
|
|
<!-- Left edge shimmer -->
|
|
<line x1="-80" y1="-18" x2="-80" y2="58" stroke="url(#prismaticH)" stroke-width="1.5" opacity="0.3"/>
|
|
<!-- Shimmer travel -->
|
|
<rect x="-81" y="-20" width="2" height="16" rx="1" fill="#fff" opacity="0">
|
|
<animate attributeName="opacity" values="0;0.4;0" dur="2.5s" repeatCount="indefinite"/>
|
|
<animate attributeName="y" values="-20;60" dur="2.5s" repeatCount="indefinite"/>
|
|
</rect>
|
|
<!-- Top edge subtle shimmer -->
|
|
<line x1="-78" y1="-20" x2="78" y2="-20" stroke="#8B5CF6" stroke-width="0.5" opacity="0.15"/>
|
|
<rect x="-78" y="-21" width="24" height="2" rx="1" fill="#C4B5FD" opacity="0">
|
|
<animate attributeName="opacity" values="0;0.25;0" dur="3s" repeatCount="indefinite"/>
|
|
<animate attributeName="x" values="-78;78" dur="3s" repeatCount="indefinite"/>
|
|
</rect>
|
|
<text x="0" y="20" font-size="10" fill="#475569" text-anchor="middle">Card Content</text>
|
|
<text x="0" y="90" class="lbl">Edge shimmer on focused/hovered cards</text>
|
|
</g>
|
|
|
|
<!-- 8. ORBITING MOTES (standalone) -->
|
|
<text x="24" y="784" class="section-lbl">ORBITING MOTES</text>
|
|
<line x1="24" y1="790" x2="670" y2="790" stroke="#1C2240" stroke-width="0.5"/>
|
|
<g transform="translate(350, 840)" filter="url(#shimmer)">
|
|
<!-- Mote orbit paths (faint) -->
|
|
<circle r="30" fill="none" stroke="#1C2240" stroke-width="0.3" stroke-dasharray="2 4"/>
|
|
<circle r="22" fill="none" stroke="#1C2240" stroke-width="0.3" stroke-dasharray="2 4"/>
|
|
<!-- Orbiting motes -->
|
|
<circle r="2.5" fill="#A78BFA" opacity="0">
|
|
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-30 A30,30 0 1 1 -0.1,-30"/>
|
|
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="2" fill="#3B82F6" opacity="0">
|
|
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-30 A30,30 0 1 0 -0.1,-30"/>
|
|
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="7s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="1.5" fill="#10B981" opacity="0">
|
|
<animateMotion dur="4s" repeatCount="indefinite" path="M0,-22 A22,22 0 1 1 -0.1,-22"/>
|
|
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="4s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="2" fill="#F59E0B" opacity="0">
|
|
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-22 A22,22 0 1 0 -0.1,-22"/>
|
|
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="1" fill="#EC4899" opacity="0">
|
|
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-30 A30,30 0 1 1 -0.1,-30" begin="2s"/>
|
|
<animate attributeName="opacity" values="0;0.8;0;0;0.5;0" dur="9s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<text x="0" y="52" class="lbl">Floating motes around logos, loaders, hero elements</text>
|
|
</g>
|
|
|
|
<text x="350" y="874" font-size="8" fill="#334155" text-anchor="middle">Decorative elements use breathing animations, prismatic color cycling, glow filters from the soft-elegance visual language</text>
|
|
</svg> |