Kubestronaut Golden ((top)) ✰

/* Tooltip */ .tooltip { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.9); color: gold; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: bold; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; border: 1px solid gold; font-family: monospace; }

.star { color: gold; font-size: 20px; } </style> </head> <body> <div style="text-align: center;"> <div class="badge-container"> <svg class="kubestronaut-badge" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <defs>  <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" /> <stop offset="50%" style="stop-color:#FFA500;stop-opacity:1" /> <stop offset="100%" style="stop-color:#FFD700;stop-opacity:1" /> </linearGradient> <linearGradient id="darkGold" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#B8860B;stop-opacity:1" /> <stop offset="100%" style="stop-color:#DAA520;stop-opacity:1" /> </linearGradient>

<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"/>  <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> kubestronaut golden

<path d="M 85 112 Q 100 118 115 112" fill="none" stroke="url(#goldGradient)" stroke-width="1.5"/>

<g fill="none" stroke="#DAA520" stroke-width="1.5"> <path d="M 140 85 Q 145 80 142 75"/> <path d="M 142 88 Q 148 83 145 78"/> <path d="M 144 91 Q 150 86 148 81"/> </g> /* Tooltip */

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; }

<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"/>  <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)"/>  <ellipse cx="94" cy="91" rx="4" ry="3" fill="rgba(255,255,255,0.3)"/> padding: 8px 16px

/* Rotating ring animation */ @keyframes rotateRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }