175 lines
8.4 KiB
XML
175 lines
8.4 KiB
XML
|
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
|
||
|
|
<defs>
|
||
|
|
<!-- Background Gradient -->
|
||
|
|
<radialGradient id="bgGlow" cx="50%" cy="50%" r="50%">
|
||
|
|
<stop offset="0%" stop-color="#0A0E1A" />
|
||
|
|
<stop offset="100%" stop-color="#050508" />
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<!-- Center Backlight Glow -->
|
||
|
|
<radialGradient id="centerLight" cx="50%" cy="50%" r="50%">
|
||
|
|
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.2" />
|
||
|
|
<stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<!-- Blade Gradients: Amethyst (0°) -->
|
||
|
|
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#A78BFA" />
|
||
|
|
<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="#5B21B6" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade Gradients: Sapphire (60°) -->
|
||
|
|
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#93C5FD" />
|
||
|
|
<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="#1D4ED8" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade Gradients: Emerald (120°) -->
|
||
|
|
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#6EE7B7" />
|
||
|
|
<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="#047857" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade Gradients: Amber (180°) -->
|
||
|
|
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#FCD34D" />
|
||
|
|
<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="#B45309" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade Gradients: Rose (240°) -->
|
||
|
|
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#F9A8D4" />
|
||
|
|
<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="#BE185D" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Blade Gradients: Indigo (300°) -->
|
||
|
|
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" stop-color="#A5B4FC" />
|
||
|
|
<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="#4338CA" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Prismatic Core 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>
|
||
|
|
|
||
|
|
<!-- Standard Glow Filter -->
|
||
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="6" result="blur" />
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="blur" />
|
||
|
|
<feMergeNode in="SourceGraphic" />
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Strong Core Glow -->
|
||
|
|
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="12" result="blur" />
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="blur" />
|
||
|
|
<feMergeNode in="SourceGraphic" />
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Deep Dark Space Background -->
|
||
|
|
<rect width="100%" height="100%" fill="url(#bgGlow)" />
|
||
|
|
|
||
|
|
<!-- Center Backlight -->
|
||
|
|
<circle cx="200" cy="200" r="120" fill="url(#centerLight)" />
|
||
|
|
|
||
|
|
<!-- The Iris (Rotated by -15 deg to emphasize "The Turn" & "New Angle") -->
|
||
|
|
<g transform="translate(200, 200) rotate(-15)">
|
||
|
|
|
||
|
|
<!--
|
||
|
|
THE KALEIDOSCOPE SHARDS
|
||
|
|
Overlapping translucent facets using screen blend mode for emergent colors
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!-- Amethyst Blade (0°) -->
|
||
|
|
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||
|
|
<!-- Main Outer Face -->
|
||
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round" />
|
||
|
|
<!-- Inner Crystalline Bevel -->
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Sapphire Blade (60°) -->
|
||
|
|
<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.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round" />
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Emerald Blade (120°) -->
|
||
|
|
<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.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round" />
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Amber Blade (180°) -->
|
||
|
|
<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.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round" />
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Rose Blade (240°) -->
|
||
|
|
<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.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round" />
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Indigo Blade (300°) -->
|
||
|
|
<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.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round" />
|
||
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
THE KALEIDOSCOPE CORE (The Point of Transformation)
|
||
|
|
Solid hexagonal prism reflecting the mirrors inside the optical instrument
|
||
|
|
-->
|
||
|
|
<g filter="url(#coreGlow)">
|
||
|
|
<!-- Prismatic Hexagon Aperture -->
|
||
|
|
<polygon points="38,0 19,32.909 -19,32.909 -38,0 -19,-32.909 19,-32.909" fill="url(#prismatic)" />
|
||
|
|
|
||
|
|
<!-- Internal Kaleidoscope Mirror Lines -->
|
||
|
|
<line x1="-38" y1="0" x2="38" y2="0" stroke="#ffffff" stroke-width="1.5" opacity="0.6" />
|
||
|
|
<line x1="-19" y1="-32.909" x2="19" y2="32.909" stroke="#ffffff" stroke-width="1.5" opacity="0.6" />
|
||
|
|
<line x1="19" y1="-32.909" x2="-19" y2="32.909" stroke="#ffffff" stroke-width="1.5" opacity="0.6" />
|
||
|
|
|
||
|
|
<!-- Center Refraction Point -->
|
||
|
|
<circle r="4" fill="#ffffff" filter="url(#glow)" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Outer Core Reflection Edge -->
|
||
|
|
<polygon points="38,0 19,32.909 -19,32.909 -38,0 -19,-32.909 19,-32.909" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.8" />
|
||
|
|
</g>
|
||
|
|
</svg>
|