271 lines
15 KiB
XML
271 lines
15 KiB
XML
|
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||
|
|
<defs>
|
||
|
|
<!-- Dark-First Space Background -->
|
||
|
|
<radialGradient id="bgGlow" cx="50%" cy="50%" r="65%">
|
||
|
|
<stop offset="0%" stop-color="#0F1424" />
|
||
|
|
<stop offset="60%" stop-color="#0A0E1A" />
|
||
|
|
<stop offset="100%" stop-color="#050508" />
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<!-- Prismatic Core Exact Brand Gradient -->
|
||
|
|
<linearGradient id="prismatic" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" stop-color="#8B5CF6"/>
|
||
|
|
<stop offset="25%" stop-color="#3B82F6"/>
|
||
|
|
<stop offset="50%" stop-color="#10B981"/>
|
||
|
|
<stop offset="75%" stop-color="#F59E0B"/>
|
||
|
|
<stop offset="100%" stop-color="#EC4899"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade 0: Amethyst -->
|
||
|
|
<linearGradient id="g0_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" repeatCount="indefinite"/></stop>
|
||
|
|
<stop offset="100%" stop-color="#8B5CF6"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#8B5CF6"/>
|
||
|
|
<stop offset="100%" stop-color="#2E1065"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade 1: Sapphire -->
|
||
|
|
<linearGradient id="g1_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<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="#3B82F6"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#3B82F6"/>
|
||
|
|
<stop offset="100%" stop-color="#172554"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade 2: Emerald -->
|
||
|
|
<linearGradient id="g2_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop>
|
||
|
|
<stop offset="100%" stop-color="#10B981"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#10B981"/>
|
||
|
|
<stop offset="100%" stop-color="#022C22"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade 3: Amber -->
|
||
|
|
<linearGradient id="g3_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<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="#F59E0B"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#F59E0B"/>
|
||
|
|
<stop offset="100%" stop-color="#451A03"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade 4: Rose -->
|
||
|
|
<linearGradient id="g4_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<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="#EC4899"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#EC4899"/>
|
||
|
|
<stop offset="100%" stop-color="#4C0519"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade 5: Indigo -->
|
||
|
|
<linearGradient id="g5_F1" x1="30" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#C7D2FE"><animate attributeName="stop-color" values="#C7D2FE;#E0E7FF;#C7D2FE" dur="5.2s" repeatCount="indefinite"/></stop>
|
||
|
|
<stop offset="100%" stop-color="#6366F1"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#6366F1"/>
|
||
|
|
<stop offset="100%" stop-color="#1E1B4B"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Ethereal Glow Filters -->
|
||
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
|
|
</filter>
|
||
|
|
<filter id="coreGlow" x="-100%" y="-100%" width="300%" height="300%">
|
||
|
|
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
|
|
</filter>
|
||
|
|
<filter id="wideGlow" x="-100%" y="-100%" width="300%" height="300%">
|
||
|
|
<feGaussianBlur stdDeviation="24" result="blur"/>
|
||
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Deep Dark Universe Background -->
|
||
|
|
<rect width="100%" height="100%" fill="url(#bgGlow)" />
|
||
|
|
|
||
|
|
<!-- Ambient Pulsing Backlight -->
|
||
|
|
<circle cx="200" cy="200" r="130" fill="url(#prismatic)" opacity="0.12" filter="url(#wideGlow)">
|
||
|
|
<animate attributeName="opacity" values="0.08;0.16;0.08" dur="6s" repeatCount="indefinite" />
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Main Iris Structure -->
|
||
|
|
<g transform="translate(200, 200)">
|
||
|
|
|
||
|
|
<!-- Outer rotation for the kaleidoscopic shards -->
|
||
|
|
<g>
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="150s" repeatCount="indefinite" />
|
||
|
|
|
||
|
|
<!-- Blade 0 (Amethyst) -->
|
||
|
|
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="4s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="4s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Blade 1 (Sapphire) -->
|
||
|
|
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="4.5s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="4.5s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Blade 2 (Emerald) -->
|
||
|
|
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="5s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="5s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Blade 3 (Amber) -->
|
||
|
|
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="4.2s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="4.2s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Blade 4 (Rose) -->
|
||
|
|
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="4.8s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="4.8s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Blade 5 (Indigo) -->
|
||
|
|
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.9" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.25" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.85;0.95;0.85" dur="5.2s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="1" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.45" stroke-linejoin="miter">
|
||
|
|
<animate attributeName="fill-opacity" values="0.9;1;0.9" dur="5.2s" repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- The Core Aperture and Prismatic Light Source -->
|
||
|
|
<g>
|
||
|
|
<!-- Reverse rotation for the core to detach it optically from the blades -->
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="100s" repeatCount="indefinite" />
|
||
|
|
|
||
|
|
<!-- Inner Dark Chamber to provide depth against the backlight -->
|
||
|
|
<polygon points="40,0 20,34.641 -20,34.641 -40,0 -20,-34.641 20,-34.641" fill="#0A0E1A" />
|
||
|
|
|
||
|
|
<!-- Core Prismatic Glow bleeding over the inner cut edges -->
|
||
|
|
<circle r="26" fill="url(#prismatic)" opacity="0.85" filter="url(#coreGlow)">
|
||
|
|
<animate attributeName="r" values="24;30;24" dur="4s" repeatCount="indefinite" />
|
||
|
|
<animate attributeName="opacity" values="0.65;0.95;0.65" dur="4s" repeatCount="indefinite" />
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Crisp Prismatic Hexagon Mirror inside the chamber -->
|
||
|
|
<polygon points="30,0 15,25.98 -15,25.98 -30,0 -15,-25.98 15,-25.98" fill="url(#prismatic)" opacity="0.9">
|
||
|
|
<animate attributeName="opacity" values="0.75;1;0.75" dur="3s" repeatCount="indefinite" />
|
||
|
|
</polygon>
|
||
|
|
|
||
|
|
<!-- Optical Lens Refractions (The Instrument) -->
|
||
|
|
<circle r="18" fill="none" stroke="#FFFFFF" stroke-width="0.5" opacity="0.4" />
|
||
|
|
<circle r="8" fill="none" stroke="#FFFFFF" stroke-width="1.5" opacity="0.8" filter="url(#glow)"/>
|
||
|
|
|
||
|
|
<!-- Central Blinding Transformation Point -->
|
||
|
|
<circle r="4" fill="#FFFFFF" filter="url(#glow)">
|
||
|
|
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite" />
|
||
|
|
<animate attributeName="r" values="3.5;5;3.5" dur="2s" repeatCount="indefinite" />
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- 12 Optical Refraction Rays -->
|
||
|
|
<g opacity="0.6">
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(0)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(30)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(60)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(90)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(120)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(150)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(180)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(210)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(240)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(270)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-45" stroke="#FFFFFF" stroke-width="1" transform="rotate(300)"/>
|
||
|
|
<line x1="0" y1="0" x2="0" y2="-28" stroke="#FFFFFF" stroke-width="0.6" opacity="0.6" transform="rotate(330)"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Floating Crystalline Sparkles (Motes) Orbiting the Instrument -->
|
||
|
|
<g filter="url(#glow)">
|
||
|
|
<!-- Counter-rotating orbit -->
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="90s" repeatCount="indefinite" />
|
||
|
|
|
||
|
|
<!-- Amethyst Mote -->
|
||
|
|
<g transform="rotate(0) translate(0, -150)">
|
||
|
|
<polygon points="0,-4 1,-1 4,0 1,1 0,4 -1,1 -4,0 -1,-1" fill="#A78BFA">
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="5s" begin="0s" repeatCount="indefinite" />
|
||
|
|
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="5s" begin="0s" repeatCount="indefinite" />
|
||
|
|
</polygon>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Sapphire Mote -->
|
||
|
|
<g transform="rotate(60) translate(0, -130)">
|
||
|
|
<polygon points="0,-4 1,-1 4,0 1,1 0,4 -1,1 -4,0 -1,-1" fill="#3B82F6">
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="6s" begin="1s" repeatCount="indefinite" />
|
||
|
|
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="6s" begin="1s" repeatCount="indefinite" />
|
||
|
|
</polygon>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Emerald Mote -->
|
||
|
|
<g transform="rotate(120) translate(0, -160)">
|
||
|
|
<polygon points="0,-3 1,-1 3,0 1,1 0,3 -1,1 -3,0 -1,-1" fill="#10B981">
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="4.5s" begin="2s" repeatCount="indefinite" />
|
||
|
|
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="4.5s" begin="2s" repeatCount="indefinite" />
|
||
|
|
</polygon>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Amber Mote -->
|
||
|
|
<g transform="rotate(180) translate(0, -145)">
|
||
|
|
<polygon points="0,-5 1,-1 5,0 1,1 0,5 -1,1 -5,0 -1,-1" fill="#F59E0B">
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="5.5s" begin="3s" repeatCount="indefinite" />
|
||
|
|
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="5.5s" begin="3s" repeatCount="indefinite" />
|
||
|
|
</polygon>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Rose Mote -->
|
||
|
|
<g transform="rotate(240) translate(0, -135)">
|
||
|
|
<polygon points="0,-4 1,-1 4,0 1,1 0,4 -1,1 -4,0 -1,-1" fill="#EC4899">
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="4.8s" begin="1.5s" repeatCount="indefinite" />
|
||
|
|
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="4.8s" begin="1.5s" repeatCount="indefinite" />
|
||
|
|
</polygon>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Indigo Mote -->
|
||
|
|
<g transform="rotate(300) translate(0, -155)">
|
||
|
|
<polygon points="0,-3 1,-1 3,0 1,1 0,3 -1,1 -3,0 -1,-1" fill="#818CF8">
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="5.2s" begin="2.5s" repeatCount="indefinite" />
|
||
|
|
<animateTransform attributeName="transform" type="scale" values="0.5; 1.3; 0.5" dur="5.2s" begin="2.5s" repeatCount="indefinite" />
|
||
|
|
</polygon>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
</g>
|
||
|
|
</svg>
|