<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="achievementGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#0af1f5;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#08c0c4;stop-opacity:1" />
    </linearGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
      <feMerge> 
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  
  <!-- Achievement medal icon -->
  <g filter="url(#glow)">
    <!-- Medal ribbons -->
    <g fill="url(#achievementGradient)" opacity="0.7">
      <polygon points="22,5 26,5 28,25 20,25"/>
      <polygon points="38,5 42,5 44,25 36,25"/>
    </g>
    
    <!-- Medal circle -->
    <circle cx="32" cy="35" r="15" fill="none" stroke="url(#achievementGradient)" stroke-width="3"/>
    <circle cx="32" cy="35" r="12" fill="url(#achievementGradient)" opacity="0.2"/>
    
    <!-- Inner achievement symbol -->
    <g fill="url(#achievementGradient)">
      <!-- Large star in center -->
      <polygon points="32,25 35,32 42,32 37,36 39,43 32,39 25,43 27,36 22,32 29,32" 
               fill="url(#achievementGradient)"/>
      
      <!-- Achievement number "1" -->
      <text x="32" y="40" text-anchor="middle" font-family="Arial, sans-serif" 
            font-size="12" font-weight="bold" fill="#0a0a0a">1</text>
    </g>
    
    <!-- Achievement level indicators -->
    <g fill="none" stroke="url(#achievementGradient)" stroke-width="1" opacity="0.6">
      <!-- Outer rings showing levels -->
      <circle cx="32" cy="35" r="18"/>
      <circle cx="32" cy="35" r="20"/>
    </g>
    
    <!-- Success indicators around medal -->
    <g fill="url(#achievementGradient)" opacity="0.7">
      <!-- Checkmarks -->
      <path d="M10,15 L14,19 L22,11" fill="none" stroke="url(#achievementGradient)" stroke-width="2"/>
      <path d="M50,15 L54,19 L62,11" fill="none" stroke="url(#achievementGradient)" stroke-width="2"/>
      
      <!-- Achievement badges -->
      <circle cx="12" cy="40" r="3" fill="url(#achievementGradient)" opacity="0.5"/>
      <text x="12" y="42" text-anchor="middle" font-family="Arial, sans-serif" 
            font-size="4" fill="#0a0a0a">✓</text>
      
      <circle cx="52" cy="40" r="3" fill="url(#achievementGradient)" opacity="0.5"/>
      <text x="52" y="42" text-anchor="middle" font-family="Arial, sans-serif" 
            font-size="4" fill="#0a0a0a">✓</text>
    </g>
    
    <!-- Progress indicators -->
    <g fill="url(#achievementGradient)" opacity="0.4">
      <!-- Progress bars -->
      <rect x="8" y="55" width="20" height="3" rx="1.5" fill="url(#achievementGradient)" opacity="0.3"/>
      <rect x="8" y="55" width="16" height="3" rx="1.5" fill="url(#achievementGradient)"/>
      
      <rect x="36" y="55" width="20" height="3" rx="1.5" fill="url(#achievementGradient)" opacity="0.3"/>
      <rect x="36" y="55" width="18" height="3" rx="1.5" fill="url(#achievementGradient)"/>
    </g>
  </g>
  
  <!-- Celebration sparkles -->
  <g fill="url(#achievementGradient)" opacity="0.8">
    <circle cx="15" cy="25" r="1">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="1.5s" repeatCount="indefinite"/>
      <animate attributeName="r" values="0.5;1.5;0.5" dur="1.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="49" cy="25" r="1">
      <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="r" values="1;2;1" dur="2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="20" cy="50" r="0.5">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="2.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="44" cy="50" r="0.5">
      <animate attributeName="opacity" values="1;0.2;1" dur="1.8s" repeatCount="indefinite"/>
    </circle>
  </g>
</svg>
