<!-- Filter for glow --> <filter id="glow"> <feGaussianBlur stdDeviation="2" result="coloredBlur"/> <feMerge> <feMergeNode in="coloredBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs>
/* Main Badge Container */ .badge-container { position: relative; width: 320px; height: 320px; cursor: pointer; transition: transform 0.3s ease, filter 0.3s ease; }
<!-- 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)"/> kubestronaut golden
.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> <!-- Gradients --> <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>
/* Achievement text */ .achievement-text { text-align: center; margin-top: 80px; color: white; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; font-weight: 300; } !-- Filter for glow -->
<radialGradient id="centerGlow" cx="50%" cy="50%" r="50%"> <stop offset="0%" style="stop-color:#FFD700;stop-opacity:0.3" /> <stop offset="100%" style="stop-color:#FFA500;stop-opacity:0" /> </radialGradient>
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; } feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<!-- 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>