mirror of
https://github.com/prdlk/prdlk.git
synced 2026-11-02 13:12:49 +00:00
405 lines
38 KiB
XML
405 lines
38 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="280" viewBox="0 0 850 280">
|
|
<defs>
|
|
<style>
|
|
.star-bg {
|
|
animation: twinkle-slow 7s ease-in-out infinite;
|
|
}
|
|
.star-mid {
|
|
animation: twinkle-mid 5s ease-in-out infinite;
|
|
}
|
|
.star-fg {
|
|
animation: twinkle-fast 3s ease-in-out infinite;
|
|
}
|
|
@keyframes twinkle-slow {
|
|
0%, 100% { opacity: 0.08; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
@keyframes twinkle-mid {
|
|
0%, 100% { opacity: 0.15; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
@keyframes twinkle-fast {
|
|
0%, 100% { opacity: 0.4; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
.core-ring {
|
|
animation: pulse-core 3s ease-in-out infinite;
|
|
}
|
|
.core-ring-inner {
|
|
animation: pulse-core 3s ease-in-out infinite 1.5s;
|
|
}
|
|
@keyframes pulse-core {
|
|
0%, 100% { stroke-opacity: 0.3; transform: scale(1); transform-origin: 425px 155px; }
|
|
50% { stroke-opacity: 0.8; transform: scale(1.06); transform-origin: 425px 155px; }
|
|
}
|
|
.shooting-star {
|
|
opacity: 0;
|
|
animation: shoot linear infinite;
|
|
}
|
|
@keyframes shoot {
|
|
0% { opacity: 0; transform: translate(0, 0); }
|
|
5% { opacity: 0.9; }
|
|
15% { opacity: 0.6; transform: translate(var(--shoot-tx), var(--shoot-ty)); }
|
|
20% { opacity: 0; transform: translate(var(--shoot-tx), var(--shoot-ty)); }
|
|
100% { opacity: 0; }
|
|
}
|
|
</style>
|
|
|
|
<filter id="nebula-outer">
|
|
<feGaussianBlur stdDeviation="60"/>
|
|
</filter>
|
|
<filter id="nebula-inner">
|
|
<feGaussianBlur stdDeviation="30"/>
|
|
</filter>
|
|
|
|
<filter id="label-glow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur stdDeviation="2" result="blur"/>
|
|
</filter>
|
|
<filter id="core-bright-glow" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur stdDeviation="4"/>
|
|
</filter>
|
|
|
|
<radialGradient id="core-haze-gradient" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#00d4ff" stop-opacity="0.5"/>
|
|
<stop offset="50%" stop-color="#a78bfa" stop-opacity="0.2"/>
|
|
<stop offset="100%" stop-color="#00d4ff" stop-opacity="0"/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="core-inner-gradient" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.6"/>
|
|
<stop offset="40%" stop-color="#00d4ff" stop-opacity="0.3"/>
|
|
<stop offset="100%" stop-color="#00d4ff" stop-opacity="0"/>
|
|
</radialGradient>
|
|
|
|
<linearGradient id="shoot-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
|
|
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
|
</linearGradient>
|
|
|
|
<filter id="star-glow-0" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
|
<feFlood flood-color="#a78bfa" flood-opacity="0.5" result="color"/>
|
|
<feComposite in="color" in2="blur" operator="in" result="glow"/>
|
|
<feMerge>
|
|
<feMergeNode in="glow"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="star-glow-1" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
|
<feFlood flood-color="#00d4ff" flood-opacity="0.5" result="color"/>
|
|
<feComposite in="color" in2="blur" operator="in" result="glow"/>
|
|
<feMerge>
|
|
<feMergeNode in="glow"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="star-glow-2" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
|
<feFlood flood-color="#ffb020" flood-opacity="0.5" result="color"/>
|
|
<feComposite in="color" in2="blur" operator="in" result="glow"/>
|
|
<feMerge>
|
|
<feMergeNode in="glow"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- 1. Background -->
|
|
<rect x="0" y="0" width="850" height="280" rx="12" ry="12" fill="#080c14"/>
|
|
|
|
<!-- 2. Outer nebula -->
|
|
<circle cx="245" cy="125" r="120" fill="#a78bfa" opacity="0.015" filter="url(#nebula-outer)"/>
|
|
<circle cx="625" cy="175" r="100" fill="#ffb020" opacity="0.012" filter="url(#nebula-outer)"/>
|
|
<circle cx="425" cy="195" r="140" fill="#00d4ff" opacity="0.01" filter="url(#nebula-outer)"/>
|
|
|
|
<!-- 3. Star field (3 layers) -->
|
|
<circle cx="377.6" cy="256.1" r="0.42" fill="#00d4ff" opacity="0.15" class="star-bg" style="animation-delay: 2.7s"/>
|
|
<circle cx="710.2" cy="44.7" r="0.56" fill="#ffffff" opacity="0.13" class="star-bg" style="animation-delay: 2.5s"/>
|
|
<circle cx="573.5" cy="179.5" r="0.64" fill="#ffffff" opacity="0.20" class="star-bg" style="animation-delay: 1.9s"/>
|
|
<circle cx="457.6" cy="117.0" r="0.71" fill="#ffffff" opacity="0.14" class="star-bg" style="animation-delay: 2.6s"/>
|
|
<circle cx="154.3" cy="253.5" r="0.49" fill="#a78bfa" opacity="0.23" class="star-bg" style="animation-delay: 1.6s"/>
|
|
<circle cx="155.2" cy="194.8" r="0.35" fill="#ffffff" opacity="0.19" class="star-bg" style="animation-delay: 1.8s"/>
|
|
<circle cx="322.9" cy="16.1" r="0.39" fill="#ffffff" opacity="0.25" class="star-bg" style="animation-delay: 2.2s"/>
|
|
<circle cx="729.8" cy="203.0" r="0.32" fill="#ffffff" opacity="0.18" class="star-bg" style="animation-delay: 1.9s"/>
|
|
<circle cx="187.6" cy="102.3" r="0.59" fill="#ffb020" opacity="0.29" class="star-bg" style="animation-delay: 2.0s"/>
|
|
<circle cx="399.8" cy="264.7" r="0.38" fill="#ffffff" opacity="0.08" class="star-bg" style="animation-delay: 2.0s"/>
|
|
<circle cx="389.5" cy="110.6" r="0.79" fill="#ffffff" opacity="0.16" class="star-bg" style="animation-delay: 2.7s"/>
|
|
<circle cx="638.3" cy="171.3" r="0.59" fill="#ffffff" opacity="0.16" class="star-bg" style="animation-delay: 2.0s"/>
|
|
<circle cx="619.1" cy="224.1" r="0.79" fill="#00d4ff" opacity="0.18" class="star-bg" style="animation-delay: 2.1s"/>
|
|
<circle cx="219.3" cy="150.1" r="0.70" fill="#ffffff" opacity="0.28" class="star-bg" style="animation-delay: 1.6s"/>
|
|
<circle cx="80.5" cy="256.8" r="0.74" fill="#ffffff" opacity="0.25" class="star-bg" style="animation-delay: 2.1s"/>
|
|
<circle cx="641.0" cy="102.1" r="0.33" fill="#ffffff" opacity="0.18" class="star-bg" style="animation-delay: 1.7s"/>
|
|
<circle cx="285.6" cy="88.0" r="0.68" fill="#a78bfa" opacity="0.13" class="star-bg" style="animation-delay: 2.3s"/>
|
|
<circle cx="77.1" cy="23.6" r="0.62" fill="#ffffff" opacity="0.18" class="star-bg" style="animation-delay: 2.1s"/>
|
|
<circle cx="225.8" cy="228.1" r="0.69" fill="#ffffff" opacity="0.12" class="star-bg" style="animation-delay: 2.1s"/>
|
|
<circle cx="120.6" cy="63.5" r="0.32" fill="#ffffff" opacity="0.12" class="star-bg" style="animation-delay: 2.0s"/>
|
|
<circle cx="167.3" cy="19.2" r="0.34" fill="#ffb020" opacity="0.26" class="star-bg" style="animation-delay: 2.6s"/>
|
|
<circle cx="254.4" cy="193.5" r="0.45" fill="#ffffff" opacity="0.16" class="star-bg" style="animation-delay: 1.6s"/>
|
|
<circle cx="413.8" cy="104.4" r="0.67" fill="#ffffff" opacity="0.15" class="star-bg" style="animation-delay: 2.5s"/>
|
|
<circle cx="63.3" cy="74.0" r="0.72" fill="#ffffff" opacity="0.29" class="star-bg" style="animation-delay: 1.5s"/>
|
|
<circle cx="465.1" cy="73.8" r="0.71" fill="#00d4ff" opacity="0.10" class="star-bg" style="animation-delay: 1.9s"/>
|
|
<circle cx="136.5" cy="236.7" r="0.37" fill="#ffffff" opacity="0.16" class="star-bg" style="animation-delay: 2.1s"/>
|
|
<circle cx="733.2" cy="22.5" r="0.51" fill="#ffffff" opacity="0.28" class="star-bg" style="animation-delay: 2.4s"/>
|
|
<circle cx="135.0" cy="229.3" r="0.80" fill="#ffffff" opacity="0.26" class="star-bg" style="animation-delay: 2.1s"/>
|
|
<circle cx="586.8" cy="111.9" r="0.48" fill="#a78bfa" opacity="0.20" class="star-bg" style="animation-delay: 1.7s"/>
|
|
<circle cx="116.3" cy="136.9" r="0.69" fill="#ffffff" opacity="0.21" class="star-bg" style="animation-delay: 2.3s"/>
|
|
<circle cx="375.1" cy="211.6" r="0.35" fill="#ffffff" opacity="0.12" class="star-bg" style="animation-delay: 1.8s"/>
|
|
<circle cx="745.8" cy="99.3" r="0.40" fill="#ffffff" opacity="0.25" class="star-bg" style="animation-delay: 1.9s"/>
|
|
<circle cx="187.4" cy="34.5" r="0.46" fill="#ffb020" opacity="0.18" class="star-bg" style="animation-delay: 2.3s"/>
|
|
<circle cx="532.0" cy="265.9" r="0.38" fill="#ffffff" opacity="0.08" class="star-bg" style="animation-delay: 2.6s"/>
|
|
<circle cx="407.7" cy="233.2" r="0.45" fill="#ffffff" opacity="0.10" class="star-bg" style="animation-delay: 2.1s"/>
|
|
<circle cx="488.9" cy="77.5" r="0.74" fill="#ffffff" opacity="0.22" class="star-bg" style="animation-delay: 2.4s"/>
|
|
<circle cx="311.3" cy="109.5" r="0.76" fill="#00d4ff" opacity="0.14" class="star-bg" style="animation-delay: 1.9s"/>
|
|
<circle cx="163.3" cy="264.7" r="0.37" fill="#ffffff" opacity="0.29" class="star-bg" style="animation-delay: 1.9s"/>
|
|
<circle cx="156.2" cy="114.3" r="0.31" fill="#ffffff" opacity="0.21" class="star-bg" style="animation-delay: 2.6s"/>
|
|
<circle cx="512.0" cy="108.6" r="0.37" fill="#ffffff" opacity="0.29" class="star-bg" style="animation-delay: 1.6s"/>
|
|
<circle cx="319.8" cy="168.7" r="0.75" fill="#00d4ff" opacity="0.22" class="star-mid" style="animation-delay: 1.6s"/>
|
|
<circle cx="122.4" cy="19.9" r="0.83" fill="#ffffff" opacity="0.36" class="star-mid" style="animation-delay: 1.2s"/>
|
|
<circle cx="449.7" cy="210.6" r="1.17" fill="#ffffff" opacity="0.32" class="star-mid" style="animation-delay: 1.8s"/>
|
|
<circle cx="247.0" cy="188.9" r="0.94" fill="#ffffff" opacity="0.29" class="star-mid" style="animation-delay: 1.1s"/>
|
|
<circle cx="372.8" cy="21.3" r="0.81" fill="#a78bfa" opacity="0.24" class="star-mid" style="animation-delay: 1.1s"/>
|
|
<circle cx="733.8" cy="184.9" r="1.16" fill="#ffffff" opacity="0.21" class="star-mid" style="animation-delay: 1.7s"/>
|
|
<circle cx="358.2" cy="203.1" r="1.14" fill="#ffffff" opacity="0.47" class="star-mid" style="animation-delay: 1.6s"/>
|
|
<circle cx="707.6" cy="104.4" r="1.07" fill="#ffffff" opacity="0.19" class="star-mid" style="animation-delay: 1.5s"/>
|
|
<circle cx="610.3" cy="15.6" r="0.87" fill="#ffb020" opacity="0.19" class="star-mid" style="animation-delay: 2.0s"/>
|
|
<circle cx="803.7" cy="260.1" r="0.90" fill="#ffffff" opacity="0.30" class="star-mid" style="animation-delay: 1.6s"/>
|
|
<circle cx="658.6" cy="155.0" r="0.70" fill="#ffffff" opacity="0.44" class="star-mid" style="animation-delay: 1.9s"/>
|
|
<circle cx="227.2" cy="171.4" r="0.90" fill="#ffffff" opacity="0.16" class="star-mid" style="animation-delay: 1.6s"/>
|
|
<circle cx="803.3" cy="110.4" r="0.92" fill="#00d4ff" opacity="0.19" class="star-mid" style="animation-delay: 1.6s"/>
|
|
<circle cx="421.3" cy="174.3" r="0.78" fill="#ffffff" opacity="0.48" class="star-mid" style="animation-delay: 1.1s"/>
|
|
<circle cx="723.0" cy="206.5" r="1.17" fill="#ffffff" opacity="0.46" class="star-mid" style="animation-delay: 1.9s"/>
|
|
<circle cx="267.3" cy="64.7" r="0.70" fill="#ffffff" opacity="0.32" class="star-mid" style="animation-delay: 1.7s"/>
|
|
<circle cx="214.9" cy="213.6" r="0.82" fill="#a78bfa" opacity="0.42" class="star-mid" style="animation-delay: 1.2s"/>
|
|
<circle cx="515.0" cy="65.7" r="1.01" fill="#ffffff" opacity="0.46" class="star-mid" style="animation-delay: 2.1s"/>
|
|
<circle cx="242.5" cy="149.6" r="1.04" fill="#ffffff" opacity="0.24" class="star-mid" style="animation-delay: 1.7s"/>
|
|
<circle cx="778.6" cy="142.2" r="0.60" fill="#ffffff" opacity="0.22" class="star-mid" style="animation-delay: 1.4s"/>
|
|
<circle cx="237.6" cy="201.5" r="1.72" fill="#00d4ff" opacity="0.65" class="star-fg" style="animation-delay: 0.7s"/>
|
|
<circle cx="394.6" cy="47.7" r="1.35" fill="#ffffff" opacity="0.66" class="star-fg" style="animation-delay: 0.9s"/>
|
|
<circle cx="582.7" cy="97.1" r="1.41" fill="#ffffff" opacity="0.46" class="star-fg" style="animation-delay: 0.7s"/>
|
|
<circle cx="574.7" cy="171.2" r="1.01" fill="#ffffff" opacity="0.65" class="star-fg" style="animation-delay: 0.7s"/>
|
|
<circle cx="698.1" cy="126.7" r="1.09" fill="#a78bfa" opacity="0.54" class="star-fg" style="animation-delay: 1.3s"/>
|
|
<circle cx="23.4" cy="95.1" r="1.30" fill="#ffffff" opacity="0.44" class="star-fg" style="animation-delay: 0.6s"/>
|
|
<circle cx="84.3" cy="216.2" r="1.46" fill="#ffffff" opacity="0.64" class="star-fg" style="animation-delay: 1.1s"/>
|
|
<circle cx="193.1" cy="101.1" r="1.00" fill="#ffffff" opacity="0.70" class="star-fg" style="animation-delay: 0.7s"/>
|
|
<circle cx="415.4" cy="46.9" r="1.40" fill="#ffb020" opacity="0.52" class="star-fg" style="animation-delay: 1.3s"/>
|
|
<circle cx="518.8" cy="112.8" r="1.17" fill="#ffffff" opacity="0.68" class="star-fg" style="animation-delay: 1.0s"/>
|
|
|
|
<!-- 4. Inner nebula -->
|
|
<circle cx="425" cy="155" r="70" fill="#00d4ff" opacity="0.04" filter="url(#nebula-inner)"/>
|
|
<circle cx="365" cy="135" r="50" fill="#a78bfa" opacity="0.035" filter="url(#nebula-inner)"/>
|
|
<circle cx="495" cy="170" r="45" fill="#ffb020" opacity="0.03" filter="url(#nebula-inner)"/>
|
|
|
|
<!-- 5. Shooting stars -->
|
|
<line x1="120" y1="30" x2="140" y2="35" stroke="url(#shoot-grad)" stroke-width="1.2" stroke-linecap="round" class="shooting-star" style="animation-delay: 0.0s; --shoot-tx: 200px; --shoot-ty: 80px; animation-duration: 6s"/>
|
|
<line x1="650" y1="20" x2="670" y2="25" stroke="url(#shoot-grad)" stroke-width="1.2" stroke-linecap="round" class="shooting-star" style="animation-delay: 2.5s; --shoot-tx: 180px; --shoot-ty: 70px; animation-duration: 8s"/>
|
|
<line x1="400" y1="250" x2="420" y2="255" stroke="url(#shoot-grad)" stroke-width="1.2" stroke-linecap="round" class="shooting-star" style="animation-delay: 5.0s; --shoot-tx: 160px; --shoot-ty: 60px; animation-duration: 7s"/>
|
|
|
|
<!-- 6. Spiral arm paths (segmented fade) -->
|
|
<path d="M 425.0 155.0 Q 425.0 155.0 429.6 155.8 Q 434.3 156.7 437.5 157.9 Q 440.8 159.2 442.3 160.7 Q 443.8 162.2 443.2 163.9 Q 442.6 165.6 439.8 167.4 Q 437.1 169.1 432.0 170.7 Q 427.0 172.3 419.9 173.6 L 412.7 174.9" fill="none" stroke="#a78bfa" stroke-width="2.0" opacity="0.50" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.40;0.60;0.40" dur="8s" begin="0s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 412.7 174.9 Q 412.7 174.9 403.7 175.8 Q 394.7 176.8 384.3 177.1 Q 373.8 177.5 362.5 177.2 Q 351.1 176.9 339.3 175.9 Q 327.6 174.9 316.2 173.2 Q 304.9 171.4 294.5 169.0 Q 284.2 166.5 275.6 163.3 L 267.0 160.1" fill="none" stroke="#a78bfa" stroke-width="1.7" opacity="0.40" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.30;0.50;0.30" dur="8s" begin="0s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 267.0 160.1 Q 267.0 160.1 260.8 156.3 Q 254.6 152.5 251.4 148.3 Q 248.2 144.0 248.5 139.4 Q 248.8 134.8 252.9 130.0 Q 257.1 125.3 265.2 120.6 Q 273.4 115.9 285.6 111.6 Q 297.8 107.2 313.9 103.3 L 330.0 99.4" fill="none" stroke="#a78bfa" stroke-width="1.4" opacity="0.30" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="8s" begin="0s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 330.0 99.4 Q 330.0 99.4 349.7 96.3 Q 369.3 93.2 391.9 91.0 Q 414.4 88.8 439.3 87.6 Q 464.1 86.5 490.4 86.7 Q 516.6 86.8 543.3 88.2 Q 570.0 89.7 596.0 92.5 Q 622.1 95.3 646.4 99.4 L 670.7 103.6" fill="none" stroke="#a78bfa" stroke-width="1.1" opacity="0.20" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.10;0.30;0.10" dur="8s" begin="0s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 425.0 155.0 Q 425.0 155.0 419.6 155.5 Q 414.3 156.0 408.4 155.9 Q 402.5 155.9 396.7 155.3 Q 390.9 154.8 385.7 153.7 Q 380.5 152.6 376.5 151.0 Q 372.5 149.4 370.2 147.5 Q 367.9 145.5 367.8 143.3 L 367.6 141.0" fill="none" stroke="#00d4ff" stroke-width="2.0" opacity="0.50" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.40;0.60;0.40" dur="8s" begin="1s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 367.6 141.0 Q 367.6 141.0 369.8 138.6 Q 372.0 136.2 376.8 133.9 Q 381.7 131.5 389.1 129.3 Q 396.5 127.1 406.5 125.2 Q 416.4 123.4 428.6 122.0 Q 440.7 120.6 454.7 119.9 Q 468.7 119.2 483.9 119.2 L 499.1 119.3" fill="none" stroke="#00d4ff" stroke-width="1.7" opacity="0.40" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.30;0.50;0.30" dur="8s" begin="1s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 499.1 119.3 Q 499.1 119.3 514.9 120.2 Q 530.7 121.1 546.4 122.8 Q 562.0 124.6 576.8 127.3 Q 591.5 130.0 604.4 133.6 Q 617.4 137.2 627.8 141.6 Q 638.2 145.9 645.4 151.0 Q 652.5 156.0 655.8 161.6 L 659.1 167.2" fill="none" stroke="#00d4ff" stroke-width="1.4" opacity="0.30" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="8s" begin="1s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 659.1 167.2 Q 659.1 167.2 658.0 173.0 Q 656.9 178.9 651.1 184.9 Q 645.3 190.8 634.6 196.6 Q 623.9 202.4 608.5 207.8 Q 593.0 213.2 573.1 217.9 Q 553.1 222.6 529.1 226.4 Q 505.1 230.1 477.7 232.8 L 450.3 235.5" fill="none" stroke="#00d4ff" stroke-width="1.1" opacity="0.20" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.10;0.30;0.10" dur="8s" begin="1s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 425.0 155.0 Q 425.0 155.0 425.6 153.6 Q 426.1 152.1 428.7 150.8 Q 431.3 149.5 435.8 148.4 Q 440.3 147.3 446.4 146.5 Q 452.5 145.8 459.8 145.6 Q 467.1 145.3 475.1 145.6 Q 483.1 145.9 491.2 146.8 L 499.3 147.7" fill="none" stroke="#ffb020" stroke-width="2.0" opacity="0.50" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.40;0.60;0.40" dur="8s" begin="2s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 499.3 147.7 Q 499.3 147.7 506.9 149.2 Q 514.5 150.8 520.9 152.9 Q 527.4 155.0 532.1 157.6 Q 536.9 160.3 539.3 163.3 Q 541.8 166.4 541.5 169.8 Q 541.3 173.1 538.0 176.6 Q 534.6 180.2 528.1 183.6 L 521.5 187.1" fill="none" stroke="#ffb020" stroke-width="1.7" opacity="0.40" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.30;0.50;0.30" dur="8s" begin="2s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 521.5 187.1 Q 521.5 187.1 511.6 190.4 Q 501.8 193.6 488.7 196.5 Q 475.7 199.3 459.8 201.5 Q 443.9 203.8 425.7 205.2 Q 407.4 206.7 387.3 207.2 Q 367.3 207.8 346.2 207.3 Q 325.1 206.8 303.8 205.2 L 282.6 203.6" fill="none" stroke="#ffb020" stroke-width="1.4" opacity="0.30" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.20;0.40;0.20" dur="8s" begin="2s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M 282.6 203.6 Q 282.6 203.6 262.0 200.9 Q 241.5 198.1 222.6 194.3 Q 203.8 190.4 187.6 185.5 Q 171.4 180.6 158.6 174.8 Q 145.9 169.0 137.5 162.4 Q 129.2 155.9 125.7 148.7 Q 122.3 141.6 124.4 134.2 L 126.5 126.8" fill="none" stroke="#ffb020" stroke-width="1.1" opacity="0.20" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0.10;0.30;0.10" dur="8s" begin="2s" repeatCount="indefinite"/>
|
|
</path>
|
|
|
|
<!-- 7. Arm particles -->
|
|
<circle r="1.5" fill="#a78bfa" opacity="0.6">
|
|
<animateMotion dur="12s" begin="0s" repeatCount="indefinite" path="M 425.0 155.0 Q 425.0 155.0 429.6 155.8 Q 434.3 156.7 437.5 157.9 Q 440.8 159.2 442.3 160.7 Q 443.8 162.2 443.2 163.9 Q 442.6 165.6 439.8 167.4 Q 437.1 169.1 432.0 170.7 Q 427.0 172.3 419.9 173.6 Q 412.7 174.9 403.7 175.8 Q 394.7 176.8 384.3 177.1 Q 373.8 177.5 362.5 177.2 Q 351.1 176.9 339.3 175.9 Q 327.6 174.9 316.2 173.2 Q 304.9 171.4 294.5 169.0 Q 284.2 166.5 275.6 163.3 Q 267.0 160.1 260.8 156.3 Q 254.6 152.5 251.4 148.3 Q 248.2 144.0 248.5 139.4 Q 248.8 134.8 252.9 130.0 Q 257.1 125.3 265.2 120.6 Q 273.4 115.9 285.6 111.6 Q 297.8 107.2 313.9 103.3 Q 330.0 99.4 349.7 96.3 Q 369.3 93.2 391.9 91.0 Q 414.4 88.8 439.3 87.6 Q 464.1 86.5 490.4 86.7 Q 516.6 86.8 543.3 88.2 Q 570.0 89.7 596.0 92.5 Q 622.1 95.3 646.4 99.4 Q 670.7 103.6 692.1 109.0 L 713.6 114.5"/>
|
|
<animate attributeName="opacity" values="0;0.7;0.3;0" dur="12s" begin="0s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="1.5" fill="#a78bfa" opacity="0.6">
|
|
<animateMotion dur="12s" begin="6s" repeatCount="indefinite" path="M 425.0 155.0 Q 425.0 155.0 429.6 155.8 Q 434.3 156.7 437.5 157.9 Q 440.8 159.2 442.3 160.7 Q 443.8 162.2 443.2 163.9 Q 442.6 165.6 439.8 167.4 Q 437.1 169.1 432.0 170.7 Q 427.0 172.3 419.9 173.6 Q 412.7 174.9 403.7 175.8 Q 394.7 176.8 384.3 177.1 Q 373.8 177.5 362.5 177.2 Q 351.1 176.9 339.3 175.9 Q 327.6 174.9 316.2 173.2 Q 304.9 171.4 294.5 169.0 Q 284.2 166.5 275.6 163.3 Q 267.0 160.1 260.8 156.3 Q 254.6 152.5 251.4 148.3 Q 248.2 144.0 248.5 139.4 Q 248.8 134.8 252.9 130.0 Q 257.1 125.3 265.2 120.6 Q 273.4 115.9 285.6 111.6 Q 297.8 107.2 313.9 103.3 Q 330.0 99.4 349.7 96.3 Q 369.3 93.2 391.9 91.0 Q 414.4 88.8 439.3 87.6 Q 464.1 86.5 490.4 86.7 Q 516.6 86.8 543.3 88.2 Q 570.0 89.7 596.0 92.5 Q 622.1 95.3 646.4 99.4 Q 670.7 103.6 692.1 109.0 L 713.6 114.5"/>
|
|
<animate attributeName="opacity" values="0;0.7;0.3;0" dur="12s" begin="6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="1.5" fill="#00d4ff" opacity="0.6">
|
|
<animateMotion dur="12s" begin="4s" repeatCount="indefinite" path="M 425.0 155.0 Q 425.0 155.0 419.6 155.5 Q 414.3 156.0 408.4 155.9 Q 402.5 155.9 396.7 155.3 Q 390.9 154.8 385.7 153.7 Q 380.5 152.6 376.5 151.0 Q 372.5 149.4 370.2 147.5 Q 367.9 145.5 367.8 143.3 Q 367.6 141.0 369.8 138.6 Q 372.0 136.2 376.8 133.9 Q 381.7 131.5 389.1 129.3 Q 396.5 127.1 406.5 125.2 Q 416.4 123.4 428.6 122.0 Q 440.7 120.6 454.7 119.9 Q 468.7 119.2 483.9 119.2 Q 499.1 119.3 514.9 120.2 Q 530.7 121.1 546.4 122.8 Q 562.0 124.6 576.8 127.3 Q 591.5 130.0 604.4 133.6 Q 617.4 137.2 627.8 141.6 Q 638.2 145.9 645.4 151.0 Q 652.5 156.0 655.8 161.6 Q 659.1 167.2 658.0 173.0 Q 656.9 178.9 651.1 184.9 Q 645.3 190.8 634.6 196.6 Q 623.9 202.4 608.5 207.8 Q 593.0 213.2 573.1 217.9 Q 553.1 222.6 529.1 226.4 Q 505.1 230.1 477.7 232.8 Q 450.3 235.5 420.4 236.8 L 390.5 238.1"/>
|
|
<animate attributeName="opacity" values="0;0.7;0.3;0" dur="12s" begin="4s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="1.5" fill="#00d4ff" opacity="0.6">
|
|
<animateMotion dur="12s" begin="10s" repeatCount="indefinite" path="M 425.0 155.0 Q 425.0 155.0 419.6 155.5 Q 414.3 156.0 408.4 155.9 Q 402.5 155.9 396.7 155.3 Q 390.9 154.8 385.7 153.7 Q 380.5 152.6 376.5 151.0 Q 372.5 149.4 370.2 147.5 Q 367.9 145.5 367.8 143.3 Q 367.6 141.0 369.8 138.6 Q 372.0 136.2 376.8 133.9 Q 381.7 131.5 389.1 129.3 Q 396.5 127.1 406.5 125.2 Q 416.4 123.4 428.6 122.0 Q 440.7 120.6 454.7 119.9 Q 468.7 119.2 483.9 119.2 Q 499.1 119.3 514.9 120.2 Q 530.7 121.1 546.4 122.8 Q 562.0 124.6 576.8 127.3 Q 591.5 130.0 604.4 133.6 Q 617.4 137.2 627.8 141.6 Q 638.2 145.9 645.4 151.0 Q 652.5 156.0 655.8 161.6 Q 659.1 167.2 658.0 173.0 Q 656.9 178.9 651.1 184.9 Q 645.3 190.8 634.6 196.6 Q 623.9 202.4 608.5 207.8 Q 593.0 213.2 573.1 217.9 Q 553.1 222.6 529.1 226.4 Q 505.1 230.1 477.7 232.8 Q 450.3 235.5 420.4 236.8 L 390.5 238.1"/>
|
|
<animate attributeName="opacity" values="0;0.7;0.3;0" dur="12s" begin="10s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="1.5" fill="#ffb020" opacity="0.6">
|
|
<animateMotion dur="12s" begin="8s" repeatCount="indefinite" path="M 425.0 155.0 Q 425.0 155.0 425.6 153.6 Q 426.1 152.1 428.7 150.8 Q 431.3 149.5 435.8 148.4 Q 440.3 147.3 446.4 146.5 Q 452.5 145.8 459.8 145.6 Q 467.1 145.3 475.1 145.6 Q 483.1 145.9 491.2 146.8 Q 499.3 147.7 506.9 149.2 Q 514.5 150.8 520.9 152.9 Q 527.4 155.0 532.1 157.6 Q 536.9 160.3 539.3 163.3 Q 541.8 166.4 541.5 169.8 Q 541.3 173.1 538.0 176.6 Q 534.6 180.2 528.1 183.6 Q 521.5 187.1 511.6 190.4 Q 501.8 193.6 488.7 196.5 Q 475.7 199.3 459.8 201.5 Q 443.9 203.8 425.7 205.2 Q 407.4 206.7 387.3 207.2 Q 367.3 207.8 346.2 207.3 Q 325.1 206.8 303.8 205.2 Q 282.6 203.6 262.0 200.9 Q 241.5 198.1 222.6 194.3 Q 203.8 190.4 187.6 185.5 Q 171.4 180.6 158.6 174.8 Q 145.9 169.0 137.5 162.4 Q 129.2 155.9 125.7 148.7 Q 122.3 141.6 124.4 134.2 Q 126.5 126.8 134.3 119.4 L 142.1 111.9"/>
|
|
<animate attributeName="opacity" values="0;0.7;0.3;0" dur="12s" begin="8s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="1.5" fill="#ffb020" opacity="0.6">
|
|
<animateMotion dur="12s" begin="14s" repeatCount="indefinite" path="M 425.0 155.0 Q 425.0 155.0 425.6 153.6 Q 426.1 152.1 428.7 150.8 Q 431.3 149.5 435.8 148.4 Q 440.3 147.3 446.4 146.5 Q 452.5 145.8 459.8 145.6 Q 467.1 145.3 475.1 145.6 Q 483.1 145.9 491.2 146.8 Q 499.3 147.7 506.9 149.2 Q 514.5 150.8 520.9 152.9 Q 527.4 155.0 532.1 157.6 Q 536.9 160.3 539.3 163.3 Q 541.8 166.4 541.5 169.8 Q 541.3 173.1 538.0 176.6 Q 534.6 180.2 528.1 183.6 Q 521.5 187.1 511.6 190.4 Q 501.8 193.6 488.7 196.5 Q 475.7 199.3 459.8 201.5 Q 443.9 203.8 425.7 205.2 Q 407.4 206.7 387.3 207.2 Q 367.3 207.8 346.2 207.3 Q 325.1 206.8 303.8 205.2 Q 282.6 203.6 262.0 200.9 Q 241.5 198.1 222.6 194.3 Q 203.8 190.4 187.6 185.5 Q 171.4 180.6 158.6 174.8 Q 145.9 169.0 137.5 162.4 Q 129.2 155.9 125.7 148.7 Q 122.3 141.6 124.4 134.2 Q 126.5 126.8 134.3 119.4 L 142.1 111.9"/>
|
|
<animate attributeName="opacity" values="0;0.7;0.3;0" dur="12s" begin="14s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- 8. Tech dots + leader lines + labels -->
|
|
<circle cx="394.7" cy="176.8" r="2.5" fill="#a78bfa" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="0.0s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="394.7" y1="176.8" x2="380.1" y2="187.3" stroke="#a78bfa" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="380.1" y="190.3" text-anchor="end" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">TypeScript</text>
|
|
<text x="380.1" y="190.3" text-anchor="end" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.85">TypeScript</text>
|
|
<circle cx="327.6" cy="174.9" r="2.5" fill="#a78bfa" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="0.7s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="327.6" y1="174.9" x2="310.0" y2="178.5" stroke="#a78bfa" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="310.0" y="181.5" text-anchor="end" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">React.js</text>
|
|
<text x="310.0" y="181.5" text-anchor="end" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.85">React.js</text>
|
|
<circle cx="267.0" cy="160.1" r="2.5" fill="#a78bfa" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="1.4s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="267.0" y1="160.1" x2="249.0" y2="160.7" stroke="#a78bfa" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="249.0" y="163.7" text-anchor="end" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">React Native</text>
|
|
<text x="249.0" y="163.7" text-anchor="end" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.85">React Native</text>
|
|
<circle cx="248.8" cy="134.8" r="2.5" fill="#a78bfa" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="2.0999999999999996s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="248.8" y1="134.8" x2="230.9" y2="132.7" stroke="#a78bfa" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="230.9" y="135.7" text-anchor="end" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Flutter</text>
|
|
<text x="230.9" y="135.7" text-anchor="end" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.85">Flutter</text>
|
|
<circle cx="297.8" cy="107.2" r="2.5" fill="#a78bfa" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="2.8s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="297.8" y1="107.2" x2="281.0" y2="100.8" stroke="#a78bfa" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="281.0" y="103.8" text-anchor="end" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Swift</text>
|
|
<text x="281.0" y="103.8" text-anchor="end" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.85">Swift</text>
|
|
<circle cx="414.4" cy="88.8" r="2.5" fill="#a78bfa" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="3.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="414.4" y1="88.8" x2="411.6" y2="71.0" stroke="#a78bfa" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="411.6" y="74.0" text-anchor="middle" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Dart</text>
|
|
<text x="411.6" y="74.0" text-anchor="middle" fill="#a78bfa" font-size="9" font-family="monospace" opacity="0.85">Dart</text>
|
|
<circle cx="372.0" cy="136.2" r="2.5" fill="#00d4ff" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="0.0s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="372.0" y1="136.2" x2="355.1" y2="130.2" stroke="#00d4ff" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="355.1" y="133.2" text-anchor="end" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Go</text>
|
|
<text x="355.1" y="133.2" text-anchor="end" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.85">Go</text>
|
|
<circle cx="416.4" cy="123.4" r="2.5" fill="#00d4ff" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="0.7s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="416.4" y1="123.4" x2="411.7" y2="106.0" stroke="#00d4ff" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="411.7" y="109.0" text-anchor="middle" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Python</text>
|
|
<text x="411.7" y="109.0" text-anchor="middle" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.85">Python</text>
|
|
<circle cx="499.1" cy="119.3" r="2.5" fill="#00d4ff" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="1.4s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="499.1" y1="119.3" x2="515.3" y2="111.5" stroke="#00d4ff" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="515.3" y="114.5" text-anchor="start" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Protocol Buffers</text>
|
|
<text x="515.3" y="114.5" text-anchor="start" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.85">Protocol Buffers</text>
|
|
<circle cx="591.5" cy="130.0" r="2.5" fill="#00d4ff" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="2.0999999999999996s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="591.5" y1="130.0" x2="609.3" y2="127.4" stroke="#00d4ff" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="609.3" y="130.4" text-anchor="start" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">WebAuthn</text>
|
|
<text x="609.3" y="130.4" text-anchor="start" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.85">WebAuthn</text>
|
|
<circle cx="652.5" cy="156.0" r="2.5" fill="#00d4ff" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="2.8s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="652.5" y1="156.0" x2="670.5" y2="156.1" stroke="#00d4ff" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="670.5" y="159.1" text-anchor="start" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">WebAssembly</text>
|
|
<text x="670.5" y="159.1" text-anchor="start" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.85">WebAssembly</text>
|
|
<circle cx="645.3" cy="190.8" r="2.5" fill="#00d4ff" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="3.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="645.3" y1="190.8" x2="663.0" y2="193.7" stroke="#00d4ff" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="663.0" y="196.7" text-anchor="start" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Cryptography</text>
|
|
<text x="663.0" y="196.7" text-anchor="start" fill="#00d4ff" font-size="9" font-family="monospace" opacity="0.85">Cryptography</text>
|
|
<circle cx="514.5" cy="150.8" r="2.5" fill="#ffb020" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="0.0s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="514.5" y1="150.8" x2="532.5" y2="149.9" stroke="#ffb020" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="532.5" y="152.9" text-anchor="start" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Docker</text>
|
|
<text x="532.5" y="152.9" text-anchor="start" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.85">Docker</text>
|
|
<circle cx="541.8" cy="166.4" r="2.5" fill="#ffb020" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="0.7s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="541.8" y1="166.4" x2="559.7" y2="168.1" stroke="#ffb020" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="559.7" y="171.1" text-anchor="start" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Kubernetes</text>
|
|
<text x="559.7" y="171.1" text-anchor="start" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.85">Kubernetes</text>
|
|
<circle cx="521.5" cy="187.1" r="2.5" fill="#ffb020" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="1.4s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="521.5" y1="187.1" x2="538.6" y2="192.8" stroke="#ffb020" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="538.6" y="195.8" text-anchor="start" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Terraform</text>
|
|
<text x="538.6" y="195.8" text-anchor="start" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.85">Terraform</text>
|
|
<circle cx="443.9" cy="203.8" r="2.5" fill="#ffb020" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="2.0999999999999996s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="443.9" y1="203.8" x2="450.5" y2="220.5" stroke="#ffb020" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="450.5" y="223.5" text-anchor="middle" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Ansible</text>
|
|
<text x="450.5" y="223.5" text-anchor="middle" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.85">Ansible</text>
|
|
<circle cx="325.1" cy="206.8" r="2.5" fill="#ffb020" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="2.8s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="325.1" y1="206.8" x2="309.1" y2="215.1" stroke="#ffb020" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="309.1" y="218.1" text-anchor="end" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">CI/CD</text>
|
|
<text x="309.1" y="218.1" text-anchor="end" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.85">CI/CD</text>
|
|
<circle cx="203.8" cy="190.4" r="2.5" fill="#ffb020" opacity="0.85">
|
|
<animate attributeName="opacity" values="0.85;1;0.85" dur="5s" begin="3.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<line x1="203.8" y1="190.4" x2="186.0" y2="193.3" stroke="#ffb020" stroke-width="0.5" opacity="0.25" stroke-dasharray="2 2"/>
|
|
<text x="186.0" y="196.3" text-anchor="end" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.2" filter="url(#label-glow)">Linux</text>
|
|
<text x="186.0" y="196.3" text-anchor="end" fill="#ffb020" font-size="9" font-family="monospace" opacity="0.85">Linux</text>
|
|
|
|
<!-- 9. Project stars -->
|
|
<circle cx="171.4" cy="180.6" r="4" fill="#ffb020" filter="url(#star-glow-2)">
|
|
<animate attributeName="opacity" values="0.6;1;0.6" dur="4s" begin="1.6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- 10. Orbital rings -->
|
|
<ellipse cx="425" cy="155" rx="55" ry="18" fill="none" stroke="#00d4ff" stroke-width="0.6" opacity="0.15" stroke-dasharray="4 6">
|
|
<animateTransform attributeName="transform" type="rotate" from="0 425 155" to="360 425 155" dur="20s" repeatCount="indefinite"/>
|
|
</ellipse>
|
|
<ellipse cx="425" cy="155" rx="75" ry="24" fill="none" stroke="#a78bfa" stroke-width="0.5" opacity="0.1" stroke-dasharray="3 8">
|
|
<animateTransform attributeName="transform" type="rotate" from="360 425 155" to="0 425 155" dur="30s" repeatCount="indefinite"/>
|
|
</ellipse>
|
|
|
|
<!-- 11. Galaxy core -->
|
|
<!-- Outer haze -->
|
|
<circle cx="425" cy="155" r="40" fill="url(#core-haze-gradient)" opacity="0.4"/>
|
|
<!-- Inner glow -->
|
|
<circle cx="425" cy="155" r="24" fill="url(#core-inner-gradient)" opacity="0.6"/>
|
|
<!-- Outer ring -->
|
|
<ellipse cx="425" cy="155" rx="20" ry="18" fill="none" stroke="#00d4ff" stroke-width="1.2" opacity="0.55" stroke-dasharray="5 3" class="core-ring"/>
|
|
<!-- Inner ring -->
|
|
<circle cx="425" cy="155" r="14" fill="none" stroke="#a78bfa" stroke-width="0.8" opacity="0.4" class="core-ring-inner"/>
|
|
<!-- Solid core -->
|
|
<circle cx="425" cy="155" r="11" fill="#0f1623" stroke="#1a2332" stroke-width="0.5"/>
|
|
<!-- Bright center dot -->
|
|
<circle cx="425" cy="155" r="3" fill="#00d4ff" filter="url(#core-bright-glow)" opacity="0.9"/>
|
|
<!-- Initial -->
|
|
<text x="425" y="160" text-anchor="middle" fill="#00d4ff" font-size="14" font-weight="bold" font-family="monospace">P</text>
|
|
|
|
<!-- 12. Profile text -->
|
|
<text x="425" y="26" text-anchor="middle" fill="#f1f5f9" font-size="20" font-weight="bold" font-family="sans-serif">Prad Nukala</text>
|
|
<text x="425" y="44" text-anchor="middle" fill="#94a3b8" font-size="12" font-family="sans-serif">Engineer & Founder building decentralized identity infrastructure</text>
|
|
<text x="425" y="268" text-anchor="middle" fill="#64748b" font-size="11" font-family="monospace" font-style="italic">"Testem Perhibio"</text>
|
|
</svg> |