Skateboarding astronaut catOne-line

Gemini 4 Hydrogen

by Googlereasoning defaultClean

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 1 min 31 s
Cost: $0.110
Output tokens: 14,654
Spent thinking: 2,413 tokens
Speed: 164.2 tok/s
Console errors: 0

First token after: 1.5 s
First visible text after: 15.2 s
Prompt tokens: 392
Code size: 26.4 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-4-hydrogen
Reasoning sent: model default
Max output: 40,340 tokens
Generated: Nov 13, 2026

What it was asked

The prompt

“draw me an SVG of an astronaut cat skateboarding on the moon”

System prompt, sent with every prompt

You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.svg · 525 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%" role="img" aria-label="Astronaut cat skateboarding on the moon">
  <title>Astronaut Cat Skateboarding on the Moon</title>
  <defs>
    <style>
      @keyframes floatSkater {
        0%, 100% { transform: translate(540px, 490px) translateY(0px); }
        50% { transform: translate(540px, 490px) translateY(-14px); }
      }
      @keyframes shadowScale {
        0%, 100% { transform: translate(545px, 638px) scale(1, 1); opacity: 0.55; }
        50% { transform: translate(545px, 638px) scale(0.88, 0.88); opacity: 0.38; }
      }
      @keyframes twinkle {
        0%, 100% { opacity: 0.95; transform: scale(1); }
        50% { opacity: 0.3; transform: scale(0.7); }
      }
      @keyframes twinkleSlow {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 1; }
      }
      @keyframes shootStar {
        0% { transform: translate(0px, 0px); opacity: 0; }
        10% { opacity: 1; }
        35% { transform: translate(-260px, 130px); opacity: 0; }
        100% { transform: translate(-260px, 130px); opacity: 0; }
      }
      @keyframes flamePulse {
        0%, 100% { transform: scale(1); opacity: 0.9; }
        50% { transform: scale(1.12, 0.92); opacity: 0.7; }
      }
      .skater-group {
        animation: floatSkater 3.4s ease-in-out infinite;
      }
      .ground-shadow {
        animation: shadowScale 3.4s ease-in-out infinite;
      }
      .star-a { animation: twinkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
      .star-b { animation: twinkle 3.6s ease-in-out 1.1s infinite; transform-box: fill-box; transform-origin: center; }
      .star-c { animation: twinkleSlow 4.2s ease-in-out 0.6s infinite; }
      .shooting-star { animation: shootStar 6.5s ease-out 1s infinite; }
      .puff-pulse { animation: flamePulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: right center; }
    </style>

    <!-- Space Sky Gradient -->
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0.2" y2="1">
      <stop offset="0%" stop-color="#060818"/>
      <stop offset="48%" stop-color="#111638"/>
      <stop offset="100%" stop-color="#232559"/>
    </linearGradient>

    <!-- Nebula Glows -->
    <radialGradient id="nebula1" cx="0.25" cy="0.3" r="0.45">
      <stop offset="0%" stop-color="#7c3aed" stop-opacity="0.28"/>
      <stop offset="55%" stop-color="#2563eb" stop-opacity="0.12"/>
      <stop offset="100%" stop-color="#060818" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="nebula2" cx="0.78" cy="0.32" r="0.4">
      <stop offset="0%" stop-color="#06b6d4" stop-opacity="0.2"/>
      <stop offset="60%" stop-color="#3b82f6" stop-opacity="0.08"/>
      <stop offset="100%" stop-color="#060818" stop-opacity="0"/>
    </radialGradient>

    <!-- Earth Gradients -->
    <radialGradient id="earthGlow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="72%" stop-color="#38bdf8" stop-opacity="0.38"/>
      <stop offset="100%" stop-color="#38bdf8" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="earthOcean" cx="0.35" cy="0.32" r="0.68">
      <stop offset="0%" stop-color="#60a5fa"/>
      <stop offset="45%" stop-color="#2563eb"/>
      <stop offset="85%" stop-color="#1e3a8a"/>
      <stop offset="100%" stop-color="#0f172a"/>
    </radialGradient>
    <clipPath id="earthClip">
      <circle cx="965" cy="185" r="102"/>
    </clipPath>

    <!-- Saturn-like distant planet -->
    <radialGradient id="planetGrad" cx="0.35" cy="0.3" r="0.7">
      <stop offset="0%" stop-color="#fde68a"/>
      <stop offset="55%" stop-color="#f59e0b"/>
      <stop offset="100%" stop-color="#78350f"/>
    </radialGradient>

    <!-- Moon Surface Gradients -->
    <linearGradient id="moonHills" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#8b95b2"/>
      <stop offset="100%" stop-color="#4e5773"/>
    </linearGradient>
    <linearGradient id="moonGround" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#dce2f0"/>
      <stop offset="32%" stop-color="#b6bfd6"/>
      <stop offset="100%" stop-color="#747e9c"/>
    </linearGradient>
    <linearGradient id="craterInner" x1="0.2" y1="0" x2="0.8" y2="1">
      <stop offset="0%" stop-color="#616a87"/>
      <stop offset="65%" stop-color="#9ca6c2"/>
      <stop offset="100%" stop-color="#cfd6e8"/>
    </linearGradient>

    <!-- Suit & Helmet Gradients -->
    <linearGradient id="suitGrad" x1="0.1" y1="0" x2="0.9" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="65%" stop-color="#e2e8f0"/>
      <stop offset="100%" stop-color="#94a3b8"/>
    </linearGradient>
    <linearGradient id="suitShade" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#cbd5e1"/>
      <stop offset="100%" stop-color="#64748b"/>
    </linearGradient>
    <linearGradient id="orangeAccent" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#fb923c"/>
      <stop offset="100%" stop-color="#ea580c"/>
    </linearGradient>
    <linearGradient id="collarGold" x1="0" y1="0" x2="1" y2="0.4">
      <stop offset="0%" stop-color="#fef08a"/>
      <stop offset="45%" stop-color="#f59e0b"/>
      <stop offset="100%" stop-color="#b45309"/>
    </linearGradient>
    <radialGradient id="helmetGlass" cx="0.32" cy="0.28" r="0.7">
      <stop offset="0%" stop-color="#e0f2fe" stop-opacity="0.38"/>
      <stop offset="55%" stop-color="#38bdf8" stop-opacity="0.14"/>
      <stop offset="88%" stop-color="#0284c7" stop-opacity="0.28"/>
      <stop offset="100%" stop-color="#bae6fd" stop-opacity="0.55"/>
    </radialGradient>

    <!-- Cat Fur Gradients -->
    <radialGradient id="catFur" cx="0.4" cy="0.35" r="0.7">
      <stop offset="0%" stop-color="#fdba74"/>
      <stop offset="65%" stop-color="#f97316"/>
      <stop offset="100%" stop-color="#c2410c"/>
    </radialGradient>

    <!-- Skateboard Gradients -->
    <linearGradient id="deckTop" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#1e293b"/>
      <stop offset="50%" stop-color="#334155"/>
      <stop offset="100%" stop-color="#0f172a"/>
    </linearGradient>
    <linearGradient id="deckBottom" x1="0" y1="0" x2="1" y2="0.4">
      <stop offset="0%" stop-color="#ec4899"/>
      <stop offset="50%" stop-color="#8b5cf6"/>
      <stop offset="100%" stop-color="#06b6d4"/>
    </linearGradient>
    <radialGradient id="wheelGlow" cx="0.35" cy="0.35" r="0.65">
      <stop offset="0%" stop-color="#67e8f9"/>
      <stop offset="65%" stop-color="#06b6d4"/>
      <stop offset="100%" stop-color="#0e7490"/>
    </radialGradient>

    <!-- Shooting Star Trail -->
    <linearGradient id="shootGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
      <stop offset="100%" stop-color="#38bdf8" stop-opacity="0"/>
    </linearGradient>

    <!-- Soft Shadow Filter -->
    <filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="5" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- BACKGROUND SPACE -->
  <rect width="1200" height="800" fill="url(#skyGrad)"/>
  <rect width="1200" height="800" fill="url(#nebula1)"/>
  <rect width="1200" height="800" fill="url(#nebula2)"/>

  <!-- STARS FIELD -->
  <g id="stars">
    <!-- Static crisp micro-stars -->
    <circle cx="85" cy="70" r="1.5" fill="#fff" opacity="0.7"/>
    <circle cx="145" cy="185" r="1.2" fill="#cbd5e1" opacity="0.6"/>
    <circle cx="210" cy="95" r="2" fill="#e0f2fe" opacity="0.85"/>
    <circle cx="290" cy="240" r="1.3" fill="#fff" opacity="0.55"/>
    <circle cx="340" cy="60" r="1.8" fill="#fde68a" opacity="0.8"/>
    <circle cx="430" cy="155" r="1.2" fill="#fff" opacity="0.6"/>
    <circle cx="515" cy="80" r="1.6" fill="#bae6fd" opacity="0.75"/>
    <circle cx="620" cy="120" r="1.4" fill="#fff" opacity="0.65"/>
    <circle cx="710" cy="55" r="2" fill="#fef08a" opacity="0.8"/>
    <circle cx="785" cy="165" r="1.2" fill="#fff" opacity="0.5"/>
    <circle cx="835" cy="75" r="1.5" fill="#e0f2fe" opacity="0.7"/>
    <circle cx="1110" cy="70" r="1.8" fill="#fff" opacity="0.8"/>
    <circle cx="1150" cy="195" r="1.3" fill="#bae6fd" opacity="0.6"/>
    <circle cx="1095" cy="340" r="1.6" fill="#fff" opacity="0.7"/>
    <circle cx="980" cy="390" r="1.2" fill="#fde68a" opacity="0.65"/>
    <circle cx="850" cy="360" r="1.5" fill="#fff" opacity="0.6"/>
    <circle cx="745" cy="285" r="1.3" fill="#e0f2fe" opacity="0.55"/>
    <circle cx="170" cy="345" r="1.5" fill="#fff" opacity="0.65"/>
    <circle cx="65" cy="295" r="1.8" fill="#fde68a" opacity="0.75"/>
    <circle cx="275" cy="410" r="1.2" fill="#fff" opacity="0.5"/>
    <circle cx="100" cy="450" r="1.4" fill="#bae6fd" opacity="0.6"/>
    <circle cx="395" cy="300" r="1.3" fill="#fff" opacity="0.5"/>
    <circle cx="1145" cy="435" r="1.5" fill="#fff" opacity="0.7"/>
    <circle cx="890" cy="445" r="1.3" fill="#e0f2fe" opacity="0.6"/>

    <!-- Twinkling 4-point sparkle stars -->
    <path class="star-a" d="M185 110 L188 122 L200 125 L188 128 L185 140 L182 128 L170 125 L182 122 Z" fill="#fef08a"/>
    <path class="star-b" d="M465 95 L467 104 L476 106 L467 108 L465 117 L463 108 L454 106 L463 104 Z" fill="#e0f2fe"/>
    <path class="star-a" d="M760 110 L763 121 L774 124 L763 127 L760 138 L757 127 L746 124 L757 121 Z" fill="#ffffff"/>
    <path class="star-b" d="M1135 280 L1137 289 L1146 291 L1137 293 L1135 302 L1133 293 L1124 291 L1133 289 Z" fill="#bae6fd"/>
    <path class="star-c" d="M88 380 L90 388 L98 390 L90 392 L88 400 L86 392 L78 390 L86 388 Z" fill="#fde68a"/>
    <path class="star-c" d="M815 415 L817 422 L824 424 L817 426 L815 433 L813 426 L806 424 L813 422 Z" fill="#ffffff"/>
  </g>

  <!-- SHOOTING STAR -->
  <g class="shooting-star" transform="translate(650, 85)">
    <path d="M0 0 L85 -42 L87 -39 L2 3 Z" fill="url(#shootGrad)"/>
    <circle cx="0" cy="0" r="2.8" fill="#ffffff" filter="url(#softGlow)"/>
  </g>

  <!-- DISTANT RINGED PLANET -->
  <g transform="translate(195, 225) rotate(-18)">
    <ellipse cx="0" cy="0" rx="52" ry="13" fill="none" stroke="#fcd34d" stroke-width="5" opacity="0.45"/>
    <circle cx="0" cy="0" r="24" fill="url(#planetGrad)"/>
    <path d="M-52 0 A52 13 0 0 0 52 0" fill="none" stroke="#fde68a" stroke-width="5" opacity="0.85"/>
    <path d="M-44 2 A44 10 0 0 0 44 2" fill="none" stroke="#f59e0b" stroke-width="2" opacity="0.6"/>
  </g>

  <!-- EARTH RISING IN UPPER RIGHT -->
  <g id="earth">
    <circle cx="965" cy="185" r="134" fill="url(#earthGlow)"/>
    <circle cx="965" cy="185" r="102" fill="url(#earthOcean)"/>
    <g clip-path="url(#earthClip)">
      <!-- Continents -->
      <path d="M905 115 C928 102, 962 115, 972 138 C980 155, 955 168, 958 186 C962 204, 985 215, 975 238 C960 260, 926 250, 916 225 C906 200, 882 175, 892 146 Z" fill="#4ade80" opacity="0.82"/>
      <path d="M998 122 C1025 118, 1058 140, 1055 172 C1052 195, 1022 205, 1012 185 C1000 162, 982 136, 998 122 Z" fill="#22c55e" opacity="0.78"/>
      <path d="M1006 228 C1028 220, 1052 240, 1044 265 C1032 280, 1002 272, 996 252 Z" fill="#4ade80" opacity="0.75"/>
      <!-- Swirling Clouds -->
      <path d="M875 152 Q920 140 960 155 T1035 148" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" opacity="0.55"/>
      <path d="M895 205 Q945 190 990 212 T1055 204" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" opacity="0.45"/>
      <path d="M915 248 Q958 238 1005 252" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" opacity="0.4"/>
      <!-- Night-side terminator shadow -->
      <path d="M1000 75 A105 105 0 0 1 885 275 A120 120 0 0 0 1000 75 Z" fill="#090d24" opacity="0.52"/>
    </g>
    <!-- Crisp atmospheric rim -->
    <circle cx="965" cy="185" r="102" fill="none" stroke="#93c5fd" stroke-width="2" opacity="0.55"/>
  </g>

  <!-- MOON HORIZON & DISTANT LUNAR MOUNTAINS -->
  <path d="M0 548 Q160 492 310 525 T640 522 T960 500 Q1090 488 1200 528 L1200 660 L0 660 Z" fill="url(#moonHills)"/>
  <!-- Subtle distant craters on hills -->
  <ellipse cx="220" cy="542" rx="34" ry="8" fill="#5e6785" opacity="0.7"/>
  <ellipse cx="890" cy="528" rx="45" ry="10" fill="#5e6785" opacity="0.65"/>
  <ellipse cx="1065" cy="540" rx="28" ry="6" fill="#5e6785" opacity="0.6"/>

  <!-- FOREGROUND MOON SURFACE -->
  <path d="M0 592 Q290 542 600 558 T1200 578 L1200 800 L0 800 Z" fill="url(#moonGround)"/>
  <!-- Moon ridge highlight -->
  <path d="M0 592 Q290 542 600 558 T1200 578" fill="none" stroke="#f1f5f9" stroke-width="3" opacity="0.65"/>

  <!-- MOON CRATERS (Foreground & Midground) -->
  <!-- Left large crater -->
  <g transform="translate(175, 685) rotate(-5)">
    <ellipse cx="0" cy="0" rx="108" ry="30" fill="#e2e8f0" opacity="0.65"/>
    <ellipse cx="0" cy="3" rx="96" ry="24" fill="url(#craterInner)"/>
    <path d="M-85 -3 A90 20 0 0 1 85 -3" fill="none" stroke="#475569" stroke-width="3" opacity="0.45"/>
  </g>
  <!-- Center-right crater (cat is jumping over/past this ridge) -->
  <g transform="translate(830, 665) rotate(4)">
    <ellipse cx="0" cy="0" rx="120" ry="33" fill="#e2e8f0" opacity="0.6"/>
    <ellipse cx="0" cy="3" rx="106" ry="26" fill="url(#craterInner)"/>
    <path d="M-96 -3 A102 22 0 0 1 96 -3" fill="none" stroke="#475569" stroke-width="3" opacity="0.42"/>
  </g>
  <!-- Small foreground craters -->
  <g transform="translate(415, 738)">
    <ellipse cx="0" cy="0" rx="46" ry="13" fill="#e2e8f0" opacity="0.5"/>
    <ellipse cx="0" cy="2" rx="40" ry="10" fill="url(#craterInner)"/>
  </g>
  <g transform="translate(1085, 725) rotate(6)">
    <ellipse cx="0" cy="0" rx="64" ry="18" fill="#e2e8f0" opacity="0.5"/>
    <ellipse cx="0" cy="2" rx="55" ry="14" fill="url(#craterInner)"/>
  </g>
  <g transform="translate(650, 610)">
    <ellipse cx="0" cy="0" rx="34" ry="9" fill="#e2e8f0" opacity="0.45"/>
    <ellipse cx="0" cy="1" rx="29" ry="7" fill="url(#craterInner)"/>
  </g>

  <!-- MOON ROCKS & PEBBLES -->
  <g fill="#747e9c">
    <path d="M62 630 L78 618 L96 626 L92 636 L65 636 Z"/>
    <path d="M68 628 L78 618 L85 626 Z" fill="#cbd5e1"/>
    <path d="M1015 625 L1035 610 L1056 620 L1048 632 L1018 632 Z"/>
    <path d="M1022 622 L1035 610 L1045 619 Z" fill="#cbd5e1"/>
    <ellipse cx="325" cy="645" rx="9" ry="4" fill="#64748b"/>
    <ellipse cx="342" cy="650" rx="5" ry="2.5" fill="#94a3b8"/>
    <ellipse cx="715" cy="735" rx="11" ry="4.5" fill="#64748b"/>
    <ellipse cx="945" cy="755" rx="8" ry="3.5" fill="#64748b"/>
  </g>

  <!-- SKATEBOARDER SHADOW ON MOON -->
  <g class="ground-shadow">
    <ellipse cx="0" cy="0" rx="125" ry="18" fill="#1e293b"/>
    <ellipse cx="0" cy="0" rx="85" ry="11" fill="#0f172a" opacity="0.7"/>
  </g>

  <!-- LUNAR DUST KICK-UP BEHIND JUMP -->
  <g transform="translate(360, 565)" opacity="0.75">
    <circle cx="0" cy="0" r="14" fill="#e2e8f0" opacity="0.5"/>
    <circle cx="-22" cy="8" r="10" fill="#cbd5e1" opacity="0.45"/>
    <circle cx="20" cy="10" r="8" fill="#f1f5f9" opacity="0.5"/>
    <circle cx="-42" cy="16" r="6" fill="#cbd5e1" opacity="0.35"/>
    <circle cx="38" cy="14" r="5" fill="#e2e8f0" opacity="0.4"/>
  </g>

  <!-- MOTION ARCS (shows awesome ollie trajectory) -->
  <g fill="none" stroke-linecap="round" opacity="0.55">
    <path d="M325 538 Q375 520 412 498" stroke="#67e8f9" stroke-width="3" stroke-dasharray="10 8"/>
    <path d="M342 560 Q385 544 420 524" stroke="#f472b6" stroke-width="2.5" stroke-dasharray="8 8"/>
  </g>

  <!-- HERO: ASTRONAUT CAT & SKATEBOARD -->
  <g class="skater-group">

    <!-- JETPACK PUFF / THRUSTER SPARKLE -->
    <g class="puff-pulse" transform="translate(-85, -110)">
      <path d="M0 0 C-22 -8 -45 -2 -62 8 C-40 16 -18 14 0 8 Z" fill="#67e8f9" opacity="0.55"/>
      <path d="M0 2 C-16 -3 -32 1 -42 7 C-28 11 -12 10 0 6 Z" fill="#ffffff" opacity="0.8"/>
      <circle cx="-55" cy="12" r="4" fill="#fde68a" opacity="0.8"/>
      <circle cx="-72" cy="18" r="2.5" fill="#67e8f9" opacity="0.7"/>
    </g>

    <!-- SKATEBOARD (rotated -14 deg mid-ollie) -->
    <g transform="rotate(-14)">
      <!-- Trucks -->
      <path d="M-72 6 L-58 6 L-61 20 L-69 20 Z" fill="#94a3b8"/>
      <rect x="-78" y="16" width="26" height="5" rx="2" fill="#cbd5e1"/>
      <path d="M58 6 L72 6 L69 20 L61 20 Z" fill="#94a3b8"/>
      <rect x="52" y="16" width="26" height="5" rx="2" fill="#cbd5e1"/>

      <!-- Back-side Wheels (subtle depth) -->
      <circle cx="-78" cy="23" r="13" fill="#0891b2"/>
      <circle cx="52" cy="23" r="13" fill="#0891b2"/>

      <!-- Skateboard Deck -->
      <!-- Bottom graphic layer -->
      <path d="M-126 -14 Q-105 4 -80 5 L80 5 Q105 4 126 -14 L122 -7 Q102 10 80 10 L-80 10 Q-102 10 -122 -7 Z" fill="url(#deckBottom)"/>
      <!-- Maple wood ply edge -->
      <path d="M-126 -16 Q-105 2 -80 3 L80 3 Q105 2 126 -16 L126 -13 Q105 5 80 6 L-80 6 Q-105 5 -126 -13 Z" fill="#f59e0b"/>
      <!-- Top Grip Tape -->
      <path d="M-126 -17 Q-105 1 -80 2 L80 2 Q105 1 126 -17 Q108 -3 80 -3 L-80 -3 Q-108 -3 -126 -17 Z" fill="url(#deckTop)"/>
      <!-- Cute Crescent Moon Sticker on underside -->
      <path d="M-6 6 A6 6 0 1 0 4 9 A4.5 4.5 0 1 1 -6 6 Z" fill="#fef08a"/>

      <!-- Front-side Wheels -->
      <g>
        <circle cx="-58" cy="24" r="14.5" fill="url(#wheelGlow)" stroke="#ecfeff" stroke-width="1.5"/>
        <circle cx="-58" cy="24" r="5" fill="#0f172a"/>
        <circle cx="-58" cy="24" r="2" fill="#cbd5e1"/>
        <circle cx="72" cy="24" r="14.5" fill="url(#wheelGlow)" stroke="#ecfeff" stroke-width="1.5"/>
        <circle cx="72" cy="24" r="5" fill="#0f172a"/>
        <circle cx="72" cy="24" r="2" fill="#cbd5e1"/>
      </g>
    </g>

    <!-- ASTRONAUT CAT -->
    <!-- Spacesuit Tail Sleeve (curling playfully behind) -->
    <g>
      <path d="M-32 -84 C-65 -76, -98 -92, -108 -120 C-114 -136, -102 -148, -90 -142 C-78 -136, -86 -120, -76 -108 C-66 -96, -48 -94, -30 -96 Z" fill="url(#suitGrad)" stroke="#94a3b8" stroke-width="2"/>
      <!-- Orange stripe on tail tip -->
      <path d="M-104 -132 C-101 -144, -92 -145, -86 -138 C-84 -133, -92 -125, -99 -128 Z" fill="url(#orangeAccent)"/>
    </g>

    <!-- Life Support Backpack (PLSS) -->
    <g transform="translate(-52, -155) rotate(-5)">
      <rect x="-18" y="0" width="38" height="68" rx="12" fill="url(#suitShade)" stroke="#64748b" stroke-width="2"/>
      <rect x="-14" y="8" width="24" height="50" rx="8" fill="#e2e8f0"/>
      <rect x="-10" y="16" width="16" height="8" rx="3" fill="url(#orangeAccent)"/>
      <circle cx="-4" cy="36" r="4" fill="#38bdf8"/>
      <circle cx="-4" cy="48" r="3" fill="#4ade80"/>
      <!-- Thruster nozzle -->
      <path d="M-16 58 L-28 66 L-14 68 Z" fill="#475569"/>
    </g>

    <!-- Back Leg (on tail of skateboard) -->
    <g>
      <path d="M-24 -86 Q-55 -66 -52 -32 L-54 2" fill="none" stroke="url(#suitGrad)" stroke-width="32" stroke-linecap="round"/>
      <path d="M-24 -86 Q-55 -66 -52 -32 L-54 2" fill="none" stroke="#94a3b8" stroke-width="32" stroke-linecap="round" opacity="0.22"/>
      <!-- Knee pad -->
      <ellipse cx="-50" cy="-42" rx="17" ry="10" transform="rotate(-12 -50 -42)" fill="url(#orangeAccent)"/>
      <!-- Moon Boot (angled to match board) -->
      <g transform="translate(-54, 4) rotate(-14)">
        <path d="M-18 -8 L16 -8 Q26 -8 28 4 L28 10 L-18 10 Z" fill="#f8fafc" stroke="#64748b" stroke-width="2"/>
        <rect x="-19" y="6" width="48" height="6" rx="3" fill="#334155"/>
        <path d="M-15 -6 L12 -6" stroke="#fb923c" stroke-width="3" stroke-linecap="round"/>
      </g>
    </g>

    <!-- Front Leg (near nose bolts of skateboard) -->
    <g>
      <path d="M8 -82 Q36 -66 44 -36 L49 -18" fill="none" stroke="url(#suitGrad)" stroke-width="32" stroke-linecap="round"/>
      <!-- Knee pad -->
      <ellipse cx="41" cy="-46" rx="17" ry="10" transform="rotate(14 41 -46)" fill="url(#orangeAccent)"/>
      <!-- Moon Boot -->
      <g transform="translate(51, -22) rotate(-14)">
        <path d="M-18 -8 L16 -8 Q26 -8 28 4 L28 10 L-18 10 Z" fill="#ffffff" stroke="#64748b" stroke-width="2"/>
        <rect x="-19" y="6" width="48" height="6" rx="3" fill="#334155"/>
        <path d="M-15 -6 L12 -6" stroke="#fb923c" stroke-width="3" stroke-linecap="round"/>
      </g>
    </g>

    <!-- Back Arm (reaching out left for balance) -->
    <g>
      <path d="M-26 -136 Q-64 -138 -92 -154" fill="none" stroke="url(#suitGrad)" stroke-width="24" stroke-linecap="round"/>
      <!-- Cuff ring -->
      <ellipse cx="-82" cy="-149" rx="6" ry="12" transform="rotate(28 -82 -149)" fill="url(#orangeAccent)"/>
      <!-- Puffy Paw Glove -->
      <circle cx="-98" cy="-158" r="14" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
      <circle cx="-106" cy="-167" r="6" fill="#ffffff" stroke="#94a3b8" stroke-width="1.5"/>
    </g>

    <!-- Spacesuit Torso -->
    <g>
      <path d="M-38 -150 C-42 -118, -36 -82, -14 -76 C8 -70, 26 -80, 26 -112 C26 -138, 16 -152, -10 -154 Z" fill="url(#suitGrad)" stroke="#94a3b8" stroke-width="2"/>
      <!-- Belt & Waist Stripe -->
      <path d="M-35 -94 Q-4 -84 25 -96" fill="none" stroke="#334155" stroke-width="9" stroke-linecap="round"/>
      <rect x="-12" y="-95" width="16" height="11" rx="3" fill="url(#collarGold)"/>
      <!-- Chest Control Unit (DCM) -->
      <rect x="-20" y="-140" width="32" height="28" rx="6" fill="#f8fafc" stroke="#64748b" stroke-width="2"/>
      <rect x="-14" y="-134" width="20" height="8" rx="2" fill="#0f172a"/>
      <circle cx="-9" cy="-120" r="3" fill="#ef4444"/>
      <circle cx="-1" cy="-120" r="3" fill="#38bdf8"/>
      <circle cx="7" cy="-120" r="3" fill="#22c55e"/>
      <!-- Cute Paw Mission Patch on Shoulder -->
      <g transform="translate(12, -135) rotate(10)">
        <circle cx="0" cy="0" r="8" fill="#1e3a8a" stroke="#fde047" stroke-width="1.2"/>
        <circle cx="0" cy="2" r="2.8" fill="#fb923c"/>
        <circle cx="-3" cy="-2" r="1.3" fill="#fb923c"/>
        <circle cx="0" cy="-3.2" r="1.3" fill="#fb923c"/>
        <circle cx="3" cy="-2" r="1.3" fill="#fb923c"/>
      </g>
    </g>

    <!-- Front Arm (reaching forward/up in cool skate pose) -->
    <g>
      <path d="M16 -138 Q56 -138 82 -162" fill="none" stroke="url(#suitGrad)" stroke-width="24" stroke-linecap="round"/>
      <!-- Cuff ring -->
      <ellipse cx="73" cy="-153" rx="6" ry="12" transform="rotate(-42 73 -153)" fill="url(#orangeAccent)"/>
      <!-- Puffy Paw Glove -->
      <circle cx="88" cy="-167" r="14" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
      <circle cx="80" cy="-177" r="6" fill="#ffffff" stroke="#94a3b8" stroke-width="1.5"/>
    </g>

    <!-- HELMET NECK COLLAR -->
    <ellipse cx="-8" cy="-156" rx="44" ry="12" fill="url(#collarGold)" stroke="#92400e" stroke-width="2"/>
    <ellipse cx="-8" cy="-158" rx="36" ry="8" fill="#334155"/>

    <!-- CAT HEAD INSIDE HELMET -->
    <g transform="translate(-6, -212)">
      <!-- Cat Ears (perched up into the helmet's ear bubbles!) -->
      <path d="M-40 -26 L-50 -64 L-16 -46 Z" fill="url(#catFur)" stroke="#c2410c" stroke-width="2" stroke-linejoin="round"/>
      <path d="M-38 -32 L-45 -56 L-24 -44 Z" fill="#fda4af"/>

      <path d="M40 -26 L50 -64 L16 -46 Z" fill="url(#catFur)" stroke="#c2410c" stroke-width="2" stroke-linejoin="round"/>
      <path d="M38 -32 L45 -56 L24 -44 Z" fill="#fda4af"/>

      <!-- Cat Head Base -->
      <ellipse cx="0" cy="0" rx="48" ry="44" fill="url(#catFur)"/>
      <!-- Cream muzzle / cheeks -->
      <ellipse cx="-10" cy="14" rx="16" ry="12" fill="#ffedd5"/>
      <ellipse cx="12" cy="14" rx="16" ry="12" fill="#ffedd5"/>
      <ellipse cx="1" cy="20" rx="14" ry="10" fill="#ffedd5"/>

      <!-- Tabby Forehead Stripes -->
      <path d="M0 -42 L0 -26" stroke="#c2410c" stroke-width="4.5" stroke-linecap="round"/>
      <path d="M-11 -39 L-7 -27" stroke="#c2410c" stroke-width="4" stroke-linecap="round"/>
      <path d="M11 -39 L7 -27" stroke="#c2410c" stroke-width="4" stroke-linecap="round"/>
      <!-- Side cheek stripes -->
      <path d="M-44 -4 L-33 -2" stroke="#c2410c" stroke-width="3.5" stroke-linecap="round"/>
      <path d="M-45 6 L-34 6" stroke="#c2410c" stroke-width="3.5" stroke-linecap="round"/>
      <path d="M44 -4 L33 -2" stroke="#c2410c" stroke-width="3.5" stroke-linecap="round"/>
      <path d="M45 6 L34 6" stroke="#c2410c" stroke-width="3.5" stroke-linecap="round"/>

      <!-- Big Expressive Eyes -->
      <g>
        <!-- Left eye -->
        <ellipse cx="-17" cy="-6" rx="10.5" ry="12" fill="#0f172a"/>
        <ellipse cx="-17" cy="-6" rx="8.5" ry="10" fill="#10b981"/>
        <ellipse cx="-17" cy="-6" rx="5.5" ry="7.5" fill="#0f172a"/>
        <circle cx="-20" cy="-10" r="3.5" fill="#ffffff"/>
        <circle cx="-14" cy="-2" r="1.5" fill="#ffffff"/>

        <!-- Right eye -->
        <ellipse cx="19" cy="-6" rx="10.5" ry="12" fill="#0f172a"/>
        <ellipse cx="19" cy="-6" rx="8.5" ry="10" fill="#10b981"/>
        <ellipse cx="19" cy="-6" rx="5.5" ry="7.5" fill="#0f172a"/>
        <circle cx="16" cy="-10" r="3.5" fill="#ffffff"/>
        <circle cx="22" cy="-2" r="1.5" fill="#ffffff"/>
      </g>

      <!-- Cute Pink Nose -->
      <path d="M-4 6 L6 6 L1 12 Z" fill="#fb7185" stroke="#e11d48" stroke-width="1" stroke-linejoin="round"/>
      <!-- Happy ':3' Smile -->
      <path d="M1 12 Q-4 19 -11 16" fill="none" stroke="#7c2d12" stroke-width="2.4" stroke-linecap="round"/>
      <path d="M1 12 Q6 19 13 16" fill="none" stroke="#7c2d12" stroke-width="2.4" stroke-linecap="round"/>

      <!-- Whiskers -->
      <g stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" opacity="0.9">
        <line x1="-22" y1="12" x2="-46" y2="8"/>
        <line x1="-22" y1="17" x2="-47" y2="18"/>
        <line x1="24" y1="12" x2="48" y2="8"/>
        <line x1="24" y1="17" x2="49" y2="18"/>
      </g>
    </g>

    <!-- GLASS SPACE HELMET WITH CUTE EAR BUBBLES -->
    <g transform="translate(-6, -214)">
      <!-- Unified Helmet Silhouette (circle + ear domes) -->
      <path d="M-54 -40 C-68 -68, -46 -86, -22 -64 A70 68 0 0 1 22 -64 C46 -86, 68 -68, 54 -40 A70 68 0 1 1 -54 -40 Z"
            fill="url(#helmetGlass)" stroke="#bae6fd" stroke-width="3.5"/>
      <!-- Glossy Curved Visor Reflections -->
      <path d="M-48 -24 A56 52 0 0 1 14 -54" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" opacity="0.65"/>
      <path d="M-53 -6 A56 52 0 0 1 -50 -16" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" opacity="0.5"/>
      <!-- Ear dome sheen -->
      <path d="M-49 -58 Q-44 -68 -34 -62" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.65"/>
      <path d="M36 -63 Q45 -68 49 -57" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.55"/>
      <!-- Bottom subtle rim reflection -->
      <path d="M-38 56 A62 56 0 0 0 42 54" fill="none" stroke="#7dd3fc" stroke-width="3" stroke-linecap="round" opacity="0.45"/>
    </g>

  </g>
</svg>

Reasoning trace (2,413 tokens)

**Creating Initial SVG**

I'm focused on generating the SVG code. My current thought is to define the basic structure and elements needed for an astronaut cat and a skateboard, laying the groundwork for the moon environment.

**Defining Scene Elements**

I'm currently defining the scene elements, focusing on the background deep space gradients, twinkling stars, a nebula glow, and a rising Earth. I'm also considering the composition of the moon's surface, including its curved horizon, layered hills, and detailed craters.

**Refining Cat Details**

I'm elaborating on the astronaut cat's appearance. My thoughts are now centered on its expressive face within the helmet, the design of the helmet itself with cute ear domes, and adding details like whiskers and a confident grin. I'm also considering how to portray dynamic action with motion lines and dust puffs.

**Designing Cat's Look**

I'm finalizing the astronaut cat's details. I've decided on big, expressive eyes with star highlights and added cute tabby stripes. The spacesuit design is evolving with mission patches and a segmented tail-sleeve, and I'm refining the dynamic pose.

**Animating Lunar Scene**

I'm now incorporating pure CSS animations for twinkling stars, a gentle bob, and subtle thruster pulses. I'm ensuring key elements align crisply, and I'm mapping out precise coordinates for the sky, Earth, and moon's terrain within the 1200x800 viewBox.

**Positioning Skateboarding Cat**

I'm centering the skateboarding cat and board at `(560, 400)` during a mid-air jump. My focus is now on the skateboard's precise tilt and placement, the cat's balanced posture on the deck, and the subtle, grounded shadow beneath them.

**Positioning Skater's Feet**

I'm refining the skater's foot placement on the rotated board. My current calculations place the back boot around (-54, 3) and the front boot near (49, -19), accounting for the board's tilt to ensure a natural, balanced stance.