<!-- Background circle --> <circle cx="100" cy="100" r="80" fill="#1a1a2e" stroke="url(#goldGradient)" stroke-width="3"/> <!-- Center glow --> <circle cx="100" cy="100" r="78" fill="url(#centerGlow)"/>
/* SVG Badge */ .kubestronaut-badge { width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3)); }
<!-- Kubestronaut text --> <text x="100" y="145" text-anchor="middle" fill="url(#goldGradient)" font-size="8" font-weight="bold" font-family="monospace" letter-spacing="1"> KUBESTRONAUT </text>
<!-- Astronaut helmet (center) --> <circle cx="100" cy="100" r="32" fill="#2a2a3e" stroke="url(#goldGradient)" stroke-width="2.5"/> <circle cx="100" cy="100" r="28" fill="#1e1e2e" stroke="#DAA520" stroke-width="1"/> <!-- Visor --> <ellipse cx="100" cy="95" rx="18" ry="14" fill="#0a0a1e" stroke="url(#goldGradient)" stroke-width="1.5"/> <ellipse cx="100" cy="95" rx="15" ry="11" fill="url(#centerGlow)"/> <!-- Visor reflection --> <ellipse cx="94" cy="91" rx="4" ry="3" fill="rgba(255,255,255,0.3)"/>
<!-- Outer ring --> <circle cx="100" cy="100" r="92" fill="none" stroke="url(#goldGradient)" stroke-width="6" filter="url(#glow)"/> <circle cx="100" cy="100" r="84" fill="none" stroke="url(#darkGold)" stroke-width="2"/> <!-- Decorative dots on outer ring --> <g fill="#FFD700"> <circle cx="100" cy="12" r="2.5"/> <circle cx="100" cy="188" r="2.5"/> <circle cx="12" cy="100" r="2.5"/> <circle cx="188" cy="100" r="2.5"/> <circle cx="38" cy="38" r="2"/> <circle cx="162" cy="38" r="2"/> <circle cx="38" cy="162" r="2"/> <circle cx="162" cy="162" r="2"/> </g>
body { min-height: 100vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }