Skateboarding astronaut catOne-line
GLM 5.3
by Z.aiReasoningClean
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>
```