301 lines
16 KiB
XML
301 lines
16 KiB
XML
|
<svg viewBox="0 0 700 740" 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"><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"/><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>
|
||
|
|
<radialGradient id="coreGlow" cx="50%" cy="50%" r="50%">
|
||
|
|
<stop offset="0%" stop-color="#fff" stop-opacity="0.3"/>
|
||
|
|
<stop offset="50%" stop-color="#8B5CF6" stop-opacity="0.1"/>
|
||
|
|
<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="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Clip for circular pattern containers -->
|
||
|
|
<clipPath id="circClip60"><circle r="60"/></clipPath>
|
||
|
|
<clipPath id="circClip40"><circle r="40"/></clipPath>
|
||
|
|
|
||
|
|
<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="740" fill="#050508"/>
|
||
|
|
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">KALEIDOSCOPE PATTERNS</text>
|
||
|
|
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">7 pattern variants for cards, Gallery, hero displays — each uses 6-fold symmetry from the logo</text>
|
||
|
|
|
||
|
|
<!-- Row 1: Turn, Mirror, Ritual -->
|
||
|
|
<text x="24" y="74" class="section-lbl">FEATURE PATTERNS</text>
|
||
|
|
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<!-- 1. TURN PATTERN (Amethyst) — 6 blades rotating slowly -->
|
||
|
|
<g transform="translate(120, 170)">
|
||
|
|
<circle r="62" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<g clip-path="url(#circClip60)">
|
||
|
|
<circle r="60" fill="#0A0E1A"/>
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite"/>
|
||
|
|
<g style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.5">
|
||
|
|
<animate attributeName="fill-opacity" values="0.4;0.6;0.4" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<path d="M 0,0 L 8,-2 L -5,55 Z" fill="#fff" opacity="0.08"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(60)">
|
||
|
|
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.45"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||
|
|
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||
|
|
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.5"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||
|
|
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.45"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||
|
|
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<!-- Core glow -->
|
||
|
|
<circle r="12" fill="url(#coreGlow)" opacity="0.8">
|
||
|
|
<animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
<circle r="4" fill="#fff" opacity="0.5" filter="url(#glowSm)">
|
||
|
|
<animate attributeName="r" values="3;5;3" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="82" class="lbl">Turn Pattern</text>
|
||
|
|
<text x="0" y="94" font-size="8" fill="#475569" text-anchor="middle">Amethyst blades</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 2. MIRROR PATTERN (Amber) — angular, reflective symmetry -->
|
||
|
|
<g transform="translate(350, 170)">
|
||
|
|
<circle r="62" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<g clip-path="url(#circClip60)">
|
||
|
|
<circle r="60" fill="#0A0E1A"/>
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="90s" repeatCount="indefinite"/>
|
||
|
|
<!-- Mirrored angular shards -->
|
||
|
|
<g style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 0,0 L 6,-4 L 10,50 L -4,2 Z" fill="url(#grAmber)" opacity="0.45"/>
|
||
|
|
<path d="M 0,0 L -6,-4 L -10,50 L 4,2 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||
|
|
<path d="M 0,0 L 6,-4 L 10,50 L -4,2 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||
|
|
<path d="M 0,0 L -6,-4 L -10,50 L 4,2 Z" fill="url(#grAmber)" opacity="0.35"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||
|
|
<path d="M 0,0 L 6,-4 L 10,50 L -4,2 Z" fill="url(#grAmber)" opacity="0.45"/>
|
||
|
|
<path d="M 0,0 L -6,-4 L -10,50 L 4,2 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<circle r="10" fill="url(#coreGlow)" opacity="0.7"/>
|
||
|
|
<circle r="3" fill="#FDE68A" opacity="0.5" filter="url(#glowSm)"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="82" class="lbl">Mirror Pattern</text>
|
||
|
|
<text x="0" y="94" font-size="8" fill="#475569" text-anchor="middle">Amber shards, bilateral</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 3. RITUAL PATTERN (Emerald) — concentric rings with fragments -->
|
||
|
|
<g transform="translate(580, 170)">
|
||
|
|
<circle r="62" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<g clip-path="url(#circClip60)">
|
||
|
|
<circle r="60" fill="#0A0E1A"/>
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<!-- Concentric ring fragments -->
|
||
|
|
<circle r="45" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.2" stroke-dasharray="6 8"/>
|
||
|
|
<circle r="30" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.25" stroke-dasharray="4 6"/>
|
||
|
|
<!-- 6 fragments on outer ring -->
|
||
|
|
<g>
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="45s" repeatCount="indefinite"/>
|
||
|
|
<path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.6"/>
|
||
|
|
<path d="M 0,-45 L 3,-42 L 0,-42 Z" fill="#fff" opacity="0.1"/>
|
||
|
|
<g transform="rotate(60)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.5"/></g>
|
||
|
|
<g transform="rotate(120)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.55"/></g>
|
||
|
|
<g transform="rotate(180)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.5"/></g>
|
||
|
|
<g transform="rotate(240)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.6"/></g>
|
||
|
|
<g transform="rotate(300)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.5"/></g>
|
||
|
|
</g>
|
||
|
|
<!-- Inner ring fragments -->
|
||
|
|
<g>
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="30s" repeatCount="indefinite"/>
|
||
|
|
<path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.5"/>
|
||
|
|
<g transform="rotate(90)"><path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.4"/></g>
|
||
|
|
<g transform="rotate(180)"><path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.5"/></g>
|
||
|
|
<g transform="rotate(270)"><path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.4"/></g>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<circle r="8" fill="url(#coreGlow)" opacity="0.6"/>
|
||
|
|
<circle r="3" fill="#6EE7B7" opacity="0.5" filter="url(#glowSm)"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="82" class="lbl">Ritual Pattern</text>
|
||
|
|
<text x="0" y="94" font-size="8" fill="#475569" text-anchor="middle">Emerald concentric rings</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Row 2: Simple, Complex, Thumbnail, Hero -->
|
||
|
|
<text x="24" y="310" class="section-lbl">COMPLEXITY VARIANTS</text>
|
||
|
|
<line x1="24" y1="316" x2="670" y2="316" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<!-- 4. SIMPLE — minimal 3-blade -->
|
||
|
|
<g transform="translate(100, 400)">
|
||
|
|
<circle r="42" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<g clip-path="url(#circClip40)">
|
||
|
|
<circle r="40" fill="#0A0E1A"/>
|
||
|
|
<g filter="url(#glowSm)">
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="50s" repeatCount="indefinite"/>
|
||
|
|
<g style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 0,0 L 5,-2 L -2,36 L -5,1 Z" fill="url(#grAmethyst)" opacity="0.45"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||
|
|
<path d="M 0,0 L 5,-2 L -2,36 L -5,1 Z" fill="url(#grSapphire)" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||
|
|
<path d="M 0,0 L 5,-2 L -2,36 L -5,1 Z" fill="url(#grEmerald)" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<circle r="3" fill="#fff" opacity="0.4" filter="url(#glowSm)"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="60" class="lbl">Simple</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 5. COMPLEX — full 6-blade prismatic -->
|
||
|
|
<g transform="translate(270, 400)">
|
||
|
|
<circle r="42" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<g clip-path="url(#circClip40)">
|
||
|
|
<circle r="40" fill="#0A0E1A"/>
|
||
|
|
<g filter="url(#glowMd)">
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="70s" repeatCount="indefinite"/>
|
||
|
|
<g style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grAmethyst)" opacity="0.5"/>
|
||
|
|
<path d="M 0,0 L 6,-2 L -4,38 Z" fill="#fff" opacity="0.06"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(60)">
|
||
|
|
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grSapphire)" opacity="0.45"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||
|
|
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grEmerald)" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||
|
|
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grAmber)" opacity="0.5"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||
|
|
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grRose)" opacity="0.45"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||
|
|
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grIndigo)" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<circle r="8" fill="url(#coreGlow)" opacity="0.7"/>
|
||
|
|
<circle r="3" fill="#fff" opacity="0.6" filter="url(#glowSm)">
|
||
|
|
<animate attributeName="r" values="2;4;2" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="60" class="lbl">Complex</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 6. THUMBNAIL — tiny for list items -->
|
||
|
|
<g transform="translate(420, 400)">
|
||
|
|
<circle r="20" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<g>
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="40s" repeatCount="indefinite"/>
|
||
|
|
<g style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 420,400 L 423,399 L 418,418 L 417,401 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(120, 420, 400)">
|
||
|
|
<path d="M 420,400 L 423,399 L 418,418 L 417,401 Z" fill="url(#grSapphire)" opacity="0.35"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(240, 420, 400)">
|
||
|
|
<path d="M 420,400 L 423,399 L 418,418 L 417,401 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<circle cx="420" cy="400" r="2" fill="#fff" opacity="0.4"/>
|
||
|
|
<text x="0" y="40" class="lbl">Thumbnail</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 7. HERO — large, full prismatic with all effects -->
|
||
|
|
<text x="24" y="490" class="section-lbl">HERO VARIANT</text>
|
||
|
|
<line x1="24" y1="496" x2="670" y2="496" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<g transform="translate(350, 610)">
|
||
|
|
<circle r="100" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<!-- Outer aura -->
|
||
|
|
<circle r="95" fill="#8B5CF6" opacity="0.03" filter="url(#glowLg)">
|
||
|
|
<animate attributeName="r" values="85;100;85" dur="6s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
<g>
|
||
|
|
<g filter="url(#glowLg)">
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite"/>
|
||
|
|
<!-- Full 6-blade iris -->
|
||
|
|
<g style="mix-blend-mode: screen;">
|
||
|
|
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grAmethyst)" opacity="0.55">
|
||
|
|
<animate attributeName="fill-opacity" values="0.45;0.65;0.45" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<path d="M 350,610 L 358,608 L 340,690 Z" fill="#fff" opacity="0.08"/>
|
||
|
|
<line x1="350" y1="610" x2="340" y2="690" stroke="#C4B5FD" stroke-width="0.8" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="5s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(60, 350, 610)">
|
||
|
|
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grSapphire)" opacity="0.5"/>
|
||
|
|
<line x1="350" y1="610" x2="340" y2="690" stroke="#93C5FD" stroke-width="0.8" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="5s" begin="0.8s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(120, 350, 610)">
|
||
|
|
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grEmerald)" opacity="0.45"/>
|
||
|
|
<line x1="350" y1="610" x2="340" y2="690" stroke="#6EE7B7" stroke-width="0.8" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="5s" begin="1.6s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(180, 350, 610)">
|
||
|
|
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grAmber)" opacity="0.55"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(240, 350, 610)">
|
||
|
|
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grRose)" opacity="0.5"/>
|
||
|
|
</g>
|
||
|
|
<g style="mix-blend-mode: screen;" transform="rotate(300, 350, 610)">
|
||
|
|
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grIndigo)" opacity="0.45"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<!-- Core -->
|
||
|
|
<circle r="20" fill="url(#coreGlow)" opacity="0.8" filter="url(#glowMd)">
|
||
|
|
<animate attributeName="opacity" values="0.6;1;0.6" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
<circle r="6" fill="#fff" opacity="0.7" filter="url(#glowSm)">
|
||
|
|
<animate attributeName="r" values="5;8;5" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="-3" cy="-3" r="2" fill="#fff" opacity="0.3"/>
|
||
|
|
<text x="0" y="120" class="lbl">Hero Pattern — full prismatic 6-blade iris with edge shimmers, core glow, breathing animation</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="350" y="734" font-size="8" fill="#334155" text-anchor="middle">All patterns use 6-fold rotational symmetry, screen blend mode, and the soft-elegance crystalline visual language</text>
|
||
|
|
</svg>
|