Models 44

GLM 5.3

by Z.aiReasoningClean
Open in new window

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

How it went

Total time
50.5 s
Cost
$0.027
Output tokens
6,168
Spent thinking
62 tokens
Speed
123.3 tok/s
Console errors
0
First token after
492 ms
First visible text after
944 ms
Prompt tokens
348
Code size
14.7 KB
Finish reason
stop
Served by
Parasail
Model id
z-ai/glm-5.3
Reasoning sent
{"effort":"high"}
Max output
943,718 tokens
Generated
Nov 12, 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 · 322 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    height: 100%;
    background: #05060f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: "Courier New", monospace;
  }
  svg {
    width: min(96vw, 900px);
    height: auto;
    max-height: 96vh;
    display: block;
    border-radius: 14px;
    box-shadow: 0 0 60px rgba(120, 150, 255, 0.25);
  }
</style>
</head>
<body>
<svg viewBox="0 0 900 620" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="An astronaut cat skateboarding on the moon">
  <defs>
    <!-- Moon sky gradient -->
    <radialGradient id="sky" cx="50%" cy="30%" r="90%">
      <stop offset="0%" stop-color="#101a3d"/>
      <stop offset="60%" stop-color="#070b22"/>
      <stop offset="100%" stop-color="#03040d"/>
    </radialGradient>

    <!-- Moon surface gradient -->
    <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#d8d8de"/>
      <stop offset="35%" stop-color="#b9b9c2"/>
      <stop offset="100%" stop-color="#8d8d99"/>
    </linearGradient>

    <!-- Helmet glass -->
    <radialGradient id="glass" cx="35%" cy="30%" r="80%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"/>
      <stop offset="25%" stop-color="#bfe3ff" stop-opacity="0.75"/>
      <stop offset="100%" stop-color="#3a6ea8" stop-opacity="0.55"/>
    </radialGradient>

    <!-- Suit gradient -->
    <linearGradient id="suit" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#d3d6e0"/>
    </linearGradient>

    <!-- Earth -->
    <radialGradient id="earth" cx="35%" cy="30%" r="80%">
      <stop offset="0%" stop-color="#9fd7ff"/>
      <stop offset="45%" stop-color="#4aa3e0"/>
      <stop offset="75%" stop-color="#2f6fb8"/>
      <stop offset="100%" stop-color="#1c3f75"/>
    </radialGradient>

    <!-- Earth atmosphere glow -->
    <radialGradient id="earthGlow" cx="50%" cy="50%" r="50%">
      <stop offset="60%" stop-color="#6ec6ff" stop-opacity="0"/>
      <stop offset="90%" stop-color="#6ec6ff" stop-opacity="0.25"/>
      <stop offset="100%" stop-color="#6ec6ff" stop-opacity="0"/>
    </radialGradient>

    <!-- Dust trail -->
    <linearGradient id="dust" x1="1" y1="0" x2="0" y2="0">
      <stop offset="0%" stop-color="#cfcfd8" stop-opacity="0.85"/>
      <stop offset="100%" stop-color="#cfcfd8" stop-opacity="0"/>
    </linearGradient>

    <filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
  </defs>

  <!-- ================= SKY ================= -->
  <rect width="900" height="620" fill="url(#sky)"/>

  <!-- Stars -->
  <g fill="#ffffff">
    <circle cx="60" cy="70" r="2.2"/>
    <circle cx="140" cy="130" r="1.4"/>
    <circle cx="210" cy="55" r="1.8"/>
    <circle cx="300" cy="110" r="1.2"/>
    <circle cx="420" cy="45" r="2.4"/>
    <circle cx="520" cy="95" r="1.5"/>
    <circle cx="600" cy="40" r="1.2"/>
    <circle cx="680" cy="115" r="2"/>
    <circle cx="760" cy="60" r="1.5"/>
    <circle cx="840" cy="130" r="2.2"/>
    <circle cx="870" cy="50" r="1.2"/>
    <circle cx="35" cy="180" r="1.6"/>
    <circle cx="390" cy="160" r="1.3"/>
    <circle cx="470" cy="210" r="1.7"/>
    <circle cx="100" cy="240" r="1.2"/>
    <circle cx="830" cy="230" r="1.5"/>
    <circle cx="730" cy="200" r="1.1"/>
    <circle cx="260" cy="200" r="1.4"/>
    <path d="M190 155 l1.6 4.2 4.4 0.3 -3.4 2.8 1.1 4.3 -3.7 -2.4 -3.7 2.4 1.1 -4.3 -3.4 -2.8 4.4 -0.3 z" fill="#fff8d0"/>
    <path d="M700 130 l1.6 4.2 4.4 0.3 -3.4 2.8 1.1 4.3 -3.7 -2.4 -3.7 2.4 1.1 -4.3 -3.4 -2.8 4.4 -0.3 z" fill="#fff8d0"/>
    <path d="M120 40 l1.4 3.8 4 0.3 -3.1 2.5 1 3.9 -3.3 -2.2 -3.3 2.2 1 -3.9 -3.1 -2.5 4 -0.3 z" fill="#ffffff"/>
  </g>

  <!-- Distant tiny planet -->
  <circle cx="810" cy="300" r="9" fill="#c98a5a"/>
  <ellipse cx="810" cy="300" rx="16" ry="5" fill="none" stroke="#e8c9a0" stroke-width="1.6" opacity="0.6"/>

  <!-- Earth -->
  <g>
    <circle cx="160" cy="300" r="95" fill="url(#earthGlow)"/>
    <circle cx="160" cy="300" r="55" fill="url(#earth)"/>
    <!-- continents -->
    <path d="M135 268 q14 -8 26 2 q10 10 4 22 q-6 12 -18 8 q-12 -4 -16 -14 q-3 -10 4 -18z" fill="#4caf6d" opacity="0.9"/>
    <path d="M185 285 q10 2 12 12 q2 10 -6 16 q-9 6 -15 -2 q-5 -8 -1 -16 q4 -8 10 -10z" fill="#4caf6d" opacity="0.85"/>
    <path d="M150 330 q10 -4 18 2 q8 6 3 14 q-6 8 -16 6 q-9 -2 -11 -10 q-1 -7 6 -12z" fill="#54bd76" opacity="0.8"/>
    <path d="M120 305 q7 -2 10 4 q3 7 -3 10 q-7 3 -10 -3 q-2 -7 3 -11z" fill="#4caf6d" opacity="0.7"/>
    <!-- clouds -->
    <path d="M125 275 q20 -14 45 -8 q18 4 22 14 q-22 -6 -40 -1 q-14 4 -27 -5z" fill="#ffffff" opacity="0.5"/>
    <path d="M130 320 q18 -8 38 -3 q14 4 16 11 q-18 -5 -33 -1 q-12 3 -21 -7z" fill="#ffffff" opacity="0.45"/>
    <!-- terminator shading -->
    <path d="M160 245 a55 55 0 0 1 0 110 a80 55 0 0 0 0 -110z" fill="#0a1633" opacity="0.28"/>
    <circle cx="160" cy="300" r="55" fill="none" stroke="#bfe3ff" stroke-width="1.5" opacity="0.5"/>
  </g>

  <!-- ================= MOON SURFACE ================= -->
  <path d="M0 430 Q 120 400 260 425 Q 400 450 560 420 Q 720 392 900 428 L 900 620 L 0 620 Z" fill="url(#ground)"/>

  <!-- craters -->
  <g>
    <ellipse cx="130" cy="520" rx="55" ry="20" fill="#9d9daa"/>
    <ellipse cx="130" cy="515" rx="46" ry="15" fill="#84848f"/>
    <ellipse cx="118" cy="512" rx="20" ry="6" fill="#74747f"/>

    <ellipse cx="420" cy="560" rx="70" ry="26" fill="#a2a2ae"/>
    <ellipse cx="420" cy="555" rx="58" ry="19" fill="#888895"/>
    <ellipse cx="404" cy="552" rx="26" ry="8" fill="#787885"/>

    <ellipse cx="700" cy="510" rx="42" ry="15" fill="#9d9daa"/>
    <ellipse cx="700" cy="506" rx="34" ry="11" fill="#83838e"/>

    <ellipse cx="820" cy="575" rx="60" ry="22" fill="#9a9aa7"/>
    <ellipse cx="820" cy="570" rx="48" ry="16" fill="#81818d"/>

    <ellipse cx="280" cy="480" rx="24" ry="9" fill="#a5a5b0"/>
    <ellipse cx="280" cy="478" rx="18" ry="6" fill="#8d8d99"/>
    <ellipse cx="560" cy="490" rx="20" ry="8" fill="#a5a5b0"/>
    <ellipse cx="560" cy="488" rx="14" ry="5" fill="#8d8d99"/>
    <ellipse cx="50" cy="580" rx="45" ry="18" fill="#9a9aa7"/>
    <ellipse cx="50" cy="576" rx="35" ry="13" fill="#81818d"/>
  </g>

  <!-- a few moon rocks -->
  <g fill="#7e7e8a">
    <ellipse cx="340" cy="545" rx="12" ry="8"/>
    <ellipse cx="640" cy="575" rx="16" ry="11"/>
    <ellipse cx="770" cy="555" rx="9" ry="6"/>
    <ellipse cx="210" cy="580" rx="10" ry="7"/>
  </g>

  <!-- back footprints / tire tracks -->
  <g stroke="#7c7c89" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.55">
    <path d="M60 470 q60 -6 120 -2"/>
    <path d="M75 482 q60 -6 120 -2"/>
  </g>

  <!-- ================= CAT ASTRONAUT ON SKATEBOARD ================= -->
  <!-- positioned mid-air off a small ridge; crouched, tail out -->

  <!-- Motion lines behind -->
  <g stroke="#ffffff" stroke-opacity="0.35" stroke-width="3" stroke-linecap="round">
    <line x1="80" y1="330" x2="160" y2="330"/>
    <line x1="60" y1="358" x2="150" y2="358"/>
    <line x1="95" y1="386" x2="180" y2="386"/>
  </g>

  <!-- Dust trail from wheels -->
  <g>
    <ellipse cx="215" cy="472" rx="60" ry="14" fill="url(#dust)" filter="url(#soft)"/>
    <circle cx="245" cy="466" r="6" fill="#cfcfd8" opacity="0.7"/>
    <circle cx="222" cy="478" r="8" fill="#c4c4cf" opacity="0.6"/>
    <circle cx="258" cy="478" r="5" fill="#cfcfd8" opacity="0.5"/>
  </g>

  <!-- ===== Skateboard ===== -->
  <g>
    <!-- deck -->
    <path d="M270 470 Q 300 458 345 462 Q 390 466 420 478 Q 390 486 345 482 Q 300 478 270 470 Z"
          fill="#e05656" stroke="#a83838" stroke-width="3"/>
    <!-- deck top highlight -->
    <path d="M285 467 Q 320 459 355 462 Q 390 465 410 473" fill="none" stroke="#ff9b9b" stroke-width="3" stroke-linecap="round"/>
    <!-- kicktails -->
    <path d="M270 470 q -14 4 -18 12" fill="none" stroke="#a83838" stroke-width="5" stroke-linecap="round"/>
    <path d="M420 478 q 14 2 20 10" fill="none" stroke="#a83838" stroke-width="5" stroke-linecap="round"/>
    <!-- grip tape -->
    <path d="M292 465 Q 340 460 408 473" fill="none" stroke="#2b2b30" stroke-width="4" stroke-linecap="round" opacity="0.85"/>

    <!-- trucks + wheels (mid-air, angled slightly) -->
    <g>
      <rect x="300" y="480" width="10" height="12" rx="2" fill="#9a9aa5" transform="rotate(-4 305 486)"/>
      <rect x="380" y="482" width="10" height="12" rx="2" fill="#9a9aa5" transform="rotate(-4 385 488)"/>
      <circle cx="303" cy="496" r="11" fill="#f5c542" stroke="#c79a1f" stroke-width="3"/>
      <circle cx="303" cy="496" r="3.5" fill="#c79a1f"/>
      <circle cx="391" cy="500" r="11" fill="#f5c542" stroke="#c79a1f" stroke-width="3"/>
      <circle cx="391" cy="500" r="3.5" fill="#c79a1f"/>
    </g>
  </g>

  <!-- ===== Cat astronaut ===== -->
  <g>
    <!-- Tail (through/behind, poking out of suit) -->
    <path d="M300 400 Q 258 392 242 412 Q 230 430 246 444"
          fill="none" stroke="#8d8d99" stroke-width="14" stroke-linecap="round"/>
    <path d="M300 400 Q 262 394 250 410" fill="none" stroke="#a8a8b3" stroke-width="7" stroke-linecap="round" opacity="0.7"/>

    <!-- Back leg (bent, on tail of board) -->
    <path d="M318 420 Q 305 448 300 462" fill="none" stroke="url(#suit)" stroke-width="16" stroke-linecap="round"/>
    <!-- back boot -->
    <path d="M292 458 q 14 -4 20 6 q 4 8 -4 10 q -12 3 -17 -3 q -4 -7 1 -13z" fill="#e8eaf2" stroke="#b7bcc9" stroke-width="2"/>

    <!-- Body / suit torso -->
    <path d="M312 388 Q 330 368 360 372 Q 392 377 398 400 Q 402 424 384 434 Q 356 444 332 434 Q 310 424 312 388 Z"
          fill="url(#suit)" stroke="#aab0c0" stroke-width="2.5"/>
    <!-- chest control panel -->
    <rect x="352" y="396" width="30" height="22" rx="4" fill="#5a6b8c" stroke="#3d4a63" stroke-width="2"/>
    <circle cx="360" cy="403" r="2.6" fill="#7cf29a"/>
    <circle cx="368" cy="403" r="2.6" fill="#f2d97c"/>
    <circle cx="376" cy="403" r="2.6" fill="#f27c7c"/>
    <rect x="357" y="409" width="20" height="4" rx="2" fill="#c8d4ec"/>
    <!-- air hose from panel -->
    <path d="M352 410 Q 336 416 330 430" fill="none" stroke="#8b93a8" stroke-width="4"/>
    <circle cx="330" cy="431" r="4" fill="#6c7589"/>

    <!-- Front leg (crouched, pushing stance) -->
    <path d="M380 408 Q 400 432 396 456" fill="none" stroke="url(#suit)" stroke-width="16" stroke-linecap="round"/>
    <!-- front boot -->
    <path d="M388 452 q 14 -4 20 6 q 4 8 -4 10 q -12 3 -17 -3 q -4 -7 1 -13z" fill="#e8eaf2" stroke="#b7bcc9" stroke-width="2"/>

    <!-- Front arm (out for balance, forward) -->
    <path d="M362 384 Q 392 378 412 362" fill="none" stroke="url(#suit)" stroke-width="13" stroke-linecap="round"/>
    <!-- glove -->
    <circle cx="416" cy="358" r="9" fill="#e8eaf2" stroke="#b7bcc9" stroke-width="2"/>
    <path d="M412 352 q 8 -4 12 2" fill="none" stroke="#b7bcc9" stroke-width="2"/>
    <!-- peace-ish paw gesture: small "hang loose" hint -->

    <!-- Back arm (bent back) -->
    <path d="M330 392 Q 312 404 306 420" fill="none" stroke="url(#suit)" stroke-width="13" stroke-linecap="round"/>
    <circle cx="304" cy="424" r="8.5" fill="#e8eaf2" stroke="#b7bcc9" stroke-width="2"/>

    <!-- Helmet -->
    <g>
      <!-- neck ring -->
      <ellipse cx="356" cy="356" rx="26" ry="10" fill="#aab2c4" stroke="#7f879c" stroke-width="2.5"/>
      <!-- glass dome -->
      <circle cx="358" cy="322" r="46" fill="url(#glass)" stroke="#c9d3e8" stroke-width="4"/>
      <!-- helmet shine -->
      <path d="M326 300 q 10 -18 30 -22" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" opacity="0.85"/>
      <!-- sun / earth reflection -->
      <ellipse cx="342" cy="306" rx="8" ry="4" fill="#ffffff" opacity="0.55" transform="rotate(-25 342 306)"/>

      <!-- CAT FACE inside helmet -->
      <g>
        <!-- head -->
        <path d="M330 316 Q 330 292 358 292 Q 386 292 386 316 Q 386 340 358 340 Q 330 340 330 316 Z" fill="#2f2f38"/>
        <!-- ears -->
        <path d="M334 302 L 328 282 L 348 292 Z" fill="#2f2f38"/>
        <path d="M382 302 L 388 282 L 368 292 Z" fill="#2f2f38"/>
        <path d="M336 300 L 333 288 L 345 294 Z" fill="#e08a9b"/>
        <path d="M380 300 L 383 288 L 371 294 Z" fill="#e08a9b"/>
        <!-- ear fluff in suit hood -->
        <path d="M336 296 q 4 -12 12 -14" fill="none" stroke="#e8eaf2" stroke-width="5" stroke-linecap="round"/>
        <!-- muzzle -->
        <ellipse cx="358" cy="324" rx="15" ry="11" fill="#4a4a55"/>
        <!-- eyes (happy, determined) -->
        <path d="M338 312 q 6 -7 12 0" fill="none" stroke="#7ce8a0" stroke-width="3.5" stroke-linecap="round"/>
        <path d="M366 312 q 6 -7 12 0" fill="none" stroke="#7ce8a0" stroke-width="3.5" stroke-linecap="round"/>
        <!-- blush -->
        <ellipse cx="336" cy="322" rx="5" ry="3" fill="#e08a9b" opacity="0.7"/>
        <ellipse cx="380" cy="322" rx="5" ry="3" fill="#e08a9b" opacity="0.7"/>
        <!-- nose -->
        <path d="M354 318 q 4 -3 8 0 q -2 4 -4 4 q -2 0 -4 -4z" fill="#f2a0b3"/>
        <!-- mouth w :3 -->
        <path d="M350 327 q 4 4 8 0 q 4 4 8 0" fill="none" stroke="#c9c9d4" stroke-width="2" stroke-linecap="round"/>
        <!-- whiskers -->
        <path d="M330 320 l -12 -3 M330 326 l -12 3 M386 320 l 12 -3 M386 326 l 12 3"
              stroke="#9a9aa8" stroke-width="1.6" stroke-linecap="round"/>
      </g>

      <!-- helmet highlight over glass -->
      <circle cx="358" cy="322" r="46" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.35"/>
    </g>

    <!-- Backpack (life support) -->
    <rect x="308" y="360" width="24" height="38" rx="7" fill="#c3c8d6" stroke="#8f96ab" stroke-width="2.5"
          transform="rotate(-8 320 379)"/>
    <circle cx="318" cy="372" r="4" fill="#7cf29a" transform="rotate(-8 320 379)"/>
    <!-- antenna -->
    <line x1="322" y1="360" x2="314" y2="338" stroke="#8f96ab" stroke-width="3" stroke-linecap="round"/>
    <circle cx="313" cy="335" r="4" fill="#f2d97c" stroke="#c79a1f" stroke-width="1.5"/>
  </g>

  <!-- Sparkles around the scene -->
  <g fill="#fff8d0">
    <path d="M520 330 l2 5.5 5.5 0.5 -4.2 3.5 1.4 5.4 -4.7 -3 -4.7 3 1.4 -5.4 -4.2 -3.5 5.5 -0.5z" opacity="0.9"/>
    <path d="M480 250 l1.6 4.2 4.4 0.3 -3.4 2.8 1.1 4.3 -3.7 -2.4 -3.7 2.4 1.1 -4.3 -3.4 -2.8 4.4 -0.3z" opacity="0.8"/>
    <path d="M600 180 l1.4 3.8 4 0.3 -3.1 2.5 1 3.9 -3.3 -2.2 -3.3 2.2 1 -3.9 -3.1 -2.5 4 -0.3z" opacity="0.7"/>
  </g>

  <!-- Caption -->
  <g font-family="'Courier New', monospace" text-anchor="middle">
    <text x="450" y="606" font-size="20" fill="#dfe6f5" letter-spacing="4" opacity="0.85">LUNA · SK8 · MISSION 09</text>
  </g>
</svg>
</body>
</html>
Reasoning trace (62 tokens)
The user asks for an SVG of an astronaut cat skateboarding on the moon. I'll create a detailed SVG with a lunar surface, stars, Earth in the sky, a cat in a spacesuit on a skateboard, some craters, motion lines, etc. Make it charming and well-crafted.
Raw response
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    height: 100%;
    background: #05060f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: "Courier New", monospace;
  }
  svg {
    width: min(96vw, 900px);
    height: auto;
    max-height: 96vh;
    display: block;
    border-radius: 14px;
    box-shadow: 0 0 60px rgba(120, 150, 255, 0.25);
  }
</style>
</head>
<body>
<svg viewBox="0 0 900 620" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="An astronaut cat skateboarding on the moon">
  <defs>
    <!-- Moon sky gradient -->
    <radialGradient id="sky" cx="50%" cy="30%" r="90%">
      <stop offset="0%" stop-color="#101a3d"/>
      <stop offset="60%" stop-color="#070b22"/>
      <stop offset="100%" stop-color="#03040d"/>
    </radialGradient>

    <!-- Moon surface gradient -->
    <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#d8d8de"/>
      <stop offset="35%" stop-color="#b9b9c2"/>
      <stop offset="100%" stop-color="#8d8d99"/>
    </linearGradient>

    <!-- Helmet glass -->
    <radialGradient id="glass" cx="35%" cy="30%" r="80%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"/>
      <stop offset="25%" stop-color="#bfe3ff" stop-opacity="0.75"/>
      <stop offset="100%" stop-color="#3a6ea8" stop-opacity="0.55"/>
    </radialGradient>

    <!-- Suit gradient -->
    <linearGradient id="suit" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#d3d6e0"/>
    </linearGradient>

    <!-- Earth -->
    <radialGradient id="earth" cx="35%" cy="30%" r="80%">
      <stop offset="0%" stop-color="#9fd7ff"/>
      <stop offset="45%" stop-color="#4aa3e0"/>
      <stop offset="75%" stop-color="#2f6fb8"/>
      <stop offset="100%" stop-color="#1c3f75"/>
    </radialGradient>

    <!-- Earth atmosphere glow -->
    <radialGradient id="earthGlow" cx="50%" cy="50%" r="50%">
      <stop offset="60%" stop-color="#6ec6ff" stop-opacity="0"/>
      <stop offset="90%" stop-color="#6ec6ff" stop-opacity="0.25"/>
      <stop offset="100%" stop-color="#6ec6ff" stop-opacity="0"/>
    </radialGradient>

    <!-- Dust trail -->
    <linearGradient id="dust" x1="1" y1="0" x2="0" y2="0">
      <stop offset="0%" stop-color="#cfcfd8" stop-opacity="0.85"/>
      <stop offset="100%" stop-color="#cfcfd8" stop-opacity="0"/>
    </linearGradient>

    <filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
  </defs>

  <!-- ================= SKY ================= -->
  <rect width="900" height="620" fill="url(#sky)"/>

  <!-- Stars -->
  <g fill="#ffffff">
    <circle cx="60" cy="70" r="2.2"/>
    <circle cx="140" cy="130" r="1.4"/>
    <circle cx="210" cy="55" r="1.8"/>
    <circle cx="300" cy="110" r="1.2"/>
    <circle cx="420" cy="45" r="2.4"/>
    <circle cx="520" cy="95" r="1.5"/>
    <circle cx="600" cy="40" r="1.2"/>
    <circle cx="680" cy="115" r="2"/>
    <circle cx="760" cy="60" r="1.5"/>
    <circle cx="840" cy="130" r="2.2"/>
    <circle cx="870" cy="50" r="1.2"/>
    <circle cx="35" cy="180" r="1.6"/>
    <circle cx="390" cy="160" r="1.3"/>
    <circle cx="470" cy="210" r="1.7"/>
    <circle cx="100" cy="240" r="1.2"/>
    <circle cx="830" cy="230" r="1.5"/>
    <circle cx="730" cy="200" r="1.1"/>
    <circle cx="260" cy="200" r="1.4"/>
    <path d="M190 155 l1.6 4.2 4.4 0.3 -3.4 2.8 1.1 4.3 -3.7 -2.4 -3.7 2.4 1.1 -4.3 -3.4 -2.8 4.4 -0.3 z" fill="#fff8d0"/>
    <path d="M700 130 l1.6 4.2 4.4 0.3 -3.4 2.8 1.1 4.3 -3.7 -2.4 -3.7 2.4 1.1 -4.3 -3.4 -2.8 4.4 -0.3 z" fill="#fff8d0"/>
    <path d="M120 40 l1.4 3.8 4 0.3 -3.1 2.5 1 3.9 -3.3 -2.2 -3.3 2.2 1 -3.9 -3.1 -2.5 4 -0.3 z" fill="#ffffff"/>
  </g>

  <!-- Distant tiny planet -->
  <circle cx="810" cy="300" r="9" fill="#c98a5a"/>
  <ellipse cx="810" cy="300" rx="16" ry="5" fill="none" stroke="#e8c9a0" stroke-width="1.6" opacity="0.6"/>

  <!-- Earth -->
  <g>
    <circle cx="160" cy="300" r="95" fill="url(#earthGlow)"/>
    <circle cx="160" cy="300" r="55" fill="url(#earth)"/>
    <!-- continents -->
    <path d="M135 268 q14 -8 26 2 q10 10 4 22 q-6 12 -18 8 q-12 -4 -16 -14 q-3 -10 4 -18z" fill="#4caf6d" opacity="0.9"/>
    <path d="M185 285 q10 2 12 12 q2 10 -6 16 q-9 6 -15 -2 q-5 -8 -1 -16 q4 -8 10 -10z" fill="#4caf6d" opacity="0.85"/>
    <path d="M150 330 q10 -4 18 2 q8 6 3 14 q-6 8 -16 6 q-9 -2 -11 -10 q-1 -7 6 -12z" fill="#54bd76" opacity="0.8"/>
    <path d="M120 305 q7 -2 10 4 q3 7 -3 10 q-7 3 -10 -3 q-2 -7 3 -11z" fill="#4caf6d" opacity="0.7"/>
    <!-- clouds -->
    <path d="M125 275 q20 -14 45 -8 q18 4 22 14 q-22 -6 -40 -1 q-14 4 -27 -5z" fill="#ffffff" opacity="0.5"/>
    <path d="M130 320 q18 -8 38 -3 q14 4 16 11 q-18 -5 -33 -1 q-12 3 -21 -7z" fill="#ffffff" opacity="0.45"/>
    <!-- terminator shading -->
    <path d="M160 245 a55 55 0 0 1 0 110 a80 55 0 0 0 0 -110z" fill="#0a1633" opacity="0.28"/>
    <circle cx="160" cy="300" r="55" fill="none" stroke="#bfe3ff" stroke-width="1.5" opacity="0.5"/>
  </g>

  <!-- ================= MOON SURFACE ================= -->
  <path d="M0 430 Q 120 400 260 425 Q 400 450 560 420 Q 720 392 900 428 L 900 620 L 0 620 Z" fill="url(#ground)"/>

  <!-- craters -->
  <g>
    <ellipse cx="130" cy="520" rx="55" ry="20" fill="#9d9daa"/>
    <ellipse cx="130" cy="515" rx="46" ry="15" fill="#84848f"/>
    <ellipse cx="118" cy="512" rx="20" ry="6" fill="#74747f"/>

    <ellipse cx="420" cy="560" rx="70" ry="26" fill="#a2a2ae"/>
    <ellipse cx="420" cy="555" rx="58" ry="19" fill="#888895"/>
    <ellipse cx="404" cy="552" rx="26" ry="8" fill="#787885"/>

    <ellipse cx="700" cy="510" rx="42" ry="15" fill="#9d9daa"/>
    <ellipse cx="700" cy="506" rx="34" ry="11" fill="#83838e"/>

    <ellipse cx="820" cy="575" rx="60" ry="22" fill="#9a9aa7"/>
    <ellipse cx="820" cy="570" rx="48" ry="16" fill="#81818d"/>

    <ellipse cx="280" cy="480" rx="24" ry="9" fill="#a5a5b0"/>
    <ellipse cx="280" cy="478" rx="18" ry="6" fill="#8d8d99"/>
    <ellipse cx="560" cy="490" rx="20" ry="8" fill="#a5a5b0"/>
    <ellipse cx="560" cy="488" rx="14" ry="5" fill="#8d8d99"/>
    <ellipse cx="50" cy="580" rx="45" ry="18" fill="#9a9aa7"/>
    <ellipse cx="50" cy="576" rx="35" ry="13" fill="#81818d"/>
  </g>

  <!-- a few moon rocks -->
  <g fill="#7e7e8a">
    <ellipse cx="340" cy="545" rx="12" ry="8"/>
    <ellipse cx="640" cy="575" rx="16" ry="11"/>
    <ellipse cx="770" cy="555" rx="9" ry="6"/>
    <ellipse cx="210" cy="580" rx="10" ry="7"/>
  </g>

  <!-- back footprints / tire tracks -->
  <g stroke="#7c7c89" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.55">
    <path d="M60 470 q60 -6 120 -2"/>
    <path d="M75 482 q60 -6 120 -2"/>
  </g>

  <!-- ================= CAT ASTRONAUT ON SKATEBOARD ================= -->
  <!-- positioned mid-air off a small ridge; crouched, tail out -->

  <!-- Motion lines behind -->
  <g stroke="#ffffff" stroke-opacity="0.35" stroke-width="3" stroke-linecap="round">
    <line x1="80" y1="330" x2="160" y2="330"/>
    <line x1="60" y1="358" x2="150" y2="358"/>
    <line x1="95" y1="386" x2="180" y2="386"/>
  </g>

  <!-- Dust trail from wheels -->
  <g>
    <ellipse cx="215" cy="472" rx="60" ry="14" fill="url(#dust)" filter="url(#soft)"/>
    <circle cx="245" cy="466" r="6" fill="#cfcfd8" opacity="0.7"/>
    <circle cx="222" cy="478" r="8" fill="#c4c4cf" opacity="0.6"/>
    <circle cx="258" cy="478" r="5" fill="#cfcfd8" opacity="0.5"/>
  </g>

  <!-- ===== Skateboard ===== -->
  <g>
    <!-- deck -->
    <path d="M270 470 Q 300 458 345 462 Q 390 466 420 478 Q 390 486 345 482 Q 300 478 270 470 Z"
          fill="#e05656" stroke="#a83838" stroke-width="3"/>
    <!-- deck top highlight -->
    <path d="M285 467 Q 320 459 355 462 Q 390 465 410 473" fill="none" stroke="#ff9b9b" stroke-width="3" stroke-linecap="round"/>
    <!-- kicktails -->
    <path d="M270 470 q -14 4 -18 12" fill="none" stroke="#a83838" stroke-width="5" stroke-linecap="round"/>
    <path d="M420 478 q 14 2 20 10" fill="none" stroke="#a83838" stroke-width="5" stroke-linecap="round"/>
    <!-- grip tape -->
    <path d="M292 465 Q 340 460 408 473" fill="none" stroke="#2b2b30" stroke-width="4" stroke-linecap="round" opacity="0.85"/>

    <!-- trucks + wheels (mid-air, angled slightly) -->
    <g>
      <rect x="300" y="480" width="10" height="12" rx="2" fill="#9a9aa5" transform="rotate(-4 305 486)"/>
      <rect x="380" y="482" width="10" height="12" rx="2" fill="#9a9aa5" transform="rotate(-4 385 488)"/>
      <circle cx="303" cy="496" r="11" fill="#f5c542" stroke="#c79a1f" stroke-width="3"/>
      <circle cx="303" cy="496" r="3.5" fill="#c79a1f"/>
      <circle cx="391" cy="500" r="11" fill="#f5c542" stroke="#c79a1f" stroke-width="3"/>
      <circle cx="391" cy="500" r="3.5" fill="#c79a1f"/>
    </g>
  </g>

  <!-- ===== Cat astronaut ===== -->
  <g>
    <!-- Tail (through/behind, poking out of suit) -->
    <path d="M300 400 Q 258 392 242 412 Q 230 430 246 444"
          fill="none" stroke="#8d8d99" stroke-width="14" stroke-linecap="round"/>
    <path d="M300 400 Q 262 394 250 410" fill="none" stroke="#a8a8b3" stroke-width="7" stroke-linecap="round" opacity="0.7"/>

    <!-- Back leg (bent, on tail of board) -->
    <path d="M318 420 Q 305 448 300 462" fill="none" stroke="url(#suit)" stroke-width="16" stroke-linecap="round"/>
    <!-- back boot -->
    <path d="M292 458 q 14 -4 20 6 q 4 8 -4 10 q -12 3 -17 -3 q -4 -7 1 -13z" fill="#e8eaf2" stroke="#b7bcc9" stroke-width="2"/>

    <!-- Body / suit torso -->
    <path d="M312 388 Q 330 368 360 372 Q 392 377 398 400 Q 402 424 384 434 Q 356 444 332 434 Q 310 424 312 388 Z"
          fill="url(#suit)" stroke="#aab0c0" stroke-width="2.5"/>
    <!-- chest control panel -->
    <rect x="352" y="396" width="30" height="22" rx="4" fill="#5a6b8c" stroke="#3d4a63" stroke-width="2"/>
    <circle cx="360" cy="403" r="2.6" fill="#7cf29a"/>
    <circle cx="368" cy="403" r="2.6" fill="#f2d97c"/>
    <circle cx="376" cy="403" r="2.6" fill="#f27c7c"/>
    <rect x="357" y="409" width="20" height="4" rx="2" fill="#c8d4ec"/>
    <!-- air hose from panel -->
    <path d="M352 410 Q 336 416 330 430" fill="none" stroke="#8b93a8" stroke-width="4"/>
    <circle cx="330" cy="431" r="4" fill="#6c7589"/>

    <!-- Front leg (crouched, pushing stance) -->
    <path d="M380 408 Q 400 432 396 456" fill="none" stroke="url(#suit)" stroke-width="16" stroke-linecap="round"/>
    <!-- front boot -->
    <path d="M388 452 q 14 -4 20 6 q 4 8 -4 10 q -12 3 -17 -3 q -4 -7 1 -13z" fill="#e8eaf2" stroke="#b7bcc9" stroke-width="2"/>

    <!-- Front arm (out for balance, forward) -->
    <path d="M362 384 Q 392 378 412 362" fill="none" stroke="url(#suit)" stroke-width="13" stroke-linecap="round"/>
    <!-- glove -->
    <circle cx="416" cy="358" r="9" fill="#e8eaf2" stroke="#b7bcc9" stroke-width="2"/>
    <path d="M412 352 q 8 -4 12 2" fill="none" stroke="#b7bcc9" stroke-width="2"/>
    <!-- peace-ish paw gesture: small "hang loose" hint -->

    <!-- Back arm (bent back) -->
    <path d="M330 392 Q 312 404 306 420" fill="none" stroke="url(#suit)" stroke-width="13" stroke-linecap="round"/>
    <circle cx="304" cy="424" r="8.5" fill="#e8eaf2" stroke="#b7bcc9" stroke-width="2"/>

    <!-- Helmet -->
    <g>
      <!-- neck ring -->
      <ellipse cx="356" cy="356" rx="26" ry="10" fill="#aab2c4" stroke="#7f879c" stroke-width="2.5"/>
      <!-- glass dome -->
      <circle cx="358" cy="322" r="46" fill="url(#glass)" stroke="#c9d3e8" stroke-width="4"/>
      <!-- helmet shine -->
      <path d="M326 300 q 10 -18 30 -22" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" opacity="0.85"/>
      <!-- sun / earth reflection -->
      <ellipse cx="342" cy="306" rx="8" ry="4" fill="#ffffff" opacity="0.55" transform="rotate(-25 342 306)"/>

      <!-- CAT FACE inside helmet -->
      <g>
        <!-- head -->
        <path d="M330 316 Q 330 292 358 292 Q 386 292 386 316 Q 386 340 358 340 Q 330 340 330 316 Z" fill="#2f2f38"/>
        <!-- ears -->
        <path d="M334 302 L 328 282 L 348 292 Z" fill="#2f2f38"/>
        <path d="M382 302 L 388 282 L 368 292 Z" fill="#2f2f38"/>
        <path d="M336 300 L 333 288 L 345 294 Z" fill="#e08a9b"/>
        <path d="M380 300 L 383 288 L 371 294 Z" fill="#e08a9b"/>
        <!-- ear fluff in suit hood -->
        <path d="M336 296 q 4 -12 12 -14" fill="none" stroke="#e8eaf2" stroke-width="5" stroke-linecap="round"/>
        <!-- muzzle -->
        <ellipse cx="358" cy="324" rx="15" ry="11" fill="#4a4a55"/>
        <!-- eyes (happy, determined) -->
        <path d="M338 312 q 6 -7 12 0" fill="none" stroke="#7ce8a0" stroke-width="3.5" stroke-linecap="round"/>
        <path d="M366 312 q 6 -7 12 0" fill="none" stroke="#7ce8a0" stroke-width="3.5" stroke-linecap="round"/>
        <!-- blush -->
        <ellipse cx="336" cy="322" rx="5" ry="3" fill="#e08a9b" opacity="0.7"/>
        <ellipse cx="380" cy="322" rx="5" ry="3" fill="#e08a9b" opacity="0.7"/>
        <!-- nose -->
        <path d="M354 318 q 4 -3 8 0 q -2 4 -4 4 q -2 0 -4 -4z" fill="#f2a0b3"/>
        <!-- mouth w :3 -->
        <path d="M350 327 q 4 4 8 0 q 4 4 8 0" fill="none" stroke="#c9c9d4" stroke-width="2" stroke-linecap="round"/>
        <!-- whiskers -->
        <path d="M330 320 l -12 -3 M330 326 l -12 3 M386 320 l 12 -3 M386 326 l 12 3"
              stroke="#9a9aa8" stroke-width="1.6" stroke-linecap="round"/>
      </g>

      <!-- helmet highlight over glass -->
      <circle cx="358" cy="322" r="46" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.35"/>
    </g>

    <!-- Backpack (life support) -->
    <rect x="308" y="360" width="24" height="38" rx="7" fill="#c3c8d6" stroke="#8f96ab" stroke-width="2.5"
          transform="rotate(-8 320 379)"/>
    <circle cx="318" cy="372" r="4" fill="#7cf29a" transform="rotate(-8 320 379)"/>
    <!-- antenna -->
    <line x1="322" y1="360" x2="314" y2="338" stroke="#8f96ab" stroke-width="3" stroke-linecap="round"/>
    <circle cx="313" cy="335" r="4" fill="#f2d97c" stroke="#c79a1f" stroke-width="1.5"/>
  </g>

  <!-- Sparkles around the scene -->
  <g fill="#fff8d0">
    <path d="M520 330 l2 5.5 5.5 0.5 -4.2 3.5 1.4 5.4 -4.7 -3 -4.7 3 1.4 -5.4 -4.2 -3.5 5.5 -0.5z" opacity="0.9"/>
    <path d="M480 250 l1.6 4.2 4.4 0.3 -3.4 2.8 1.1 4.3 -3.7 -2.4 -3.7 2.4 1.1 -4.3 -3.4 -2.8 4.4 -0.3z" opacity="0.8"/>
    <path d="M600 180 l1.4 3.8 4 0.3 -3.1 2.5 1 3.9 -3.3 -2.2 -3.3 2.2 1 -3.9 -3.1 -2.5 4 -0.3z" opacity="0.7"/>
  </g>

  <!-- Caption -->
  <g font-family="'Courier New', monospace" text-anchor="middle">
    <text x="450" y="606" font-size="20" fill="#dfe6f5" letter-spacing="4" opacity="0.85">LUNA · SK8 · MISSION 09</text>
  </g>
</svg>
</body>
</html>
```