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
- 9.0 s
- Cost
- $0.0023
- Output tokens
- 4,614
- Spent thinking
- 45 tokens
- Speed
- 634.3 tok/s
- Console errors
- 0
- First token after
- 1.7 s
- First visible text after
- 1.7 s
- Prompt tokens
- 365
- Code size
- 12.6 KB
- Finish reason
- stop
- Served by
- Meta
- Model id
meta/muse-ember- Reasoning sent
{"effort":"minimal"}- 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 · 188 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}
body{background:#030712;display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}
.wrap{width:min(1100px,96vw);height:min(760px,96vh);display:flex;flex-direction:column;gap:10px}
.card{background:#0b1026;border:1px solid #26306b;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset;flex:1;display:flex;flex-direction:column}
.top{padding:14px 18px 8px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.title{color:#fff;font-weight:900;letter-spacing:.02em;font-size:clamp(18px,3vw,26px)}
.title span{color:#facc15}
.sub{color:#a5b4fc;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-top:3px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{background:#131a3a;border:1px solid #2e3a7a;color:#dbeafe;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800}
.badge b{color:#facc15}
svg{width:100%;flex:1;display:block;min-height:0}
.bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px 14px;color:#94a3b8;font-size:12px;flex-wrap:wrap}
.bottom strong{color:#e2e8f0}
button{border:0;background:#facc15;color:#111827;font-weight:900;padding:9px 14px;border-radius:999px;cursor:pointer;box-shadow:0 6px 18px rgba(250,204,21,.35)}
button:hover{transform:translateY(-1px)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes roll{0%{transform:translateX(0)}100%{transform:translateX(-420px)}}
@keyframes bounceCat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes flag{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}}
@keyframes drift{0%{transform:translateX(0)}100%{transform:translateX(-240px)}}
.stars{animation:twinkle 2.2s infinite ease-in-out}
.stars2{animation:twinkle 3s infinite ease-in-out}
.catGroup{animation:bounceCat 1.1s infinite ease-in-out;transform-origin:320px 340px}
.boardGroup{animation:bounceCat 1.1s infinite ease-in-out;transform-origin:320px 430px}
.earth{animation:floaty 5s infinite ease-in-out}
.flag{animation:flag 2s infinite ease-in-out;transform-origin:860px 400px}
@media(max-width:640px){.top{padding:10px 12px 4px}.bottom{padding:8px 12px 10px}}
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<div class="top">
<div>
<div class="title">🐱 COSMIC CAT <span>ON THE MOON</span></div>
<div class="sub">Astronaut cat • Skateboard • Lunar adventure</div>
</div>
<div class="badges"><div class="badge">⭐ <b>4.9</b> MOON RATING</div><div class="badge">🛹 <b>OLLIE</b> READY</div><div class="badge">🌙 <b>LOW GRAVITY</b></div></div>
</div>
<svg viewBox="0 0 960 560" role="img" aria-label="Astronaut cat skateboarding on the moon">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#050816"/><stop offset="55%" stop-color="#111a3d"/><stop offset="100%" stop-color="#1e2a5a"/>
</linearGradient>
<linearGradient id="moonG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f8fafc"/><stop offset="45%" stop-color="#dbe3ef"/><stop offset="100%" stop-color="#94a3b8"/>
</linearGradient>
<radialGradient id="earthG" cx="35%" cy="30%" r="80%">
<stop offset="0%" stop-color="#7dd3fc"/><stop offset="45%" stop-color="#38bdf8"/><stop offset="100%" stop-color="#1d4ed8"/>
</radialGradient>
<radialGradient id="helmet" cx="38%" cy="28%" r="75%">
<stop offset="0%" stop-color="#ffffff" stop-opacity=".95"/><stop offset="35%" stop-color="#bae6fd" stop-opacity=".45"/><stop offset="100%" stop-color="#93c5fd" stop-opacity=".25"/>
</radialGradient>
<linearGradient id="board" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#facc15"/><stop offset="55%" stop-color="#f97316"/><stop offset="100%" stop-color="#ef4444"/></linearGradient>
<filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="6"/></filter>
</defs>
<!-- background -->
<rect width="960" height="560" fill="url(#sky)"/>
<!-- stars -->
<g fill="#fff">
<g class="stars"><circle cx="70" cy="70" r="3"/><circle cx="180" cy="130" r="2.2"/><circle cx="300" cy="60" r="2.6"/><circle cx="520" cy="90" r="2"/><circle cx="700" cy="55" r="3"/><circle cx="880" cy="110" r="2.4"/><circle cx="120" cy="210" r="1.8"/></g>
<g class="stars2"><circle cx="240" cy="190" r="1.7"/><circle cx="420" cy="160" r="2.2"/><circle cx="600" cy="140" r="1.8"/><circle cx="790" cy="190" r="2.5"/><circle cx="910" cy="250" r="1.7"/><circle cx="40" cy="280" r="1.6"/><circle cx="660" cy="260" r="1.5"/></g>
<path d="M140 90 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4z" fill="#fde68a"/>
<path d="M740 120 l3 8 8 3 -8 3 -3 8 -3 -8 -8 -3 8 -3z" fill="#fde68a"/>
<path d="M470 70 l3 7 7 3 -7 3 -3 7 -3 -7 -7 -3 7 -3z" fill="#fff"/>
</g>
<!-- Earth -->
<g class="earth">
<circle cx="815" cy="105" r="52" fill="url(#earthG)"/>
<path d="M790 78 q18 -14 34 2 q-6 14 -18 10 q-14 12 -20 -2z" fill="#22c55e" opacity=".9"/>
<path d="M812 112 q16 4 12 18 q-14 8 -22 -4 q4 -14 10 -14z" fill="#22c55e" opacity=".85"/>
<ellipse cx="800" cy="92" rx="34" ry="12" fill="#fff" opacity=".28" transform="rotate(-18 800 92)"/>
<circle cx="815" cy="105" r="52" fill="none" stroke="#7dd3fc" stroke-width="3" opacity=".5"/>
</g>
<!-- distant hills -->
<path d="M0 380 Q160 335 330 372 T640 360 T960 385 L960 560 L0 560Z" fill="#1e293b" opacity=".95"/>
<path d="M0 410 Q220 375 430 405 T960 420 L960 560 L0 560Z" fill="#334155"/>
<!-- moon surface -->
<path d="M0 455 Q240 425 480 448 Q720 470 960 448 L960 560 L0 560Z" fill="url(#moonG)"/>
<g fill="#64748b" opacity=".35">
<ellipse cx="120" cy="495" rx="52" ry="12"/><ellipse cx="360" cy="520" rx="70" ry="14"/><ellipse cx="610" cy="500" rx="46" ry="10"/><ellipse cx="845" cy="525" rx="64" ry="13"/>
<circle cx="200" cy="480" r="16" fill="#94a3b8"/><circle cx="540" cy="485" r="12" fill="#94a3b8"/><circle cx="730" cy="470" r="18" fill="#94a3b8"/>
</g>
<g fill="#cbd5e1"><circle cx="90" cy="470" r="5"/><circle cx="300" cy="490" r="4"/><circle cx="480" cy="475" r="5"/><circle cx="680" cy="495" r="4"/><circle cx="900" cy="480" r="5"/></g>
<!-- flag -->
<g>
<rect x="858" y="395" width="6" height="72" rx="3" fill="#e2e8f0"/>
<g class="flag"><path d="M864 398 L912 408 L864 424Z" fill="#ef4444"/><circle cx="882" cy="410" r="6" fill="#fff"/><text x="882" y="414" text-anchor="middle" font-size="9" font-weight="900" fill="#ef4444">★</text></g>
<circle cx="861" cy="395" r="6" fill="#facc15"/>
</g>
<!-- craters + rocks -->
<g fill="#94a3b8"><ellipse cx="150" cy="435" rx="28" ry="10"/><ellipse cx="760" cy="440" rx="34" ry="11"/></g>
<path d="M95 445 l18 -14 16 14z" fill="#475569"/><path d="M770 450 l22 -16 18 16z" fill="#475569"/>
<!-- shadow -->
<ellipse cx="325" cy="478" rx="120" ry="16" fill="#0f172a" opacity=".35" filter="url(#soft)"/>
<!-- skateboard -->
<g class="boardGroup">
<path d="M170 438 Q320 420 470 438 Q485 442 470 452 Q320 468 170 452 Q155 448 170 438Z" fill="url(#board)" stroke="#7c2d12" stroke-width="3"/>
<rect x="200" y="428" width="240" height="10" rx="5" fill="#111827" opacity=".18"/>
<g><circle cx="228" cy="462" r="18" fill="#111827"/><circle cx="228" cy="462" r="8" fill="#facc15"/><circle cx="412" cy="462" r="18" fill="#111827"/><circle cx="412" cy="462" r="8" fill="#facc15"/></g>
<text x="320" y="445" text-anchor="middle" font-weight="900" font-size="13" fill="#fff" letter-spacing="2">STAR PAWS</text>
</g>
<!-- CAT ASTRONAUT -->
<g class="catGroup">
<!-- tail -->
<path d="M255 360 Q180 350 165 390 Q195 395 220 375" fill="#f97316" stroke="#9a3412" stroke-width="3"/>
<!-- legs / suit -->
<path d="M285 370 L245 432 L275 442 L315 385Z" fill="#f8fafc" stroke="#94a3b8" stroke-width="3"/>
<path d="M350 375 L395 430 L370 445 L330 390Z" fill="#f8fafc" stroke="#94a3b8" stroke-width="3"/>
<ellipse cx="250" cy="440" rx="28" ry="12" fill="#111827"/><ellipse cx="385" cy="442" rx="30" ry="12" fill="#111827"/>
<!-- body suit -->
<rect x="260" y="300" width="120" height="95" rx="38" fill="#ffffff" stroke="#cbd5e1" stroke-width="3"/>
<rect x="292" y="322" width="56" height="38" rx="10" fill="#1e293b"/>
<circle cx="308" cy="336" r="6" fill="#22c55e"/><circle cx="330" cy="336" r="6" fill="#38bdf8"/><circle cx="319" cy="349" r="5" fill="#facc15"/>
<rect x="275" y="308" width="90" height="10" rx="5" fill="#f97316"/>
<!-- arms -->
<path d="M268 320 Q205 345 195 385" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round"/>
<path d="M372 318 Q430 335 445 370" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round"/>
<circle cx="195" cy="388" r="15" fill="#f97316" stroke="#9a3412" stroke-width="2"/>
<circle cx="448" cy="372" r="15" fill="#f97316" stroke="#9a3412" stroke-width="2"/>
<!-- head -->
<circle cx="320" cy="248" r="72" fill="#f97316" stroke="#9a3412" stroke-width="3"/>
<!-- ears -->
<path d="M268 205 L245 150 L295 180Z" fill="#f97316" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"/>
<path d="M372 205 L395 150 L345 180Z" fill="#f97316" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"/>
<path d="M268 190 L258 165 L282 180Z" fill="#fda4af"/><path d="M372 190 L382 165 L358 180Z" fill="#fda4af"/>
<!-- stripes -->
<path d="M300 185 l8 18 M320 180 l0 20 M340 185 l-8 18" stroke="#9a3412" stroke-width="4" stroke-linecap="round"/>
<!-- face -->
<ellipse cx="292" cy="252" rx="13" ry="16" fill="#111827"/><ellipse cx="348" cy="252" rx="13" ry="16" fill="#111827"/>
<circle cx="297" cy="247" r="4" fill="#fff"/><circle cx="353" cy="247" r="4" fill="#fff"/>
<path d="M314 278 Q320 284 326 278" fill="none" stroke="#111827" stroke-width="3" stroke-linecap="round"/>
<path d="M252 272 L232 268 M252 282 L234 284 M388 272 L408 268 M388 282 L406 284" stroke="#111827" stroke-width="2.5" stroke-linecap="round" opacity=".7"/>
<ellipse cx="270" cy="275" rx="12" ry="7" fill="#fb923c" opacity=".8"/><ellipse cx="370" cy="275" rx="12" ry="7" fill="#fb923c" opacity=".8"/>
<!-- helmet bubble -->
<circle cx="320" cy="248" r="92" fill="url(#helmet)" stroke="#e0f2fe" stroke-width="5"/>
<ellipse cx="282" cy="200" rx="28" ry="14" fill="#fff" opacity=".55" transform="rotate(-24 282 200)"/>
<!-- backpack -->
<rect x="235" y="300" width="34" height="70" rx="12" fill="#cbd5e1" stroke="#94a3b8" stroke-width="3"/>
<rect x="242" y="314" width="20" height="10" rx="4" fill="#facc15"/>
<!-- collar light -->
<circle cx="320" cy="322" r="10" fill="#22c55e" stroke="#fff" stroke-width="3"/>
</g>
<!-- motion lines -->
<g stroke="#e2e8f0" stroke-width="4" stroke-linecap="round" opacity=".8">
<path d="M95 415 h52"/><path d="M70 435 h42"/><path d="M105 455 h36"/>
</g>
<!-- label -->
<g>
<rect x="28" y="28" width="238" height="54" rx="14" fill="#ffffff" opacity=".96"/>
<text x="44" y="52" font-size="22" font-weight="900" fill="#0f172a">MEOW-ZER0</text>
<text x="44" y="71" font-size="11" font-weight="700" fill="#64748b" letter-spacing="1.5">FIRST CAT ON A SKATEBOARD</text>
<circle cx="238" cy="55" r="16" fill="#facc15"/><text x="238" y="60" text-anchor="middle" font-size="16">🐾</text>
</g>
<g>
<rect x="640" y="498" width="292" height="42" rx="21" fill="#0f172a" opacity=".88"/>
<text x="786" y="524" text-anchor="middle" fill="#fff" font-size="14" font-weight="800">“ One small paw for cat-kind ”</text>
</g>
</svg>
<div class="bottom">
<div><strong>Pure SVG illustration</strong> — no images, infinitely scalable</div>
<button onclick="document.querySelector('svg').scrollIntoView({behavior:'smooth',block:'center'})">↺ View artwork</button>
</div>
</div>
</div>
</body>
</html>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}
body{background:#030712;display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}
.wrap{width:min(1100px,96vw);height:min(760px,96vh);display:flex;flex-direction:column;gap:10px}
.card{background:#0b1026;border:1px solid #26306b;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset;flex:1;display:flex;flex-direction:column}
.top{padding:14px 18px 8px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.title{color:#fff;font-weight:900;letter-spacing:.02em;font-size:clamp(18px,3vw,26px)}
.title span{color:#facc15}
.sub{color:#a5b4fc;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-top:3px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{background:#131a3a;border:1px solid #2e3a7a;color:#dbeafe;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800}
.badge b{color:#facc15}
svg{width:100%;flex:1;display:block;min-height:0}
.bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px 14px;color:#94a3b8;font-size:12px;flex-wrap:wrap}
.bottom strong{color:#e2e8f0}
button{border:0;background:#facc15;color:#111827;font-weight:900;padding:9px 14px;border-radius:999px;cursor:pointer;box-shadow:0 6px 18px rgba(250,204,21,.35)}
button:hover{transform:translateY(-1px)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes roll{0%{transform:translateX(0)}100%{transform:translateX(-420px)}}
@keyframes bounceCat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes flag{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}}
@keyframes drift{0%{transform:translateX(0)}100%{transform:translateX(-240px)}}
.stars{animation:twinkle 2.2s infinite ease-in-out}
.stars2{animation:twinkle 3s infinite ease-in-out}
.catGroup{animation:bounceCat 1.1s infinite ease-in-out;transform-origin:320px 340px}
.boardGroup{animation:bounceCat 1.1s infinite ease-in-out;transform-origin:320px 430px}
.earth{animation:floaty 5s infinite ease-in-out}
.flag{animation:flag 2s infinite ease-in-out;transform-origin:860px 400px}
@media(max-width:640px){.top{padding:10px 12px 4px}.bottom{padding:8px 12px 10px}}
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<div class="top">
<div>
<div class="title">🐱 COSMIC CAT <span>ON THE MOON</span></div>
<div class="sub">Astronaut cat • Skateboard • Lunar adventure</div>
</div>
<div class="badges"><div class="badge">⭐ <b>4.9</b> MOON RATING</div><div class="badge">🛹 <b>OLLIE</b> READY</div><div class="badge">🌙 <b>LOW GRAVITY</b></div></div>
</div>
<svg viewBox="0 0 960 560" role="img" aria-label="Astronaut cat skateboarding on the moon">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#050816"/><stop offset="55%" stop-color="#111a3d"/><stop offset="100%" stop-color="#1e2a5a"/>
</linearGradient>
<linearGradient id="moonG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f8fafc"/><stop offset="45%" stop-color="#dbe3ef"/><stop offset="100%" stop-color="#94a3b8"/>
</linearGradient>
<radialGradient id="earthG" cx="35%" cy="30%" r="80%">
<stop offset="0%" stop-color="#7dd3fc"/><stop offset="45%" stop-color="#38bdf8"/><stop offset="100%" stop-color="#1d4ed8"/>
</radialGradient>
<radialGradient id="helmet" cx="38%" cy="28%" r="75%">
<stop offset="0%" stop-color="#ffffff" stop-opacity=".95"/><stop offset="35%" stop-color="#bae6fd" stop-opacity=".45"/><stop offset="100%" stop-color="#93c5fd" stop-opacity=".25"/>
</radialGradient>
<linearGradient id="board" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#facc15"/><stop offset="55%" stop-color="#f97316"/><stop offset="100%" stop-color="#ef4444"/></linearGradient>
<filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="6"/></filter>
</defs>
<!-- background -->
<rect width="960" height="560" fill="url(#sky)"/>
<!-- stars -->
<g fill="#fff">
<g class="stars"><circle cx="70" cy="70" r="3"/><circle cx="180" cy="130" r="2.2"/><circle cx="300" cy="60" r="2.6"/><circle cx="520" cy="90" r="2"/><circle cx="700" cy="55" r="3"/><circle cx="880" cy="110" r="2.4"/><circle cx="120" cy="210" r="1.8"/></g>
<g class="stars2"><circle cx="240" cy="190" r="1.7"/><circle cx="420" cy="160" r="2.2"/><circle cx="600" cy="140" r="1.8"/><circle cx="790" cy="190" r="2.5"/><circle cx="910" cy="250" r="1.7"/><circle cx="40" cy="280" r="1.6"/><circle cx="660" cy="260" r="1.5"/></g>
<path d="M140 90 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4z" fill="#fde68a"/>
<path d="M740 120 l3 8 8 3 -8 3 -3 8 -3 -8 -8 -3 8 -3z" fill="#fde68a"/>
<path d="M470 70 l3 7 7 3 -7 3 -3 7 -3 -7 -7 -3 7 -3z" fill="#fff"/>
</g>
<!-- Earth -->
<g class="earth">
<circle cx="815" cy="105" r="52" fill="url(#earthG)"/>
<path d="M790 78 q18 -14 34 2 q-6 14 -18 10 q-14 12 -20 -2z" fill="#22c55e" opacity=".9"/>
<path d="M812 112 q16 4 12 18 q-14 8 -22 -4 q4 -14 10 -14z" fill="#22c55e" opacity=".85"/>
<ellipse cx="800" cy="92" rx="34" ry="12" fill="#fff" opacity=".28" transform="rotate(-18 800 92)"/>
<circle cx="815" cy="105" r="52" fill="none" stroke="#7dd3fc" stroke-width="3" opacity=".5"/>
</g>
<!-- distant hills -->
<path d="M0 380 Q160 335 330 372 T640 360 T960 385 L960 560 L0 560Z" fill="#1e293b" opacity=".95"/>
<path d="M0 410 Q220 375 430 405 T960 420 L960 560 L0 560Z" fill="#334155"/>
<!-- moon surface -->
<path d="M0 455 Q240 425 480 448 Q720 470 960 448 L960 560 L0 560Z" fill="url(#moonG)"/>
<g fill="#64748b" opacity=".35">
<ellipse cx="120" cy="495" rx="52" ry="12"/><ellipse cx="360" cy="520" rx="70" ry="14"/><ellipse cx="610" cy="500" rx="46" ry="10"/><ellipse cx="845" cy="525" rx="64" ry="13"/>
<circle cx="200" cy="480" r="16" fill="#94a3b8"/><circle cx="540" cy="485" r="12" fill="#94a3b8"/><circle cx="730" cy="470" r="18" fill="#94a3b8"/>
</g>
<g fill="#cbd5e1"><circle cx="90" cy="470" r="5"/><circle cx="300" cy="490" r="4"/><circle cx="480" cy="475" r="5"/><circle cx="680" cy="495" r="4"/><circle cx="900" cy="480" r="5"/></g>
<!-- flag -->
<g>
<rect x="858" y="395" width="6" height="72" rx="3" fill="#e2e8f0"/>
<g class="flag"><path d="M864 398 L912 408 L864 424Z" fill="#ef4444"/><circle cx="882" cy="410" r="6" fill="#fff"/><text x="882" y="414" text-anchor="middle" font-size="9" font-weight="900" fill="#ef4444">★</text></g>
<circle cx="861" cy="395" r="6" fill="#facc15"/>
</g>
<!-- craters + rocks -->
<g fill="#94a3b8"><ellipse cx="150" cy="435" rx="28" ry="10"/><ellipse cx="760" cy="440" rx="34" ry="11"/></g>
<path d="M95 445 l18 -14 16 14z" fill="#475569"/><path d="M770 450 l22 -16 18 16z" fill="#475569"/>
<!-- shadow -->
<ellipse cx="325" cy="478" rx="120" ry="16" fill="#0f172a" opacity=".35" filter="url(#soft)"/>
<!-- skateboard -->
<g class="boardGroup">
<path d="M170 438 Q320 420 470 438 Q485 442 470 452 Q320 468 170 452 Q155 448 170 438Z" fill="url(#board)" stroke="#7c2d12" stroke-width="3"/>
<rect x="200" y="428" width="240" height="10" rx="5" fill="#111827" opacity=".18"/>
<g><circle cx="228" cy="462" r="18" fill="#111827"/><circle cx="228" cy="462" r="8" fill="#facc15"/><circle cx="412" cy="462" r="18" fill="#111827"/><circle cx="412" cy="462" r="8" fill="#facc15"/></g>
<text x="320" y="445" text-anchor="middle" font-weight="900" font-size="13" fill="#fff" letter-spacing="2">STAR PAWS</text>
</g>
<!-- CAT ASTRONAUT -->
<g class="catGroup">
<!-- tail -->
<path d="M255 360 Q180 350 165 390 Q195 395 220 375" fill="#f97316" stroke="#9a3412" stroke-width="3"/>
<!-- legs / suit -->
<path d="M285 370 L245 432 L275 442 L315 385Z" fill="#f8fafc" stroke="#94a3b8" stroke-width="3"/>
<path d="M350 375 L395 430 L370 445 L330 390Z" fill="#f8fafc" stroke="#94a3b8" stroke-width="3"/>
<ellipse cx="250" cy="440" rx="28" ry="12" fill="#111827"/><ellipse cx="385" cy="442" rx="30" ry="12" fill="#111827"/>
<!-- body suit -->
<rect x="260" y="300" width="120" height="95" rx="38" fill="#ffffff" stroke="#cbd5e1" stroke-width="3"/>
<rect x="292" y="322" width="56" height="38" rx="10" fill="#1e293b"/>
<circle cx="308" cy="336" r="6" fill="#22c55e"/><circle cx="330" cy="336" r="6" fill="#38bdf8"/><circle cx="319" cy="349" r="5" fill="#facc15"/>
<rect x="275" y="308" width="90" height="10" rx="5" fill="#f97316"/>
<!-- arms -->
<path d="M268 320 Q205 345 195 385" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round"/>
<path d="M372 318 Q430 335 445 370" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round"/>
<circle cx="195" cy="388" r="15" fill="#f97316" stroke="#9a3412" stroke-width="2"/>
<circle cx="448" cy="372" r="15" fill="#f97316" stroke="#9a3412" stroke-width="2"/>
<!-- head -->
<circle cx="320" cy="248" r="72" fill="#f97316" stroke="#9a3412" stroke-width="3"/>
<!-- ears -->
<path d="M268 205 L245 150 L295 180Z" fill="#f97316" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"/>
<path d="M372 205 L395 150 L345 180Z" fill="#f97316" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"/>
<path d="M268 190 L258 165 L282 180Z" fill="#fda4af"/><path d="M372 190 L382 165 L358 180Z" fill="#fda4af"/>
<!-- stripes -->
<path d="M300 185 l8 18 M320 180 l0 20 M340 185 l-8 18" stroke="#9a3412" stroke-width="4" stroke-linecap="round"/>
<!-- face -->
<ellipse cx="292" cy="252" rx="13" ry="16" fill="#111827"/><ellipse cx="348" cy="252" rx="13" ry="16" fill="#111827"/>
<circle cx="297" cy="247" r="4" fill="#fff"/><circle cx="353" cy="247" r="4" fill="#fff"/>
<path d="M314 278 Q320 284 326 278" fill="none" stroke="#111827" stroke-width="3" stroke-linecap="round"/>
<path d="M252 272 L232 268 M252 282 L234 284 M388 272 L408 268 M388 282 L406 284" stroke="#111827" stroke-width="2.5" stroke-linecap="round" opacity=".7"/>
<ellipse cx="270" cy="275" rx="12" ry="7" fill="#fb923c" opacity=".8"/><ellipse cx="370" cy="275" rx="12" ry="7" fill="#fb923c" opacity=".8"/>
<!-- helmet bubble -->
<circle cx="320" cy="248" r="92" fill="url(#helmet)" stroke="#e0f2fe" stroke-width="5"/>
<ellipse cx="282" cy="200" rx="28" ry="14" fill="#fff" opacity=".55" transform="rotate(-24 282 200)"/>
<!-- backpack -->
<rect x="235" y="300" width="34" height="70" rx="12" fill="#cbd5e1" stroke="#94a3b8" stroke-width="3"/>
<rect x="242" y="314" width="20" height="10" rx="4" fill="#facc15"/>
<!-- collar light -->
<circle cx="320" cy="322" r="10" fill="#22c55e" stroke="#fff" stroke-width="3"/>
</g>
<!-- motion lines -->
<g stroke="#e2e8f0" stroke-width="4" stroke-linecap="round" opacity=".8">
<path d="M95 415 h52"/><path d="M70 435 h42"/><path d="M105 455 h36"/>
</g>
<!-- label -->
<g>
<rect x="28" y="28" width="238" height="54" rx="14" fill="#ffffff" opacity=".96"/>
<text x="44" y="52" font-size="22" font-weight="900" fill="#0f172a">MEOW-ZER0</text>
<text x="44" y="71" font-size="11" font-weight="700" fill="#64748b" letter-spacing="1.5">FIRST CAT ON A SKATEBOARD</text>
<circle cx="238" cy="55" r="16" fill="#facc15"/><text x="238" y="60" text-anchor="middle" font-size="16">🐾</text>
</g>
<g>
<rect x="640" y="498" width="292" height="42" rx="21" fill="#0f172a" opacity=".88"/>
<text x="786" y="524" text-anchor="middle" fill="#fff" font-size="14" font-weight="800">“ One small paw for cat-kind ”</text>
</g>
</svg>
<div class="bottom">
<div><strong>Pure SVG illustration</strong> — no images, infinitely scalable</div>
<button onclick="document.querySelector('svg').scrollIntoView({behavior:'smooth',block:'center'})">↺ View artwork</button>
</div>
</div>
</div>
</body>
</html>
```