josedario87
47f5524416
- Add Nucleo atom logo with animated orbiting electrons - Redesign FAB with glassmorphism effect and purple gradient - Add connection indicator (green dot) when terminal is open - Update FloatingTerminal header with Nucleo branding - Add PermissionRequest hook support with red alert animation - Document Nucleo in README with visual states table - Create official Nucleo logo SVG in docs/
62 lines
3.1 KiB
XML
62 lines
3.1 KiB
XML
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<radialGradient id="coreGradient" cx="50%" cy="30%" r="60%">
|
|
<stop offset="0%" stop-color="#c4b5fd"/>
|
|
<stop offset="50%" stop-color="#a78bfa"/>
|
|
<stop offset="100%" stop-color="#6366f1"/>
|
|
</radialGradient>
|
|
<linearGradient id="orbitGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#818cf8" stop-opacity="0.9"/>
|
|
<stop offset="50%" stop-color="#a78bfa" stop-opacity="0.5"/>
|
|
<stop offset="100%" stop-color="#818cf8" stop-opacity="0.9"/>
|
|
</linearGradient>
|
|
<linearGradient id="electronGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#e0e7ff"/>
|
|
<stop offset="100%" stop-color="#a78bfa"/>
|
|
</linearGradient>
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="coreGlow" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur stdDeviation="6" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background circle (subtle) -->
|
|
<circle cx="60" cy="60" r="55" fill="none" stroke="#4f46e5" stroke-width="1" opacity="0.2"/>
|
|
|
|
<!-- Orbital rings -->
|
|
<ellipse cx="60" cy="60" rx="45" ry="18" stroke="url(#orbitGradient1)" stroke-width="2" fill="none" transform="rotate(-30 60 60)" opacity="0.7"/>
|
|
<ellipse cx="60" cy="60" rx="45" ry="18" stroke="url(#orbitGradient1)" stroke-width="2" fill="none" transform="rotate(30 60 60)" opacity="0.5"/>
|
|
<ellipse cx="60" cy="60" rx="45" ry="18" stroke="url(#orbitGradient1)" stroke-width="2" fill="none" transform="rotate(90 60 60)" opacity="0.6"/>
|
|
|
|
<!-- Core nucleus with glow -->
|
|
<circle cx="60" cy="60" r="18" fill="url(#coreGradient)" filter="url(#coreGlow)"/>
|
|
<circle cx="60" cy="60" r="14" fill="url(#coreGradient)" opacity="0.8"/>
|
|
<circle cx="55" cy="55" r="5" fill="white" opacity="0.4"/>
|
|
|
|
<!-- Electrons with glow -->
|
|
<circle cx="60" cy="15" r="7" fill="url(#electronGradient)" filter="url(#glow)">
|
|
<animateTransform attributeName="transform" type="rotate" from="0 60 60" to="360 60 60" dur="4s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="100" cy="70" r="6" fill="url(#electronGradient)" filter="url(#glow)">
|
|
<animateTransform attributeName="transform" type="rotate" from="120 60 60" to="480 60 60" dur="5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="20" cy="70" r="6" fill="url(#electronGradient)" filter="url(#glow)">
|
|
<animateTransform attributeName="transform" type="rotate" from="240 60 60" to="600 60 60" dur="4.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- Small accent electrons -->
|
|
<circle cx="60" cy="105" r="4" fill="#c4b5fd" opacity="0.6">
|
|
<animateTransform attributeName="transform" type="rotate" from="180 60 60" to="540 60 60" dur="6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
</svg>
|