Skateboarding astronaut catOne-line
Muse Ember
by MetaReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 14.1 s
- Cost
- $0.0041
- Output tokens
- 8,098
- Spent thinking
- 2,410 tokens
- Speed
- 657.6 tok/s
- Console errors
- 0
- First token after
- 1.8 s
- First visible text after
- 6.6 s
- Prompt tokens
- 365
- Code size
- 14.4 KB
- Finish reason
- stop
- Served by
- Meta
- Model id
meta/muse-ember- 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 · 237 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{width:100%;height:100%;background:#050816;overflow:hidden}
body{display:flex;align-items:center;justify-content:center}
svg{width:100vw;height:100vh;display:block}
.floatCat{animation:floaty 3.2s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.twinkle{animation:tw 2.4s ease-in-out infinite}
.twinkle2{animation:tw 3.1s ease-in-out infinite reverse}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
.spin{transform-origin:center;animation:sp 1.4s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.bob{animation:floaty 4s ease-in-out infinite reverse}
.title{font-family:Arial Black,Arial,sans-serif;letter-spacing:2px}
</style>
</head>
<body>
<svg viewBox="0 0 1200 750" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="t d">
<title id="t">Astronaut cat skateboarding on the moon</title>
<desc id="d">A cute orange tabby cat in a white spacesuit and glass helmet riding a teal skateboard across the cratered lunar surface, with Earth in the starry sky.</desc>
<defs>
<linearGradient id="space" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0b1026"/><stop offset="55%" stop-color="#131a3a"/><stop offset="100%" stop-color="#1e1b4b"/>
</linearGradient>
<linearGradient id="moon" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e6eaf2"/><stop offset="45%" stop-color="#c3cad9"/><stop offset="100%" stop-color="#7f8aa3"/>
</linearGradient>
<radialGradient id="glass" cx="35%" cy="25%" r="80%">
<stop offset="0%" stop-color="#ffffff" stop-opacity=".85"/><stop offset="35%" stop-color="#bae6fd" stop-opacity=".45"/><stop offset="100%" stop-color="#38bdf8" stop-opacity=".18"/>
</radialGradient>
<radialGradient id="earthG" cx="35%" cy="30%" r="80%">
<stop offset="0%" stop-color="#7dd3fc"/><stop offset="55%" stop-color="#2563eb"/><stop offset="100%" stop-color="#1e3a8a"/>
</radialGradient>
<linearGradient id="suit" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#dbe3ee"/>
</linearGradient>
<linearGradient id="boardG" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#14b8a6"/><stop offset="55%" stop-color="#06b6d4"/><stop offset="100%" stop-color="#f97316"/>
</linearGradient>
<radialGradient id="catG" cx="40%" cy="30%" r="80%">
<stop offset="0%" stop-color="#fdba74"/><stop offset="100%" stop-color="#f97316"/>
</radialGradient>
<filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="6"/></filter>
</defs>
<!-- SPACE -->
<rect width="1200" height="750" fill="url(#space)"/>
<!-- STARS -->
<g fill="#fff">
<circle class="twinkle" cx="80" cy="90" r="3"/><circle cx="150" cy="180" r="2"/><circle class="twinkle2" cx="240" cy="70" r="2.5"/>
<circle cx="320" cy="140" r="2"/><circle class="twinkle" cx="420" cy="60" r="3"/><circle cx="500" cy="120" r="1.8"/>
<circle class="twinkle2" cx="580" cy="50" r="2.5"/><circle cx="690" cy="90" r="2"/><circle class="twinkle" cx="760" cy="150" r="3"/>
<circle cx="850" cy="70" r="2"/><circle class="twinkle2" cx="920" cy="210" r="2.5"/><circle cx="110" cy="310" r="2"/>
<circle class="twinkle" cx="202" cy="260" r="2"/><circle cx="1070" cy="300" r="2"/><circle class="twinkle2" cx="1130" cy="110" r="3"/>
<circle cx="1145" cy="420" r="2"/><circle class="twinkle" cx="55" cy="420" r="2.5"/><circle cx="165" cy="480" r="1.8"/>
<circle class="twinkle2" cx="340" cy="210" r="2"/><circle cx="880" cy="290" r="1.8"/><circle class="twinkle" cx="1020" cy="380" r="2"/>
<circle cx="45" cy="180" r="2"/><circle class="twinkle2" cx="730" cy="40" r="2"/><circle cx="970" cy="45" r="2"/>
<!-- sparkle stars -->
<path class="twinkle" d="M285 115 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4z"/>
<path class="twinkle2" d="M815 110 l3 8 8 3 -8 3 -3 8 -3 -8 -8 -3 8 -3z"/>
<path class="twinkle" d="M105 355 l3 8 8 3 -8 3 -3 8 -3 -8 -8 -3 8 -3z"/>
</g>
<!-- EARTH -->
<g class="bob">
<circle cx="1022" cy="138" r="80" fill="url(#earthG)" stroke="#93c5fd" stroke-width="3"/>
<path d="M970 95 q28-20 52 4 q18 18-6 32 q-24 12-42-6 q-16-16-4-30z" fill="#22c55e" opacity=".9"/>
<path d="M985 165 q22 18 48 4 q20-12 10-28 q-28 8-48-2 q-18 12-10 26z" fill="#16a34a"/>
<path d="M950 120 q30-14 58 2" stroke="#fff" stroke-width="9" fill="none" stroke-linecap="round" opacity=".7"/>
<path d="M980 70 q34-10 62 8" stroke="#fff" stroke-width="7" fill="none" stroke-linecap="round" opacity=".55"/>
<circle cx="1022" cy="138" r="80" fill="none" stroke="#fff" stroke-opacity=".15" stroke-width="10"/>
</g>
<!-- little satellite -->
<g transform="translate(868 118) rotate(-18)">
<rect x="-14" y="-8" width="28" height="16" rx="4" fill="#facc15" stroke="#a16207"/>
<rect x="-38" y="-12" width="20" height="24" rx="3" fill="#38bdf8"/><rect x="18" y="-12" width="20" height="24" rx="3" fill="#38bdf8"/>
<line x1="0" y1="8" x2="0" y2="20" stroke="#cbd5e1" stroke-width="3"/><circle cx="0" cy="24" r="5" fill="#ef4444"/>
</g>
<!-- TITLE -->
<text class="title" x="38" y="72" font-size="36" fill="#ffffff">ASTRONAUT CAT</text>
<text x="40" y="100" font-size="15" fill="#93c5fd" font-family="Arial,sans-serif" font-weight="700" letter-spacing="3">SKATEBOARDING ON THE MOON ★</text>
<!-- MOON SURFACE -->
<path d="M0 602 Q190 560 380 588 Q580 618 780 590 Q980 562 1200 600 L1200 750 L0 750 Z" fill="url(#moon)"/>
<path d="M0 652 Q300 625 600 650 Q900 672 1200 648 L1200 750 L0 750 Z" fill="#94a3b8" opacity=".55"/>
<g fill="#64748b" opacity=".35">
<ellipse cx="180" cy="675" rx="90" ry="16"/><ellipse cx="430" cy="705" rx="70" ry="12"/><ellipse cx="880" cy="682" rx="110" ry="18"/>
<ellipse cx="1080" cy="712" rx="64" ry="11"/><ellipse cx="660" cy="720" rx="55" ry="9"/>
</g>
<g fill="#475569" opacity=".25">
<ellipse cx="180" cy="670" rx="62" ry="10"/><ellipse cx="880" cy="677" rx="76" ry="11"/><ellipse cx="430" cy="700" rx="44" ry="7"/>
</g>
<!-- scattered rocks -->
<g fill="#cbd5e1" stroke="#94a3b8"><path d="M120 620 l22-10 16 12-8 14-24 2z"/><path d="M920 630 l20-8 14 10-6 12-22 0z"/><path d="M760 655 l14-6 10 8-6 10-16-2z"/></g>
<!-- shadow -->
<ellipse cx="600" cy="622" rx="285" ry="18" fill="#0f172a" opacity=".28" filter="url(#soft)"/>
<!-- moon dust behind board -->
<g fill="#e2e8f0" opacity=".75">
<circle cx="340" cy="590" r="13"/><circle cx="315" cy="605" r="9"/><circle cx="365" cy="610" r="7"/><circle cx="295" cy="585" r="6"/>
<circle cx="845" cy="605" r="10"/><circle cx="870" cy="590" r="6"/>
</g>
<!-- speed lines -->
<g stroke="#fff" stroke-linecap="round" opacity=".85">
<line x1="190" y1="375" x2="350" y2="375" stroke-width="7"/><line x1="150" y1="440" x2="330" y2="440" stroke-width="9"/>
<line x1="205" y1="500" x2="350" y2="500" stroke-width="6" opacity=".7"/>
</g>
<!-- FLAG -->
<g>
<line x1="975" y1="612" x2="975" y2="495" stroke="#e2e8f0" stroke-width="6" stroke-linecap="round"/>
<path d="M975 500 L1045 512 L1038 548 L975 538 Z" fill="#ef4444" stroke="#991b1b"/>
<text x="985" y="528" font-size="11" fill="#fff" font-weight="900" font-family="Arial">MOON</text>
</g>
<!-- CAT ON SKATEBOARD -->
<g class="floatCat">
<!-- skateboard back wheels / trucks -->
<g transform="rotate(-5 600 575)">
<rect x="425" y="582" width="64" height="14" rx="5" fill="#64748b"/>
<rect x="715" y="582" width="64" height="14" rx="5" fill="#64748b"/>
</g>
<!-- tail -->
<path d="M518 492 C440 522 390 492 418 438 C428 418 450 410 462 422" fill="none" stroke="#f97316" stroke-width="24" stroke-linecap="round"/>
<path d="M418 438 C428 418 450 410 462 422" fill="none" stroke="#9a3412" stroke-width="24" stroke-linecap="round" stroke-dasharray="10 18" opacity=".5"/>
<!-- backpack -->
<rect x="462" y="338" width="76" height="158" rx="26" fill="#ef4444" stroke="#991b1b" stroke-width="3"/>
<rect x="476" y="358" width="48" height="28" rx="8" fill="#fca5a5"/>
<circle cx="489" cy="372" r="6" fill="#fff"/><circle cx="511" cy="372" r="6" fill="#facc15"/>
<rect x="478" y="402" width="44" height="62" rx="8" fill="#f8fafc" opacity=".9"/>
<line x1="500" y1="338" x2="478" y2="282" stroke="#e2e8f0" stroke-width="4" stroke-linecap="round"/>
<circle cx="476" cy="278" r="8" fill="#facc15" stroke="#a16207" stroke-width="2"/>
<circle class="twinkle" cx="476" cy="278" r="16" fill="#facc15" opacity=".25"/>
<!-- legs -->
<path d="M548 482 L482 532 L452 550" fill="none" stroke="#f1f5f9" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M642 488 L712 530 L762 548" fill="none" stroke="#f8fafc" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M548 482 L482 532 L452 550" fill="none" stroke="#cbd5e1" stroke-width="40" stroke-linecap="round" stroke-dasharray="2 90" opacity=".4"/>
<!-- torso suit -->
<path d="M515 378 Q600 342 688 378 L702 498 Q600 548 498 498 Z" fill="url(#suit)" stroke="#cbd5e1" stroke-width="3"/>
<rect x="545" y="430" width="112" height="58" rx="12" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>
<circle cx="568" cy="456" r="9" fill="#ef4444"/><circle cx="596" cy="456" r="9" fill="#22c55e"/><circle cx="624" cy="456" r="9" fill="#38bdf8"/>
<rect x="560" y="470" width="82" height="7" rx="3" fill="#94a3b8"/>
<circle cx="600" cy="410" r="20" fill="#fff" stroke="#fb923c" stroke-width="3"/>
<text x="600" y="416" text-anchor="middle" font-size="18" fill="#f97316">★</text>
<rect x="526" y="480" width="150" height="14" rx="7" fill="#f97316"/>
<!-- arms -->
<path d="M528 402 L458 448" stroke="#f1f5f9" stroke-width="34" stroke-linecap="round"/>
<path d="M676 402 L762 372" stroke="#f8fafc" stroke-width="34" stroke-linecap="round"/>
<circle cx="448" cy="456" r="24" fill="#fff" stroke="#cbd5e1" stroke-width="3"/>
<circle cx="440" cy="448" r="5" fill="#f97316"/><circle cx="456" cy="448" r="5" fill="#f97316"/>
<circle cx="776" cy="368" r="26" fill="#fff" stroke="#cbd5e1" stroke-width="3"/>
<path d="M762 358 q14-10 26 0 M760 374 q16-8 30 2" stroke="#94a3b8" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- collar -->
<ellipse cx="600" cy="372" rx="88" ry="30" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/>
<!-- helmet -->
<circle cx="600" cy="285" r="117" fill="url(#glass)" stroke="#ffffff" stroke-width="7"/>
<circle cx="600" cy="285" r="117" fill="none" stroke="#7dd3fc" stroke-width="2" opacity=".6"/>
<!-- cat head -->
<g>
<path d="M538 248 L536 178 L592 218 Z" fill="#f97316" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"/>
<path d="M662 248 L664 178 L608 218 Z" fill="#f97316" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"/>
<path d="M550 232 L550 196 L578 218 Z" fill="#fda4af"/>
<path d="M650 232 L650 196 L622 218 Z" fill="#fda4af"/>
<circle cx="600" cy="302" r="78" fill="url(#catG)" stroke="#9a3412" stroke-width="3"/>
<!-- stripes -->
<g stroke="#9a3412" stroke-width="5" stroke-linecap="round">
<line x1="582" y1="232" x2="580" y2="254"/><line x1="600" y1="228" x2="600" y2="252"/><line x1="618" y1="232" x2="620" y2="254"/>
<line x1="530" y1="285" x2="546" y2="290"/><line x1="670" y1="285" x2="654" y2="290"/>
</g>
<!-- eyes -->
<ellipse cx="568" cy="300" rx="17" ry="21" fill="#4ade80"/><ellipse cx="632" cy="300" rx="17" ry="21" fill="#4ade80"/>
<ellipse cx="568" cy="302" rx="8" ry="15" fill="#111827"/><ellipse cx="632" cy="302" rx="8" ry="15" fill="#111827"/>
<circle cx="572" cy="293" r="4" fill="#fff"/><circle cx="636" cy="293" r="4" fill="#fff"/>
<!-- nose & mouth -->
<path d="M590 324 L610 324 L600 336 Z" fill="#f472b6" stroke="#be185d" stroke-width="2" stroke-linejoin="round"/>
<path d="M600 336 Q600 346 588 344 M600 336 Q600 346 612 344" stroke="#7c2d12" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- blush + whiskers -->
<circle cx="548" cy="326" r="10" fill="#fb7185" opacity=".45"/><circle cx="652" cy="326" r="10" fill="#fb7185" opacity=".45"/>
<g stroke="#fff" stroke-width="2.5" stroke-linecap="round" opacity=".9">
<line x1="545" y1="322" x2="505" y2="314"/><line x1="546" y1="333" x2="508" y2="336"/>
<line x1="655" y1="322" x2="695" y2="314"/><line x1="654" y1="333" x2="692" y2="336"/>
</g>
</g>
<!-- helmet reflection -->
<ellipse cx="552" cy="210" rx="48" ry="20" fill="#fff" opacity=".4" transform="rotate(-28 552 210)"/>
<ellipse cx="652" cy="195" rx="18" ry="9" fill="#fff" opacity=".5" transform="rotate(-20 652 195)"/>
<path class="twinkle" d="M640 175 l3 7 7 3 -7 3 -3 7 -3 -7 -7 -3 7 -3z" fill="#fff"/>
<!-- boots on board -->
<g transform="rotate(-8 452 552)"><rect x="408" y="536" width="92" height="34" rx="17" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/><rect x="408" y="556" width="92" height="10" rx="5" fill="#94a3b8"/></g>
<g transform="rotate(-5 762 550)"><rect x="718" y="534" width="94" height="34" rx="17" fill="#ffffff" stroke="#94a3b8" stroke-width="3"/><rect x="718" y="554" width="94" height="10" rx="5" fill="#64748b"/></g>
<!-- SKATEBOARD -->
<g transform="rotate(-5 600 575)">
<path d="M368 562 Q600 548 832 562 L832 582 Q600 596 368 582 Z" fill="url(#boardG)" stroke="#0f766e" stroke-width="3"/>
<rect x="382" y="558" width="436" height="9" rx="4" fill="#134e4a" opacity=".85"/>
<text x="600" y="577" text-anchor="middle" font-family="Arial Black,Arial" font-size="13" fill="#fff" letter-spacing="2">MOON CAT ★</text>
<!-- wheels -->
<g>
<circle cx="458" cy="602" r="21" fill="#f8fafc" stroke="#64748b" stroke-width="3"/>
<g class="spin" style="transform-origin:458px 602px"><line x1="458" y1="588" x2="458" y2="616" stroke="#14b8a6" stroke-width="4"/><line x1="444" y1="602" x2="472" y2="602" stroke="#14b8a6" stroke-width="4"/></g>
<circle cx="458" cy="602" r="6" fill="#0f766e"/>
</g>
<g>
<circle cx="742" cy="602" r="21" fill="#f8fafc" stroke="#64748b" stroke-width="3"/>
<g class="spin" style="transform-origin:742px 602px"><line x1="742" y1="588" x2="742" y2="616" stroke="#f97316" stroke-width="4"/><line x1="728" y1="602" x2="756" y2="602" stroke="#f97316" stroke-width="4"/></g>
<circle cx="742" cy="602" r="6" fill="#c2410c"/>
</g>
</g>
</g>
<!-- floating pebbles -->
<g fill="#e2e8f0" stroke="#94a3b8">
<circle class="bob" cx="320" cy="520" r="7"/><circle class="twinkle" cx="900" cy="500" r="5"/><circle cx="880" cy="430" r="4"/>
</g>
</svg>
</body>
</html>Reasoning trace (2,410 tokens)
Designing a self-contained HTML with inline SVG for an astronaut cat skateboarding on the moon, focusing on composition, gradients, and visual details.Defining SVG gradients, shapes, and layering for the astronaut cat and moon scene.Adding CSS animations for floating, twinkling, and spinning while finalizing coordinates and responsive viewBox.
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{width:100%;height:100%;background:#050816;overflow:hidden}
body{display:flex;align-items:center;justify-content:center}
svg{width:100vw;height:100vh;display:block}
.floatCat{animation:floaty 3.2s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.twinkle{animation:tw 2.4s ease-in-out infinite}
.twinkle2{animation:tw 3.1s ease-in-out infinite reverse}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
.spin{transform-origin:center;animation:sp 1.4s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.bob{animation:floaty 4s ease-in-out infinite reverse}
.title{font-family:Arial Black,Arial,sans-serif;letter-spacing:2px}
</style>
</head>
<body>
<svg viewBox="0 0 1200 750" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="t d">
<title id="t">Astronaut cat skateboarding on the moon</title>
<desc id="d">A cute orange tabby cat in a white spacesuit and glass helmet riding a teal skateboard across the cratered lunar surface, with Earth in the starry sky.</desc>
<defs>
<linearGradient id="space" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0b1026"/><stop offset="55%" stop-color="#131a3a"/><stop offset="100%" stop-color="#1e1b4b"/>
</linearGradient>
<linearGradient id="moon" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e6eaf2"/><stop offset="45%" stop-color="#c3cad9"/><stop offset="100%" stop-color="#7f8aa3"/>
</linearGradient>
<radialGradient id="glass" cx="35%" cy="25%" r="80%">
<stop offset="0%" stop-color="#ffffff" stop-opacity=".85"/><stop offset="35%" stop-color="#bae6fd" stop-opacity=".45"/><stop offset="100%" stop-color="#38bdf8" stop-opacity=".18"/>
</radialGradient>
<radialGradient id="earthG" cx="35%" cy="30%" r="80%">
<stop offset="0%" stop-color="#7dd3fc"/><stop offset="55%" stop-color="#2563eb"/><stop offset="100%" stop-color="#1e3a8a"/>
</radialGradient>
<linearGradient id="suit" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#dbe3ee"/>
</linearGradient>
<linearGradient id="boardG" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#14b8a6"/><stop offset="55%" stop-color="#06b6d4"/><stop offset="100%" stop-color="#f97316"/>
</linearGradient>
<radialGradient id="catG" cx="40%" cy="30%" r="80%">
<stop offset="0%" stop-color="#fdba74"/><stop offset="100%" stop-color="#f97316"/>
</radialGradient>
<filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="6"/></filter>
</defs>
<!-- SPACE -->
<rect width="1200" height="750" fill="url(#space)"/>
<!-- STARS -->
<g fill="#fff">
<circle class="twinkle" cx="80" cy="90" r="3"/><circle cx="150" cy="180" r="2"/><circle class="twinkle2" cx="240" cy="70" r="2.5"/>
<circle cx="320" cy="140" r="2"/><circle class="twinkle" cx="420" cy="60" r="3"/><circle cx="500" cy="120" r="1.8"/>
<circle class="twinkle2" cx="580" cy="50" r="2.5"/><circle cx="690" cy="90" r="2"/><circle class="twinkle" cx="760" cy="150" r="3"/>
<circle cx="850" cy="70" r="2"/><circle class="twinkle2" cx="920" cy="210" r="2.5"/><circle cx="110" cy="310" r="2"/>
<circle class="twinkle" cx="202" cy="260" r="2"/><circle cx="1070" cy="300" r="2"/><circle class="twinkle2" cx="1130" cy="110" r="3"/>
<circle cx="1145" cy="420" r="2"/><circle class="twinkle" cx="55" cy="420" r="2.5"/><circle cx="165" cy="480" r="1.8"/>
<circle class="twinkle2" cx="340" cy="210" r="2"/><circle cx="880" cy="290" r="1.8"/><circle class="twinkle" cx="1020" cy="380" r="2"/>
<circle cx="45" cy="180" r="2"/><circle class="twinkle2" cx="730" cy="40" r="2"/><circle cx="970" cy="45" r="2"/>
<!-- sparkle stars -->
<path class="twinkle" d="M285 115 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4z"/>
<path class="twinkle2" d="M815 110 l3 8 8 3 -8 3 -3 8 -3 -8 -8 -3 8 -3z"/>
<path class="twinkle" d="M105 355 l3 8 8 3 -8 3 -3 8 -3 -8 -8 -3 8 -3z"/>
</g>
<!-- EARTH -->
<g class="bob">
<circle cx="1022" cy="138" r="80" fill="url(#earthG)" stroke="#93c5fd" stroke-width="3"/>
<path d="M970 95 q28-20 52 4 q18 18-6 32 q-24 12-42-6 q-16-16-4-30z" fill="#22c55e" opacity=".9"/>
<path d="M985 165 q22 18 48 4 q20-12 10-28 q-28 8-48-2 q-18 12-10 26z" fill="#16a34a"/>
<path d="M950 120 q30-14 58 2" stroke="#fff" stroke-width="9" fill="none" stroke-linecap="round" opacity=".7"/>
<path d="M980 70 q34-10 62 8" stroke="#fff" stroke-width="7" fill="none" stroke-linecap="round" opacity=".55"/>
<circle cx="1022" cy="138" r="80" fill="none" stroke="#fff" stroke-opacity=".15" stroke-width="10"/>
</g>
<!-- little satellite -->
<g transform="translate(868 118) rotate(-18)">
<rect x="-14" y="-8" width="28" height="16" rx="4" fill="#facc15" stroke="#a16207"/>
<rect x="-38" y="-12" width="20" height="24" rx="3" fill="#38bdf8"/><rect x="18" y="-12" width="20" height="24" rx="3" fill="#38bdf8"/>
<line x1="0" y1="8" x2="0" y2="20" stroke="#cbd5e1" stroke-width="3"/><circle cx="0" cy="24" r="5" fill="#ef4444"/>
</g>
<!-- TITLE -->
<text class="title" x="38" y="72" font-size="36" fill="#ffffff">ASTRONAUT CAT</text>
<text x="40" y="100" font-size="15" fill="#93c5fd" font-family="Arial,sans-serif" font-weight="700" letter-spacing="3">SKATEBOARDING ON THE MOON ★</text>
<!-- MOON SURFACE -->
<path d="M0 602 Q190 560 380 588 Q580 618 780 590 Q980 562 1200 600 L1200 750 L0 750 Z" fill="url(#moon)"/>
<path d="M0 652 Q300 625 600 650 Q900 672 1200 648 L1200 750 L0 750 Z" fill="#94a3b8" opacity=".55"/>
<g fill="#64748b" opacity=".35">
<ellipse cx="180" cy="675" rx="90" ry="16"/><ellipse cx="430" cy="705" rx="70" ry="12"/><ellipse cx="880" cy="682" rx="110" ry="18"/>
<ellipse cx="1080" cy="712" rx="64" ry="11"/><ellipse cx="660" cy="720" rx="55" ry="9"/>
</g>
<g fill="#475569" opacity=".25">
<ellipse cx="180" cy="670" rx="62" ry="10"/><ellipse cx="880" cy="677" rx="76" ry="11"/><ellipse cx="430" cy="700" rx="44" ry="7"/>
</g>
<!-- scattered rocks -->
<g fill="#cbd5e1" stroke="#94a3b8"><path d="M120 620 l22-10 16 12-8 14-24 2z"/><path d="M920 630 l20-8 14 10-6 12-22 0z"/><path d="M760 655 l14-6 10 8-6 10-16-2z"/></g>
<!-- shadow -->
<ellipse cx="600" cy="622" rx="285" ry="18" fill="#0f172a" opacity=".28" filter="url(#soft)"/>
<!-- moon dust behind board -->
<g fill="#e2e8f0" opacity=".75">
<circle cx="340" cy="590" r="13"/><circle cx="315" cy="605" r="9"/><circle cx="365" cy="610" r="7"/><circle cx="295" cy="585" r="6"/>
<circle cx="845" cy="605" r="10"/><circle cx="870" cy="590" r="6"/>
</g>
<!-- speed lines -->
<g stroke="#fff" stroke-linecap="round" opacity=".85">
<line x1="190" y1="375" x2="350" y2="375" stroke-width="7"/><line x1="150" y1="440" x2="330" y2="440" stroke-width="9"/>
<line x1="205" y1="500" x2="350" y2="500" stroke-width="6" opacity=".7"/>
</g>
<!-- FLAG -->
<g>
<line x1="975" y1="612" x2="975" y2="495" stroke="#e2e8f0" stroke-width="6" stroke-linecap="round"/>
<path d="M975 500 L1045 512 L1038 548 L975 538 Z" fill="#ef4444" stroke="#991b1b"/>
<text x="985" y="528" font-size="11" fill="#fff" font-weight="900" font-family="Arial">MOON</text>
</g>
<!-- CAT ON SKATEBOARD -->
<g class="floatCat">
<!-- skateboard back wheels / trucks -->
<g transform="rotate(-5 600 575)">
<rect x="425" y="582" width="64" height="14" rx="5" fill="#64748b"/>
<rect x="715" y="582" width="64" height="14" rx="5" fill="#64748b"/>
</g>
<!-- tail -->
<path d="M518 492 C440 522 390 492 418 438 C428 418 450 410 462 422" fill="none" stroke="#f97316" stroke-width="24" stroke-linecap="round"/>
<path d="M418 438 C428 418 450 410 462 422" fill="none" stroke="#9a3412" stroke-width="24" stroke-linecap="round" stroke-dasharray="10 18" opacity=".5"/>
<!-- backpack -->
<rect x="462" y="338" width="76" height="158" rx="26" fill="#ef4444" stroke="#991b1b" stroke-width="3"/>
<rect x="476" y="358" width="48" height="28" rx="8" fill="#fca5a5"/>
<circle cx="489" cy="372" r="6" fill="#fff"/><circle cx="511" cy="372" r="6" fill="#facc15"/>
<rect x="478" y="402" width="44" height="62" rx="8" fill="#f8fafc" opacity=".9"/>
<line x1="500" y1="338" x2="478" y2="282" stroke="#e2e8f0" stroke-width="4" stroke-linecap="round"/>
<circle cx="476" cy="278" r="8" fill="#facc15" stroke="#a16207" stroke-width="2"/>
<circle class="twinkle" cx="476" cy="278" r="16" fill="#facc15" opacity=".25"/>
<!-- legs -->
<path d="M548 482 L482 532 L452 550" fill="none" stroke="#f1f5f9" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M642 488 L712 530 L762 548" fill="none" stroke="#f8fafc" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M548 482 L482 532 L452 550" fill="none" stroke="#cbd5e1" stroke-width="40" stroke-linecap="round" stroke-dasharray="2 90" opacity=".4"/>
<!-- torso suit -->
<path d="M515 378 Q600 342 688 378 L702 498 Q600 548 498 498 Z" fill="url(#suit)" stroke="#cbd5e1" stroke-width="3"/>
<rect x="545" y="430" width="112" height="58" rx="12" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>
<circle cx="568" cy="456" r="9" fill="#ef4444"/><circle cx="596" cy="456" r="9" fill="#22c55e"/><circle cx="624" cy="456" r="9" fill="#38bdf8"/>
<rect x="560" y="470" width="82" height="7" rx="3" fill="#94a3b8"/>
<circle cx="600" cy="410" r="20" fill="#fff" stroke="#fb923c" stroke-width="3"/>
<text x="600" y="416" text-anchor="middle" font-size="18" fill="#f97316">★</text>
<rect x="526" y="480" width="150" height="14" rx="7" fill="#f97316"/>
<!-- arms -->
<path d="M528 402 L458 448" stroke="#f1f5f9" stroke-width="34" stroke-linecap="round"/>
<path d="M676 402 L762 372" stroke="#f8fafc" stroke-width="34" stroke-linecap="round"/>
<circle cx="448" cy="456" r="24" fill="#fff" stroke="#cbd5e1" stroke-width="3"/>
<circle cx="440" cy="448" r="5" fill="#f97316"/><circle cx="456" cy="448" r="5" fill="#f97316"/>
<circle cx="776" cy="368" r="26" fill="#fff" stroke="#cbd5e1" stroke-width="3"/>
<path d="M762 358 q14-10 26 0 M760 374 q16-8 30 2" stroke="#94a3b8" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- collar -->
<ellipse cx="600" cy="372" rx="88" ry="30" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/>
<!-- helmet -->
<circle cx="600" cy="285" r="117" fill="url(#glass)" stroke="#ffffff" stroke-width="7"/>
<circle cx="600" cy="285" r="117" fill="none" stroke="#7dd3fc" stroke-width="2" opacity=".6"/>
<!-- cat head -->
<g>
<path d="M538 248 L536 178 L592 218 Z" fill="#f97316" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"/>
<path d="M662 248 L664 178 L608 218 Z" fill="#f97316" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"/>
<path d="M550 232 L550 196 L578 218 Z" fill="#fda4af"/>
<path d="M650 232 L650 196 L622 218 Z" fill="#fda4af"/>
<circle cx="600" cy="302" r="78" fill="url(#catG)" stroke="#9a3412" stroke-width="3"/>
<!-- stripes -->
<g stroke="#9a3412" stroke-width="5" stroke-linecap="round">
<line x1="582" y1="232" x2="580" y2="254"/><line x1="600" y1="228" x2="600" y2="252"/><line x1="618" y1="232" x2="620" y2="254"/>
<line x1="530" y1="285" x2="546" y2="290"/><line x1="670" y1="285" x2="654" y2="290"/>
</g>
<!-- eyes -->
<ellipse cx="568" cy="300" rx="17" ry="21" fill="#4ade80"/><ellipse cx="632" cy="300" rx="17" ry="21" fill="#4ade80"/>
<ellipse cx="568" cy="302" rx="8" ry="15" fill="#111827"/><ellipse cx="632" cy="302" rx="8" ry="15" fill="#111827"/>
<circle cx="572" cy="293" r="4" fill="#fff"/><circle cx="636" cy="293" r="4" fill="#fff"/>
<!-- nose & mouth -->
<path d="M590 324 L610 324 L600 336 Z" fill="#f472b6" stroke="#be185d" stroke-width="2" stroke-linejoin="round"/>
<path d="M600 336 Q600 346 588 344 M600 336 Q600 346 612 344" stroke="#7c2d12" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- blush + whiskers -->
<circle cx="548" cy="326" r="10" fill="#fb7185" opacity=".45"/><circle cx="652" cy="326" r="10" fill="#fb7185" opacity=".45"/>
<g stroke="#fff" stroke-width="2.5" stroke-linecap="round" opacity=".9">
<line x1="545" y1="322" x2="505" y2="314"/><line x1="546" y1="333" x2="508" y2="336"/>
<line x1="655" y1="322" x2="695" y2="314"/><line x1="654" y1="333" x2="692" y2="336"/>
</g>
</g>
<!-- helmet reflection -->
<ellipse cx="552" cy="210" rx="48" ry="20" fill="#fff" opacity=".4" transform="rotate(-28 552 210)"/>
<ellipse cx="652" cy="195" rx="18" ry="9" fill="#fff" opacity=".5" transform="rotate(-20 652 195)"/>
<path class="twinkle" d="M640 175 l3 7 7 3 -7 3 -3 7 -3 -7 -7 -3 7 -3z" fill="#fff"/>
<!-- boots on board -->
<g transform="rotate(-8 452 552)"><rect x="408" y="536" width="92" height="34" rx="17" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/><rect x="408" y="556" width="92" height="10" rx="5" fill="#94a3b8"/></g>
<g transform="rotate(-5 762 550)"><rect x="718" y="534" width="94" height="34" rx="17" fill="#ffffff" stroke="#94a3b8" stroke-width="3"/><rect x="718" y="554" width="94" height="10" rx="5" fill="#64748b"/></g>
<!-- SKATEBOARD -->
<g transform="rotate(-5 600 575)">
<path d="M368 562 Q600 548 832 562 L832 582 Q600 596 368 582 Z" fill="url(#boardG)" stroke="#0f766e" stroke-width="3"/>
<rect x="382" y="558" width="436" height="9" rx="4" fill="#134e4a" opacity=".85"/>
<text x="600" y="577" text-anchor="middle" font-family="Arial Black,Arial" font-size="13" fill="#fff" letter-spacing="2">MOON CAT ★</text>
<!-- wheels -->
<g>
<circle cx="458" cy="602" r="21" fill="#f8fafc" stroke="#64748b" stroke-width="3"/>
<g class="spin" style="transform-origin:458px 602px"><line x1="458" y1="588" x2="458" y2="616" stroke="#14b8a6" stroke-width="4"/><line x1="444" y1="602" x2="472" y2="602" stroke="#14b8a6" stroke-width="4"/></g>
<circle cx="458" cy="602" r="6" fill="#0f766e"/>
</g>
<g>
<circle cx="742" cy="602" r="21" fill="#f8fafc" stroke="#64748b" stroke-width="3"/>
<g class="spin" style="transform-origin:742px 602px"><line x1="742" y1="588" x2="742" y2="616" stroke="#f97316" stroke-width="4"/><line x1="728" y1="602" x2="756" y2="602" stroke="#f97316" stroke-width="4"/></g>
<circle cx="742" cy="602" r="6" fill="#c2410c"/>
</g>
</g>
</g>
<!-- floating pebbles -->
<g fill="#e2e8f0" stroke="#94a3b8">
<circle class="bob" cx="320" cy="520" r="7"/><circle class="twinkle" cx="900" cy="500" r="5"/><circle cx="880" cy="430" r="4"/>
</g>
</svg>
</body>
</html>
```