<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844">
  <defs>
    <linearGradient id="gBar" x1="0" y1="1" x2="0" y2="0"><stop offset="0%" stop-color="#7C3AED"/><stop offset="100%" stop-color="#00C8FF"/></linearGradient>
    <linearGradient id="gRing" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#00C8FF"/><stop offset="100%" stop-color="#7C3AED"/></linearGradient>
    <filter id="fs"><feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.45"/></filter>
  </defs>
  <rect width="390" height="844" fill="#00060A"/>
  <!-- Status bar -->
  <text x="22" y="29" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="600" dominant-baseline="middle">9:41</text>
  <rect x="308" y="22" width="3" height="7" rx="1.2" fill="white"/><rect x="313" y="20" width="3" height="9" rx="1.2" fill="white"/><rect x="318" y="18" width="3" height="11" rx="1.2" fill="white"/><rect x="323" y="16" width="3" height="13" rx="1.2" fill="white"/>
  <rect x="350" y="19" width="22" height="11" rx="3" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.2"/><rect x="373" y="22" width="2" height="5" rx="1" fill="rgba(255,255,255,0.4)"/><rect x="352" y="21" width="16" height="7" rx="1.5" fill="#00C8FF"/>
  <!-- Header -->
  <text x="22" y="62" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="26" font-weight="800" letter-spacing="-0.5">My Progress</text>
  <!-- Period selector -->
  <rect x="246" y="48" width="128" height="28" rx="14" fill="#061220"/>
  <rect x="248" y="50" width="60" height="24" rx="12" fill="#00C8FF"/>
  <text x="278" y="65" fill="#00060A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" font-weight="700" text-anchor="middle" dominant-baseline="middle">Week</text>
  <text x="342" y="65" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" text-anchor="middle" dominant-baseline="middle">Month</text>
  <!-- Ring + hours -->
  <circle cx="100" cy="158" r="56" fill="none" stroke="#061220" stroke-width="12"/>
  <circle cx="100" cy="158" r="56" fill="none" stroke="url(#gRing)" stroke-width="12" stroke-dasharray="281 352" stroke-dashoffset="88" stroke-linecap="round"/>
  <text x="100" y="152" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="24" font-weight="800" text-anchor="middle">5.2h</text>
  <text x="100" y="170" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" text-anchor="middle">this week</text>
  <!-- Stats right -->
  <rect x="182" y="100" width="192" height="48" rx="14" fill="#061220"/>
  <text x="200" y="118" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" font-weight="700">LESSONS</text>
  <text x="200" y="138" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="22" font-weight="800">18</text>
  <text x="290" y="118" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" font-weight="700">QUIZZES</text>
  <text x="290" y="138" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="22" font-weight="800">7</text>
  <rect x="182" y="158" width="192" height="48" rx="14" fill="#061220"/>
  <text x="200" y="176" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" font-weight="700">ACCURACY</text>
  <text x="200" y="196" fill="#00D181" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="22" font-weight="800">84%</text>
  <text x="290" y="176" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" font-weight="700">STREAK</text>
  <text x="290" y="196" fill="#FFD60A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="22" font-weight="800">34</text>
  <!-- Bar chart: daily minutes -->
  <text x="22" y="238" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="700">Daily Study (minutes)</text>
  <rect x="16" y="250" width="358" height="140" rx="18" fill="#061220" filter="url(#fs)"/>
  <!-- Bars for Mon-Sun -->
  <rect x="36" y="310" width="32" height="54" rx="6" fill="url(#gBar)"/>
  <text x="52" y="376" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Mon</text>
  <rect x="84" y="330" width="32" height="34" rx="6" fill="url(#gBar)" fill-opacity="0.6"/>
  <text x="100" y="376" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Tue</text>
  <rect x="132" y="298" width="32" height="66" rx="6" fill="url(#gBar)"/>
  <text x="148" y="376" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Wed</text>
  <rect x="180" y="338" width="32" height="26" rx="6" fill="url(#gBar)" fill-opacity="0.4"/>
  <text x="196" y="376" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Thu</text>
  <rect x="228" y="270" width="32" height="94" rx="6" fill="url(#gBar)"/>
  <text x="244" y="376" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Fri</text>
  <rect x="276" y="350" width="32" height="14" rx="6" fill="url(#gBar)" fill-opacity="0.3"/>
  <text x="292" y="376" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Sat</text>
  <rect x="324" y="356" width="32" height="8" rx="6" fill="#0A1A2A"/>
  <text x="340" y="376" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Sun</text>
  <!-- Skill progress -->
  <text x="22" y="418" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="700">Skill Breakdown</text>
  <rect x="16" y="430" width="358" height="138" rx="18" fill="#061220" filter="url(#fs)"/>
  <text x="30" y="454" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">UX Research</text>
  <rect x="30" y="460" width="258" height="6" rx="3" fill="#0A1A2A"/><rect x="30" y="460" width="210" height="6" rx="3" fill="#00C8FF"/>
  <text x="298" y="465" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" dominant-baseline="middle">81%</text>
  <text x="30" y="488" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">Prototyping</text>
  <rect x="30" y="494" width="258" height="6" rx="3" fill="#0A1A2A"/><rect x="30" y="494" width="150" height="6" rx="3" fill="#7C3AED"/>
  <text x="298" y="499" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" dominant-baseline="middle">58%</text>
  <text x="30" y="522" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">Visual Design</text>
  <rect x="30" y="528" width="258" height="6" rx="3" fill="#0A1A2A"/><rect x="30" y="528" width="174" height="6" rx="3" fill="#00D181"/>
  <text x="298" y="533" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" dominant-baseline="middle">67%</text>
  <text x="30" y="556" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">Interaction Design</text>
  <rect x="30" y="562" width="258" height="6" rx="3" fill="#0A1A2A"/><rect x="30" y="562" width="90" height="6" rx="3" fill="#FF9F0A"/>
  <text x="298" y="567" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" dominant-baseline="middle">35%</text>
  <!-- Certificates -->
  <text x="22" y="598" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="700">Certificates Earned</text>
  <rect x="16" y="610" width="170" height="60" rx="16" fill="#061220" filter="url(#fs)"/>
  <text x="30" y="634" fill="#FFD60A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="20">&#x1F3C5;</text>
  <text x="62" y="632" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" font-weight="600">UX Basics</text>
  <text x="62" y="648" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">Feb 2026</text>
  <rect x="204" y="610" width="170" height="60" rx="16" fill="#061220" filter="url(#fs)"/>
  <text x="218" y="634" fill="#FFD60A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="20">&#x1F3C5;</text>
  <text x="250" y="632" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" font-weight="600">Python Intro</text>
  <text x="250" y="648" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">Jan 2026</text>
  <!-- Tab bar: Progress active -->
  <rect x="0" y="762" width="390" height="82" fill="#000408"/>
  <line x1="0" y1="762" x2="390" y2="762" stroke="#0A1A2A" stroke-width="0.5"/>
  <path d="M42 800 L51 790 L60 800 L60 810 L42 810 Z" fill="none" stroke="#2A4A5A" stroke-width="2" stroke-linejoin="round"/>
  <rect x="46" y="802" width="10" height="8" rx="1" fill="#2A4A5A"/>
  <text x="51" y="822" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Home</text>
  <rect x="119" y="785" width="14" height="18" rx="2" fill="none" stroke="#2A4A5A" stroke-width="2"/>
  <path d="M119 792 L133 792" stroke="#2A4A5A" stroke-width="1.5" stroke-linecap="round"/>
  <path d="M119 798 L133 798" stroke="#2A4A5A" stroke-width="1.5" stroke-linecap="round"/>
  <text x="126" y="822" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Learn</text>
  <circle cx="195" cy="793" r="10" fill="none" stroke="#2A4A5A" stroke-width="2"/>
  <path d="M190 793 L194 797 L201 788" fill="none" stroke="#2A4A5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <text x="195" y="822" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Practice</text>
  <rect x="254" y="800" width="5" height="8" rx="1.5" fill="#00C8FF"/>
  <rect x="261" y="794" width="5" height="14" rx="1.5" fill="#00C8FF"/>
  <rect x="268" y="789" width="5" height="19" rx="1.5" fill="#00C8FF"/>
  <text x="263" y="822" fill="#00C8FF" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" font-weight="600" text-anchor="middle">Progress</text>
  <circle cx="341" cy="791" r="8" fill="none" stroke="#2A4A5A" stroke-width="2"/><circle cx="341" cy="788" r="3" fill="#2A4A5A"/>
  <path d="M333 799 Q341 795 349 799" fill="none" stroke="#2A4A5A" stroke-width="2" stroke-linecap="round"/>
  <text x="341" y="822" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Profile</text>
  <rect x="148" y="836" width="94" height="4" rx="2" fill="rgba(255,255,255,0.22)"/>
</svg>
