Models 44

Muse Ember

Open in new window

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>
```