You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
320 lines
27 KiB
320 lines
27 KiB
"use client";
|
|
|
|
export function AnimatedCopilotOrb() {
|
|
return (
|
|
<div className="relative w-full h-full select-none pointer-events-none">
|
|
{/* =========================================================================
|
|
LAYER 1: Ambient Background Glow & Core Base Volume (Cached Layer)
|
|
Isolated in its own SVG so the 125px Gaussian blurs and inner shadows
|
|
are rasterized ONCE into GPU VRAM and never re-evaluated during animation.
|
|
========================================================================= */}
|
|
<svg
|
|
width="1612"
|
|
height="865"
|
|
viewBox="-168.508 -11 1612 865"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="absolute inset-0 w-full h-full object-contain object-center animate-ambient-glow"
|
|
>
|
|
<defs>
|
|
{/* Unified ambient background blur filter */}
|
|
<filter id="amb_glow_filter" x="140" y="-30" width="1080" height="920" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
|
<feGaussianBlur stdDeviation="125" />
|
|
</filter>
|
|
|
|
{/* Sphere base outer glow */}
|
|
<filter id="core_glow_filter" x="318.992" y="103" width="637" height="637" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
|
<feGaussianBlur stdDeviation="50" />
|
|
</filter>
|
|
|
|
{/* Core sphere inner shadow */}
|
|
<filter id="core_inner_shadow" x="418.992" y="203" width="437" height="441" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
<feOffset dy="4"/>
|
|
<feGaussianBlur stdDeviation="50"/>
|
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.195532 0 0 0 0 0.697115 0 0 0 1 0"/>
|
|
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
<feOffset dy="4"/>
|
|
<feGaussianBlur stdDeviation="16"/>
|
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.1875 0 0 0 0 0.572368 0 0 0 0 1 0 0 0 1 0"/>
|
|
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
<feOffset/>
|
|
<feGaussianBlur stdDeviation="5"/>
|
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
|
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0"/>
|
|
<feBlend mode="plus-lighter" in2="effect2_innerShadow" result="effect3_innerShadow"/>
|
|
</filter>
|
|
|
|
<linearGradient id="p0_lin" x1="395.077" y1="250" x2="653.061" y2="262.422" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#7641E0"/>
|
|
<stop offset="1" stopColor="#3E47FD"/>
|
|
</linearGradient>
|
|
<linearGradient id="p1_lin" x1="705.077" y1="405" x2="963.061" y2="417.422" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#4143E0"/>
|
|
<stop offset="1" stopColor="#3E47FD"/>
|
|
</linearGradient>
|
|
<linearGradient id="p2_lin" x1="450.184" y1="456" x2="706.92" y2="468.302" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#A229CA"/>
|
|
<stop offset="1" stopColor="#3E47FD"/>
|
|
</linearGradient>
|
|
<linearGradient id="p3_lin" x1="637.492" y1="203" x2="637.492" y2="772.661" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#0029B3"/>
|
|
<stop offset="0.1" stopColor="#0038BF"/>
|
|
<stop offset="0.2" stopColor="#0E4ACC"/>
|
|
<stop offset="0.3" stopColor="#255CD9"/>
|
|
<stop offset="0.4" stopColor="#3D6FE6"/>
|
|
<stop offset="0.5" stopColor="#487EFF"/>
|
|
<stop offset="0.65" stopColor="#4B80FF"/>
|
|
<stop offset="0.8" stopColor="#5D8BFF"/>
|
|
<stop offset="1" stopColor="#ADBFFF"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
{/* Ambient Glow Paths */}
|
|
<g filter="url(#amb_glow_filter)">
|
|
<path fillRule="evenodd" clipRule="evenodd" d="M514.081 250.023C537.054 249.41 557.255 261.359 575.225 275.656C596.248 292.382 622.942 309.842 622.992 336.673C623.042 363.518 599.132 385.181 575.452 397.917C556.713 407.995 535.335 394.075 514.081 395.246C490.12 396.567 466.052 417.498 445.534 405.078C423.572 391.784 415.174 362.218 417.315 336.673C419.331 312.637 438.128 294.94 456.118 278.831C472.819 263.876 491.65 250.62 514.081 250.023Z" fill="url(#p0_lin)"/>
|
|
<path fillRule="evenodd" clipRule="evenodd" d="M824.081 405.023C847.054 404.41 867.255 416.359 885.225 430.656C906.248 447.382 932.942 464.842 932.992 491.673C933.042 518.518 909.132 540.181 885.452 552.917C866.713 562.995 845.335 549.075 824.081 550.246C800.12 551.567 776.052 572.498 755.534 560.078C733.572 546.784 725.174 517.218 727.315 491.673C729.331 467.637 748.128 449.94 766.118 433.831C782.819 418.876 801.65 405.62 824.081 405.023Z" fill="url(#p1_lin)"/>
|
|
<path fillRule="evenodd" clipRule="evenodd" d="M568.61 456.023C591.471 455.41 611.575 467.359 629.457 481.656C650.378 498.382 676.943 515.842 676.992 542.673C677.042 569.518 653.248 591.181 629.682 603.917C611.035 613.995 589.761 600.075 568.61 601.246C544.765 602.567 520.814 623.498 500.396 611.078C478.54 597.784 470.183 568.218 472.314 542.673C474.319 518.637 493.026 500.94 510.928 484.831C527.548 469.876 546.288 456.62 568.61 456.023Z" fill="url(#p2_lin)"/>
|
|
</g>
|
|
|
|
{/* Base Sphere Glow Rim & Dark Volume */}
|
|
<g filter="url(#core_glow_filter)" style={{ mixBlendMode: "screen" }}>
|
|
<circle cx="637.492" cy="421.5" r="218.5" fill="url(#p3_lin)"/>
|
|
</g>
|
|
<g filter="url(#core_inner_shadow)">
|
|
<circle cx="637.492" cy="421.5" r="218.5" fill="#03070D"/>
|
|
</g>
|
|
</svg>
|
|
|
|
{/* =========================================================================
|
|
LAYER 2: Dynamic Live Vector Animations
|
|
Contains the continuous 360° orbiting ring, breathing energy waves,
|
|
drifting liquid blob, rotating star spotlight, and twin contour rings.
|
|
========================================================================= */}
|
|
<svg
|
|
width="1612"
|
|
height="865"
|
|
viewBox="-168.508 -11 1612 865"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="absolute inset-0 w-full h-full object-contain object-center animate-orb-color-cycle pointer-events-none"
|
|
>
|
|
<defs>
|
|
{/* Orbiting Ring Drop Shadow Filter */}
|
|
<filter id="ring_d_filter" x="396.225" y="188.201" width="477.937" height="455.275" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
<feOffset dy="-2"/>
|
|
<feGaussianBlur stdDeviation="4.95"/>
|
|
<feComposite in2="hardAlpha" operator="out"/>
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.301961 0 0 0 0 0.890196 0 0 0 1 0"/>
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
|
</filter>
|
|
|
|
{/* Liquid Blob Glow Filter - Generous bounds so it never clips during drift */}
|
|
<filter id="blob_blur_filter" x="350" y="110" width="800" height="800" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
|
<feGaussianBlur stdDeviation="65" />
|
|
</filter>
|
|
|
|
{/* Star Spotlight Blur Filter - Generous bounds so it never clips during orbit */}
|
|
<filter id="spotlight_filter" x="450" y="230" width="380" height="380" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
|
<feGaussianBlur stdDeviation="50" />
|
|
</filter>
|
|
|
|
{/* Energy Waves Shared Blur Filter - Generous bounds so it never clips during breathing */}
|
|
<filter id="waves_glow_filter" x="75" y="250" width="1190" height="1080" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
|
<feGaussianBlur stdDeviation="60" />
|
|
</filter>
|
|
|
|
{/* Sphere ClipPath: Hardware Stencil/Scissor Buffer (Fast!) */}
|
|
<clipPath id="sphereClipPath">
|
|
<circle cx="637.492" cy="421.5" r="218.5"/>
|
|
</clipPath>
|
|
|
|
{/* Star Alpha Mask */}
|
|
<mask id="star_alpha_mask" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="530" y="314" width="214" height="214">
|
|
<path d="M636.929 314.216C650.189 380.791 676.69 407.551 743.652 420.938C676.674 434.325 650.173 461.085 636.929 527.661C623.67 461.085 597.169 434.309 530.207 420.938C597.184 407.551 623.686 380.791 636.929 314.216Z" fill="white"/>
|
|
</mask>
|
|
|
|
{/* Linear Gradients */}
|
|
<linearGradient id="ring_p4" x1="410.811" y1="383.86" x2="1002.54" y2="479.523" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#D3DDFF"/>
|
|
<stop offset="0.1" stopColor="#0038BF"/>
|
|
<stop offset="0.2" stopColor="#ADBFFF"/>
|
|
<stop offset="0.3" stopColor="#255CD9"/>
|
|
<stop offset="0.4" stopColor="#3D6FE6"/>
|
|
<stop offset="0.5" stopColor="#D4DEFF"/>
|
|
<stop offset="0.65" stopColor="#4B80FF"/>
|
|
<stop offset="0.8" stopColor="#5D8BFF"/>
|
|
<stop offset="1" stopColor="#ADBFFF"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="blob_p5" x1="753.203" y1="296.242" x2="753.203" y2="865.902" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#0029B3"/>
|
|
<stop offset="0.1" stopColor="#0038BF"/>
|
|
<stop offset="0.2" stopColor="#0E4ACC"/>
|
|
<stop offset="0.3" stopColor="#255CD9"/>
|
|
<stop offset="0.4" stopColor="#3D6FE6"/>
|
|
<stop offset="0.5" stopColor="#487EFF"/>
|
|
<stop offset="0.65" stopColor="#4B80FF"/>
|
|
<stop offset="0.8" stopColor="#5D8BFF"/>
|
|
<stop offset="1" stopColor="#ADBFFF"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="contour_p6" x1="634.122" y1="206.37" x2="634.122" y2="759.922" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#0029B3"/>
|
|
<stop offset="0.1" stopColor="#0038BF"/>
|
|
<stop offset="0.2" stopColor="#0E4ACC"/>
|
|
<stop offset="0.3" stopColor="#255CD9"/>
|
|
<stop offset="0.4" stopColor="#3D6FE6"/>
|
|
<stop offset="0.5" stopColor="#487EFF"/>
|
|
<stop offset="0.65" stopColor="#4B80FF"/>
|
|
<stop offset="0.8" stopColor="#5D8BFF"/>
|
|
<stop offset="1" stopColor="#ADBFFF"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="contour_p7" x1="640.864" y1="210.864" x2="640.864" y2="764.416" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#0029B3"/>
|
|
<stop offset="0.1" stopColor="#0038BF"/>
|
|
<stop offset="0.2" stopColor="#0E4ACC"/>
|
|
<stop offset="0.3" stopColor="#255CD9"/>
|
|
<stop offset="0.4" stopColor="#3D6FE6"/>
|
|
<stop offset="0.5" stopColor="#487EFF"/>
|
|
<stop offset="0.65" stopColor="#4B80FF"/>
|
|
<stop offset="0.8" stopColor="#5D8BFF"/>
|
|
<stop offset="1" stopColor="#ADBFFF"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
{/* 1. Orbiting Energy Ring (Smooth 360° Spin on GPU) */}
|
|
<g
|
|
className="animate-orbit-ring"
|
|
style={{ transformOrigin: "637.492px 421.5px" }}
|
|
>
|
|
<g filter="url(#ring_d_filter)" style={{ mixBlendMode: "plus-lighter" }}>
|
|
<path
|
|
d="M409.521 398.102C418.386 343.271 447.011 289.756 488.325 252.374C529.628 215.002 583.571 193.786 643.129 203.414C702.738 213.051 761.779 252.583 803.709 303.489C845.648 354.406 870.311 416.506 861.474 471.168C852.633 525.851 815.522 570.727 765.614 599.536C715.707 628.345 653.088 641.032 593.414 631.384C474.061 612.089 391.822 507.581 409.521 398.102Z"
|
|
stroke="url(#ring_p4)"
|
|
strokeWidth="2"
|
|
shapeRendering="crispEdges"
|
|
/>
|
|
</g>
|
|
</g>
|
|
|
|
{/* 2. Masked Spherical Interior (Clipped cleanly to sphere radius 218.5px) */}
|
|
<g clipPath="url(#sphereClipPath)">
|
|
{/* 2A. Liquid Internal Glow Blob (Smooth Circular Drift) */}
|
|
<g className="animate-blob-drift" style={{ transformOrigin: "637.492px 421.5px" }}>
|
|
<g filter="url(#blob_blur_filter)" style={{ mixBlendMode: "plus-lighter" }}>
|
|
<circle cx="753.203" cy="514.742" r="218.5" fill="url(#blob_p5)"/>
|
|
</g>
|
|
</g>
|
|
|
|
|
|
|
|
{/* Dynamic Internal Particles (Inside the Orb) */}
|
|
<g id="particles-internal">
|
|
<g className="animate-particles-a">
|
|
<path d="M775.676 409.65C775.145 409.698 774.753 410.168 774.801 410.699C774.849 411.23 775.319 411.622 775.85 411.574C776.382 411.526 776.773 411.056 776.725 410.525C776.677 409.993 776.207 409.602 775.676 409.65Z" fill="#9DB2D1"/>
|
|
<path d="M720.653 455.369C720.121 455.418 719.73 455.887 719.778 456.419C719.826 456.95 720.296 457.342 720.827 457.294C721.358 457.245 721.75 456.776 721.702 456.244C721.654 455.713 721.184 455.321 720.653 455.369Z" fill="#9DB2D1"/>
|
|
<path opacity="0.3" d="M649.028 446.344C648.496 446.392 648.105 446.862 648.153 447.393C648.201 447.924 648.671 448.316 649.202 448.268C649.733 448.219 650.125 447.75 650.077 447.218C650.029 446.687 649.559 446.295 649.028 446.344Z" fill="#9DB2D1"/>
|
|
<path d="M611.239 457.532C610.707 457.58 610.316 458.05 610.364 458.581C610.412 459.112 610.882 459.504 611.413 459.456C611.944 459.407 612.336 458.938 612.288 458.406C612.24 457.875 611.77 457.483 611.239 457.532Z" fill="#9DB2D1"/>
|
|
<path opacity="0.5" d="M582.028 477.636C581.496 477.684 581.105 478.154 581.153 478.685C581.201 479.217 581.671 479.608 582.202 479.56C582.733 479.512 583.125 479.042 583.077 478.511C583.029 477.98 582.559 477.588 582.028 477.636Z" fill="#9DB2D1"/>
|
|
<path d="M507.965 441.677C507.434 441.725 507.042 442.195 507.09 442.726C507.138 443.257 507.608 443.649 508.14 443.601C508.671 443.552 509.063 443.083 509.014 442.551C508.966 442.02 508.496 441.628 507.965 441.677Z" fill="#9DB2D1"/>
|
|
<path d="M479.106 465.631C478.574 465.679 478.183 466.149 478.231 466.68C478.279 467.212 478.749 467.603 479.28 467.555C479.811 467.507 480.203 467.037 480.155 466.506C480.107 465.975 479.637 465.583 479.106 465.631Z" fill="#9DB2D1"/>
|
|
<path d="M450.332 447.874C449.801 447.922 449.409 448.392 449.458 448.923C449.506 449.454 449.975 449.846 450.507 449.798C451.038 449.75 451.43 449.28 451.382 448.749C451.333 448.217 450.864 447.826 450.332 447.874Z" fill="#9DB2D1"/>
|
|
<path d="M840.239 404.535C839.707 404.583 839.316 405.052 839.364 405.584C839.412 406.115 839.882 406.507 840.413 406.459C840.944 406.41 841.336 405.941 841.288 405.409C841.24 404.878 840.77 404.486 840.239 404.535Z" fill="#9DB2D1"/>
|
|
<path d="M807.176 490.225C806.645 490.273 806.253 490.743 806.301 491.274C806.349 491.805 806.819 492.197 807.35 492.149C807.882 492.101 808.273 491.631 808.225 491.1C808.177 490.568 807.707 490.177 807.176 490.225Z" fill="#9DB2D1"/>
|
|
<path d="M813.518 312.572C812.985 312.572 812.552 313.004 812.552 313.538C812.552 314.071 812.985 314.504 813.518 314.504C814.052 314.504 814.484 314.071 814.484 313.538C814.484 313.004 814.052 312.572 813.518 312.572Z" fill="#9DB2D1"/>
|
|
<path d="M743.003 297.117C742.469 297.117 742.037 297.549 742.037 298.083C742.037 298.616 742.469 299.049 743.003 299.049C743.536 299.049 743.969 298.616 743.969 298.083C743.969 297.549 743.536 297.117 743.003 297.117Z" fill="#9DB2D1"/>
|
|
<path d="M704.37 304.848C703.836 304.848 703.404 305.28 703.404 305.814C703.404 306.347 703.836 306.78 704.37 306.78C704.903 306.78 705.336 306.347 705.336 305.814C705.336 305.28 704.903 304.848 704.37 304.848Z" fill="#9DB2D1"/>
|
|
<path d="M625.182 349.282C624.649 349.282 624.217 349.714 624.217 350.248C624.217 350.781 624.649 351.214 625.182 351.214C625.716 351.214 626.148 350.781 626.148 350.248C626.148 349.714 625.716 349.282 625.182 349.282Z" fill="#9DB2D1"/>
|
|
<path opacity="0.3" d="M574.948 293.253C574.415 293.253 573.982 293.686 573.982 294.219C573.982 294.753 574.415 295.185 574.948 295.185C575.482 295.185 575.914 294.753 575.914 294.219C575.914 293.686 575.482 293.253 574.948 293.253Z" fill="#9DB2D1"/>
|
|
<path d="M538.245 287.459C537.711 287.459 537.279 287.892 537.279 288.425C537.279 288.959 537.711 289.391 538.245 289.391C538.778 289.391 539.211 288.959 539.211 288.425C539.211 287.892 538.778 287.459 538.245 287.459Z" fill="#9DB2D1"/>
|
|
<path d="M465.182 396.97C464.649 396.97 464.217 397.403 464.217 397.936C464.217 398.47 464.649 398.902 465.182 398.902C465.716 398.902 466.148 398.47 466.148 397.936C466.148 397.403 465.716 396.97 465.182 396.97Z" fill="#9DB2D1"/>
|
|
</g>
|
|
<g className="animate-particles-b">
|
|
<path d="M745.121 490.012C744.59 490.06 744.198 490.529 744.247 491.061C744.295 491.592 744.764 491.984 745.296 491.936C745.827 491.887 746.219 491.418 746.171 490.886C746.122 490.355 745.653 489.963 745.121 490.012Z" fill="#9DB2D1"/>
|
|
<path d="M710.075 434.993C709.543 435.041 709.152 435.51 709.2 436.042C709.248 436.573 709.718 436.965 710.249 436.917C710.78 436.868 711.172 436.399 711.124 435.867C711.076 435.336 710.606 434.944 710.075 434.993Z" fill="#9DB2D1"/>
|
|
<path opacity="0.3" d="M636.348 434.889C635.817 434.937 635.425 435.406 635.473 435.938C635.521 436.469 635.991 436.861 636.522 436.813C637.054 436.764 637.445 436.295 637.397 435.763C637.349 435.232 636.879 434.84 636.348 434.889Z" fill="#9DB2D1"/>
|
|
<path d="M588.051 533.346C587.52 533.394 587.128 533.864 587.176 534.395C587.224 534.927 587.694 535.318 588.225 535.27C588.757 535.222 589.148 534.752 589.1 534.221C589.052 533.69 588.582 533.298 588.051 533.346Z" fill="#9DB2D1"/>
|
|
<path d="M536.371 508.936C535.84 508.985 535.448 509.454 535.497 509.986C535.545 510.517 536.014 510.909 536.546 510.86C537.077 510.812 537.469 510.342 537.421 509.811C537.372 509.28 536.903 508.888 536.371 508.936Z" fill="#9DB2D1"/>
|
|
<path d="M511.457 480.158C510.926 480.206 510.534 480.676 510.583 481.207C510.631 481.739 511.1 482.13 511.632 482.082C512.163 482.034 512.555 481.564 512.507 481.033C512.458 480.502 511.989 480.11 511.457 480.158Z" fill="#9DB2D1"/>
|
|
<path opacity="0.5" d="M454.825 347.558C454.293 347.607 453.902 348.076 453.95 348.608C453.998 349.139 454.468 349.531 454.999 349.482C455.53 349.434 455.922 348.965 455.874 348.433C455.826 347.902 455.356 347.51 454.825 347.558Z" fill="#9DB2D1"/>
|
|
<path d="M817.59 476.675C817.059 476.723 816.667 477.193 816.715 477.724C816.763 478.256 817.233 478.647 817.765 478.599C818.296 478.551 818.688 478.081 818.639 477.55C818.591 477.019 818.121 476.627 817.59 476.675Z" fill="#9DB2D1"/>
|
|
<path d="M789.37 360.874C788.836 360.874 788.404 361.306 788.404 361.84C788.404 362.373 788.836 362.806 789.37 362.806C789.903 362.806 790.336 362.373 790.336 361.84C790.336 361.306 789.903 360.874 789.37 360.874Z" fill="#9DB2D1"/>
|
|
<path opacity="0.5" d="M717.893 300.982C717.36 300.982 716.927 301.414 716.927 301.948C716.927 302.481 717.36 302.914 717.893 302.914C718.427 302.914 718.859 302.481 718.859 301.948C718.859 301.414 718.427 300.982 717.893 300.982Z" fill="#9DB2D1"/>
|
|
<path d="M674.448 378.258C673.915 378.258 673.482 378.69 673.482 379.223C673.482 379.757 673.915 380.189 674.448 380.189C674.982 380.189 675.414 379.757 675.414 379.223C675.414 378.69 674.982 378.258 674.448 378.258Z" fill="#9DB2D1"/>
|
|
<path opacity="0.3" d="M450.956 434.109C450.422 434.109 449.99 434.542 449.99 435.075C449.99 435.609 450.422 436.041 450.956 436.041C451.489 436.041 451.922 435.609 451.922 435.075C451.922 434.542 451.489 434.109 450.956 434.109Z" fill="#9DB2D1"/>
|
|
<path d="M529.55 304.844C529.016 304.844 528.584 305.276 528.584 305.81C528.584 306.343 529.016 306.776 529.55 306.776C530.083 306.776 530.516 306.343 530.516 305.81C530.516 305.276 530.083 304.844 529.55 304.844Z" fill="#9DB2D1"/>
|
|
<path d="M456.495 347.184C455.961 347.184 455.529 347.617 455.529 348.15C455.529 348.684 455.961 349.116 456.495 349.116C457.028 349.116 457.461 348.684 457.461 348.15C457.461 347.617 457.028 347.184 456.495 347.184Z" fill="#9DB2D1"/>
|
|
</g>
|
|
<g className="animate-particles-c">
|
|
<path d="M727.926 396.519C727.395 396.568 727.003 397.037 727.051 397.569C727.099 398.1 727.569 398.492 728.1 398.443C728.632 398.395 729.023 397.925 728.975 397.394C728.927 396.863 728.457 396.471 727.926 396.519Z" fill="#9DB2D1"/>
|
|
<path d="M676.035 476.876C675.504 476.924 675.112 477.394 675.161 477.925C675.209 478.456 675.679 478.848 676.21 478.8C676.741 478.752 677.133 478.282 677.085 477.751C677.037 477.219 676.567 476.828 676.035 476.876Z" fill="#9DB2D1"/>
|
|
<path d="M624.364 452.463C623.832 452.511 623.441 452.981 623.489 453.512C623.537 454.043 624.007 454.435 624.538 454.387C625.069 454.339 625.461 453.869 625.413 453.338C625.365 452.806 624.895 452.415 624.364 452.463Z" fill="#9DB2D1"/>
|
|
<path opacity="0.5" d="M578.543 439.16C578.012 439.209 577.62 439.678 577.668 440.21C577.717 440.741 578.186 441.133 578.718 441.085C579.249 441.036 579.641 440.567 579.592 440.035C579.544 439.504 579.075 439.112 578.543 439.16Z" fill="#9DB2D1"/>
|
|
<path d="M493.895 404.154C493.364 404.202 492.972 404.672 493.02 405.203C493.068 405.735 493.538 406.126 494.069 406.078C494.601 406.03 494.992 405.56 494.944 405.029C494.896 404.498 494.426 404.106 493.895 404.154Z" fill="#9DB2D1"/>
|
|
<path opacity="0.3" d="M491.77 530.439C491.239 530.487 490.847 530.957 490.895 531.488C490.943 532.02 491.413 532.411 491.944 532.363C492.476 532.315 492.867 531.845 492.819 531.314C492.771 530.783 492.301 530.391 491.77 530.439Z" fill="#9DB2D1"/>
|
|
<path d="M467.293 495.8C466.762 495.849 466.37 496.318 466.418 496.85C466.467 497.381 466.936 497.773 467.468 497.724C467.999 497.676 468.391 497.206 468.342 496.675C468.294 496.144 467.825 495.752 467.293 495.8Z" fill="#9DB2D1"/>
|
|
<path opacity="0.3" d="M834.776 349.28C834.243 349.28 833.81 349.712 833.81 350.246C833.81 350.779 834.243 351.212 834.776 351.212C835.31 351.212 835.742 350.779 835.742 350.246C835.742 349.712 835.31 349.28 834.776 349.28Z" fill="#9DB2D1"/>
|
|
<path d="M767.159 329.964C766.626 329.964 766.193 330.397 766.193 330.93C766.193 331.464 766.626 331.896 767.159 331.896C767.693 331.896 768.125 331.464 768.125 330.93C768.125 330.397 767.693 329.964 767.159 329.964Z" fill="#9DB2D1"/>
|
|
<path opacity="0.5" d="M673.479 322.231C672.946 322.231 672.513 322.664 672.513 323.197C672.513 323.731 672.946 324.163 673.479 324.163C674.013 324.163 674.445 323.731 674.445 323.197C674.445 322.664 674.013 322.231 673.479 322.231Z" fill="#9DB2D1"/>
|
|
<path d="M578.815 366.67C578.282 366.67 577.849 367.102 577.849 367.636C577.849 368.169 578.282 368.602 578.815 368.602C579.349 368.602 579.781 368.169 579.781 367.636C579.781 367.102 579.349 366.67 578.815 366.67Z" fill="#9DB2D1"/>
|
|
<path opacity="0.5" d="M557.557 329.966C557.024 329.966 556.592 330.398 556.592 330.932C556.592 331.465 557.024 331.897 557.557 331.897C558.091 331.897 558.523 331.465 558.523 330.932C558.523 330.398 558.091 329.966 557.557 329.966Z" fill="#9DB2D1"/>
|
|
<path d="M510.237 359.906C509.704 359.906 509.271 360.339 509.271 360.872C509.271 361.406 509.704 361.838 510.237 361.838C510.771 361.838 511.203 361.406 511.203 360.872C511.203 360.339 510.771 359.906 510.237 359.906Z" fill="#9DB2D1"/>
|
|
</g>
|
|
</g>
|
|
|
|
{/* 2B. Central 4-Pointed Star Body */}
|
|
<path
|
|
d="M636.929 314.216C650.189 380.791 676.69 407.551 743.652 420.938C676.674 434.325 650.173 461.085 636.929 527.661C623.67 461.085 597.169 434.309 530.207 420.938C597.184 407.551 623.686 380.791 636.929 314.216Z"
|
|
fill="white"
|
|
/>
|
|
|
|
{/* 2C. Refracting Spotlight inside the Star (Smooth Radial Shimmer) */}
|
|
<g className="animate-star-glow" style={{ transformOrigin: "636.929px 420.938px" }}>
|
|
<g mask="url(#star_alpha_mask)">
|
|
<g className="animate-star-spotlight">
|
|
<g filter="url(#spotlight_filter)">
|
|
<circle cx="670" cy="440" r="75" fill="#0066FF"/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
|
|
{/* 2D. Radiating Flare Energy Waves (Smooth Vertical Breathing) */}
|
|
<g className="animate-energy-waves" style={{ transformOrigin: "671.757px 545.636px" }}>
|
|
<g filter="url(#waves_glow_filter)" style={{ mixBlendMode: "screen" }}>
|
|
<path d="M275.199 1129.8L1068.31 1129.8V455.766C1068.31 455.766 923.117 545.635 671.757 545.636C420.397 545.638 275.199 455.763 275.199 455.763V1129.8Z" fill="#0029B2"/>
|
|
<path d="M275.199 1073.63L1068.31 1073.63V511.936C1068.31 511.936 921.465 601.806 671.757 601.806C422.05 601.806 275.199 511.933 275.199 511.933V1073.63Z" fill="#3D6FE5"/>
|
|
<path d="M275.199 1017.46L1068.31 1017.46V568.105C1068.31 568.105 921.465 657.975 671.757 657.975C422.05 657.975 275.199 568.103 275.199 568.103V1017.46Z" fill="#4B80FF"/>
|
|
<path d="M275.199 961.289L1068.31 961.29V624.274C1068.31 624.274 920.845 714.145 671.757 714.145C422.669 714.145 275.199 624.272 275.199 624.272V961.289Z" fill="#2D4D99" style={{ mixBlendMode: "plus-lighter" }}/>
|
|
<path d="M275.199 905.12L1068.31 905.121V680.443C1068.31 680.443 921.465 770.314 671.757 770.314C422.05 770.314 275.199 680.442 275.199 680.442V905.12Z" fill="white"/>
|
|
</g>
|
|
</g>
|
|
|
|
{/* 2E. Twin Contour Rings (Crisp Vector 360° Spin) */}
|
|
<g
|
|
className="animate-contour-rings"
|
|
style={{ transformOrigin: "637.492px 421.5px" }}
|
|
>
|
|
<g opacity="0.5" style={{ mixBlendMode: "screen" }}>
|
|
<path d="M634.122 207.12C692.119 207.12 745.705 221.614 784.78 255.26C823.836 288.889 848.502 341.743 848.502 418.691C848.502 495.632 822.976 548.487 783.484 582.12C743.972 615.771 690.384 630.263 634.122 630.263C521.756 630.263 419.742 535.398 419.742 418.691C419.742 301.978 518.302 207.12 634.122 207.12Z" stroke="url(#contour_p6)" strokeWidth="1.5"/>
|
|
</g>
|
|
<g opacity="0.5" style={{ mixBlendMode: "screen" }}>
|
|
<path d="M640.864 211.614C698.861 211.614 752.447 226.107 791.522 259.753C830.578 293.383 855.244 346.236 855.244 423.185C855.244 500.126 829.718 552.981 790.227 586.614C750.715 620.265 697.126 634.756 640.864 634.756C528.498 634.756 426.484 539.891 426.484 423.185C426.484 306.471 525.044 211.614 640.864 211.614Z" stroke="url(#contour_p7)" strokeWidth="1.5"/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|