Skateboarding astronaut catOne-line

Muse Ember

by MetaReasoningClean

Open in new window

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

How it went

Total time: 43.1 s
Cost: $0.011
Output tokens: 22,053
Spent thinking: 13,977 tokens
Speed: 530.7 tok/s
Console errors: 0

First token after: 1.5 s
First visible text after: 34.4 s
Prompt tokens: 365
Code size: 21.6 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"max"}
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 · 372 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" role="img" aria-label="An astronaut cat skateboarding on the moon">
  <title>Astronaut Cat Skateboarding on the Moon</title>
  <desc>An orange tabby cat in a white astronaut suit and glass helmet rides a colorful skateboard across the cratered lunar surface, with Earth, stars and a flag in space behind him.</desc>

  <defs>
    <linearGradient id="spaceGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#070b1d"/>
      <stop offset=".45" stop-color="#151c3a"/>
      <stop offset="1" stop-color="#2b2354"/>
    </linearGradient>
    <radialGradient id="earthGrad" cx="35%" cy="32%" r="75%">
      <stop offset="0" stop-color="#a5f3fc"/>
      <stop offset=".45" stop-color="#38bdf8"/>
      <stop offset=".82" stop-color="#2563eb"/>
      <stop offset="1" stop-color="#1e40af"/>
    </radialGradient>
    <linearGradient id="moonGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f2f4f7"/>
      <stop offset=".42" stop-color="#ccd1da"/>
      <stop offset="1" stop-color="#969eab"/>
    </linearGradient>
    <linearGradient id="boardGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#22d3ee"/>
      <stop offset=".52" stop-color="#818cf8"/>
      <stop offset="1" stop-color="#e879f9"/>
    </linearGradient>
    <radialGradient id="helmetGrad" cx="38%" cy="30%" r="78%">
      <stop offset="0" stop-color="#ffffff" stop-opacity=".95"/>
      <stop offset=".45" stop-color="#bae6fd" stop-opacity=".55"/>
      <stop offset="1" stop-color="#7dd3fc" stop-opacity=".28"/>
    </radialGradient>
    <radialGradient id="catGrad" cx="40%" cy="34%" r="78%">
      <stop offset="0" stop-color="#ffd49a"/>
      <stop offset=".6" stop-color="#ffae42"/>
      <stop offset="1" stop-color="#f59e0b"/>
    </radialGradient>
    <linearGradient id="suitGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="1" stop-color="#e2e8f0"/>
    </linearGradient>

    <filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="6"/>
    </filter>
    <filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
      <feGaussianBlur stdDeviation="14"/>
    </filter>

    <clipPath id="earthClip">
      <circle cx="1052" cy="148" r="92"/>
    </clipPath>

    <path id="spark" d="M0 -12 L2.6 -2.6 L12 0 L2.6 2.6 L0 12 L-2.6 2.6 L-12 0 L-2.6 -2.6 Z"/>

    <g id="craterTile">
      <g>
        <ellipse cx="92" cy="682" rx="60" ry="16" fill="#aeb4bf"/>
        <ellipse cx="92" cy="678" rx="46" ry="11" fill="#8f96a3"/>
        <ellipse cx="92" cy="673" rx="32" ry="7" fill="#c6ccd6"/>
      </g>
      <g>
        <ellipse cx="325" cy="732" rx="86" ry="20" fill="#a3aab6"/>
        <ellipse cx="325" cy="727" rx="66" ry="14" fill="#878f9d"/>
        <ellipse cx="325" cy="722" rx="44" ry="9" fill="#bfc6d2"/>
      </g>
      <g>
        <ellipse cx="532" cy="672" rx="38" ry="10" fill="#b3b9c4"/>
        <ellipse cx="532" cy="669" rx="27" ry="7" fill="#9299a6"/>
      </g>
      <circle cx="205" cy="758" r="6" fill="#8f96a3"/>
      <circle cx="230" cy="770" r="4" fill="#aab0bc"/>
      <circle cx="455" cy="765" r="7" fill="#8f96a3"/>
      <circle cx="610" cy="745" r="5" fill="#aab0bc"/>
      <polygon points="408,762 438,728 472,762" fill="#98a0ad" stroke="#798190" stroke-width="2" stroke-linejoin="round"/>
      <polygon points="575,788 600,762 628,788" fill="#98a0ad" stroke="#798190" stroke-width="2" stroke-linejoin="round"/>
    </g>
  </defs>

  <style>
    text { font-family: 'Arial Black', Arial, Helvetica, sans-serif; }
    .twinkle { animation: tw 1.7s ease-in-out infinite alternate; }
    .twinkle2 { animation: tw 2.3s ease-in-out infinite alternate; animation-delay: .6s; }
    @keyframes tw { from { opacity: .22; } to { opacity: 1; } }
    .floaty { animation: floaty 6s ease-in-out infinite; }
    @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    .bob { animation: bob 1.15s ease-in-out infinite; }
    @keyframes bob { 0%,100% { transform: translateY(0) rotate(-.8deg); } 50% { transform: translateY(-9px) rotate(.9deg); } }
    .spin { animation: spin .5s linear infinite; transform-box: fill-box; transform-origin: center; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .tailWag { animation: tail 1.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 92% 88%; }
    @keyframes tail { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }
    .blinkEyes { animation: blinkE 4.2s infinite; transform-box: fill-box; transform-origin: center; }
    @keyframes blinkE { 0%,91%,100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
    .scrollX { animation: scrollX 4.5s linear infinite; }
    @keyframes scrollX { to { transform: translateX(-640px); } }
    .speed { animation: speed .85s linear infinite; }
    @keyframes speed { 0% { transform: translateX(46px); opacity: 0; } 35% { opacity: .95; } 100% { transform: translateX(-96px); opacity: 0; } }
    .dust { animation: dust 1s linear infinite; transform-box: fill-box; transform-origin: center; }
    @keyframes dust { 0% { transform: translate(0,0) scale(.6); opacity: .75; } 100% { transform: translate(-135px,-28px) scale(1.7); opacity: 0; } }
    .shadowPulse { animation: shadowP 1.15s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
    @keyframes shadowP { 0%,100% { transform: scaleX(1); opacity: .30; } 50% { transform: scaleX(.86); opacity: .21; } }
    .flagWave { animation: flagW 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
    @keyframes flagW { 0%,100% { transform: rotate(0deg) skewY(0deg); } 50% { transform: rotate(-3deg) skewY(2deg); } }
    .shoot { animation: shoot 7s linear infinite; }
    @keyframes shoot { 0% { transform: translate(170px,-80px); opacity: 0; } 4% { opacity: 1; } 16% { transform: translate(-180px,190px); opacity: 0; } 100% { transform: translate(-180px,190px); opacity: 0; } }
    .shine { animation: shine 3s ease-in-out infinite; }
    @keyframes shine { 0%,100% { opacity: .35; } 50% { opacity: .72; } }
    .blinkLight { animation: blight 1.2s steps(2,end) infinite; }
    @keyframes blight { 50% { opacity: .12; } }
    .floatSpark { animation: fSpark 2.2s ease-in-out infinite alternate; }
    @keyframes fSpark { from { transform: translateY(4px); opacity: .35; } to { transform: translateY(-8px); opacity: 1; } }
  </style>

  <!-- SPACE -->
  <rect width="1280" height="800" fill="url(#spaceGrad)"/>
  <ellipse cx="270" cy="120" rx="270" ry="110" fill="#7c3aed" opacity=".13" filter="url(#soft)"/>
  <ellipse cx="980" cy="470" rx="320" ry="150" fill="#2563eb" opacity=".10" filter="url(#soft)"/>

  <g fill="#ffffff">
    <circle cx="62" cy="182" r="2.2" class="twinkle"/>
    <circle cx="128" cy="312" r="1.8" class="twinkle2"/>
    <circle cx="96" cy="452" r="2.6" class="twinkle"/>
    <circle cx="205" cy="248" r="1.6"/>
    <circle cx="318" cy="188" r="2.4" class="twinkle2"/>
    <circle cx="395" cy="96" r="1.8" class="twinkle"/>
    <circle cx="472" cy="238" r="2.1"/>
    <circle cx="560" cy="128" r="1.7" class="twinkle2"/>
    <circle cx="650" cy="72" r="2.4" class="twinkle"/>
    <circle cx="735" cy="198" r="1.8"/>
    <circle cx="812" cy="88" r="2.2" class="twinkle2"/>
    <circle cx="872" cy="252" r="1.6" class="twinkle"/>
    <circle cx="920" cy="368" r="2.3"/>
    <circle cx="1188" cy="72" r="2.1" class="twinkle2"/>
    <circle cx="1228" cy="218" r="1.7" class="twinkle"/>
    <circle cx="1138" cy="452" r="2.2"/>
    <circle cx="44" cy="560" r="2"/>
    <circle cx="348" cy="408" r="1.7" class="twinkle"/>
    <circle cx="1018" cy="540" r="1.8" class="twinkle2"/>
  </g>
  <use href="#spark" transform="translate(882,96) scale(1.15)" fill="#ffffff" class="twinkle"/>
  <use href="#spark" transform="translate(322,214) scale(.85)" fill="#ffffff" class="twinkle2"/>
  <use href="#spark" transform="translate(730,142) scale(.7)" fill="#ffffff" class="twinkle"/>
  <use href="#spark" transform="translate(1178,392) scale(.9)" fill="#ffffff" class="twinkle2"/>
  <use href="#spark" transform="translate(150,392) scale(.65)" fill="#ffffff" class="twinkle"/>

  <g class="shoot">
    <path d="M930 78 L1052 138" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity=".8"/>
    <circle cx="930" cy="78" r="4" fill="#ffffff"/>
  </g>

  <!-- EARTH -->
  <g>
    <g class="floaty">
      <circle cx="1052" cy="148" r="120" fill="#38bdf8" opacity=".16" filter="url(#glow)"/>
      <circle cx="1052" cy="148" r="95" fill="url(#earthGrad)" stroke="#bae6fd" stroke-width="4"/>
      <g clip-path="url(#earthClip)">
        <path d="M988 112 Q1018 84 1052 104 Q1048 140 1016 148 Q984 138 988 112Z" fill="#34d399" opacity=".92"/>
        <path d="M1054 164 Q1090 148 1112 174 Q1098 208 1066 202 Q1044 186 1054 164Z" fill="#34d399" opacity=".92"/>
        <path d="M1018 190 Q1042 178 1058 196 Q1044 214 1024 208 Q1010 202 1018 190Z" fill="#34d399"/>
        <ellipse cx="1022" cy="118" rx="30" ry="9" fill="#ffffff" opacity=".55"/>
        <ellipse cx="1078" cy="186" rx="34" ry="10" fill="#ffffff" opacity=".45"/>
        <ellipse cx="1048" cy="92" rx="24" ry="7" fill="#ffffff" opacity=".5"/>
      </g>
      <ellipse cx="1018" cy="104" rx="27" ry="13" fill="#ffffff" opacity=".42" transform="rotate(-25 1018 104)"/>
    </g>
  </g>

  <!-- RINGED PLANET -->
  <g transform="translate(1172,332)">
    <ellipse rx="50" ry="13" fill="none" stroke="#fcd34d" stroke-width="6" opacity=".7" transform="rotate(-18)"/>
    <circle r="26" fill="#a78bfa" stroke="#ddd6fe" stroke-width="3"/>
    <circle cx="-8" cy="-6" r="5" fill="#8b5cf6"/>
    <circle cx="9" cy="8" r="4" fill="#8b5cf6"/>
    <ellipse rx="50" ry="13" fill="none" stroke="#fde68a" stroke-width="3" opacity=".45" transform="rotate(-18)"/>
  </g>

  <!-- MOON HILLS + SURFACE -->
  <path d="M0 586 Q180 554 360 575 T720 568 T1080 575 T1280 586 L1280 660 L0 660 Z" fill="#828b9a"/>
  <path d="M0 596 Q170 574 340 590 T680 592 T1020 584 T1280 596 L1280 800 L0 800 Z" fill="url(#moonGrad)"/>

  <!-- FLAG -->
  <g transform="translate(188,590)">
    <rect x="-3" y="-108" width="6" height="108" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <circle cy="-112" r="6" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
    <g class="flagWave">
      <path d="M3 -108 Q28 -118 52 -104 Q76 -92 98 -102 L98 -68 Q74 -58 50 -70 Q27 -80 3 -72 Z" fill="#ef4444" stroke="#b91c1c" stroke-width="2" stroke-linejoin="round"/>
      <use href="#spark" transform="translate(42,-88) scale(.75)" fill="#ffffff"/>
    </g>
  </g>

  <!-- SCROLLING CRATERS -->
  <g class="scrollX">
    <use href="#craterTile"/>
    <use href="#craterTile" transform="translate(640,0)"/>
    <use href="#craterTile" transform="translate(1280,0)"/>
  </g>

  <!-- SPEED LINES + DUST -->
  <g stroke="#e0f2fe" stroke-width="6" stroke-linecap="round">
    <line x1="360" y1="330" x2="500" y2="330" class="speed"/>
    <line x1="300" y1="382" x2="482" y2="382" class="speed" style="animation-delay:.28s"/>
    <line x1="382" y1="472" x2="532" y2="472" class="speed" style="animation-delay:.55s"/>
  </g>
  <g fill="#d8dde6">
    <circle cx="508" cy="576" r="10" class="dust"/>
    <circle cx="482" cy="586" r="14" class="dust" style="animation-delay:.33s"/>
    <circle cx="542" cy="588" r="8" class="dust" style="animation-delay:.66s"/>
    <circle cx="462" cy="570" r="7" class="dust" style="animation-delay:.15s"/>
  </g>
  <g fill="#ffffff">
    <circle cx="498" cy="540" r="3" class="floatSpark"/>
    <circle cx="795" cy="552" r="3" class="floatSpark" style="animation-delay:.5s"/>
    <circle cx="720" cy="505" r="2.4" class="floatSpark" style="animation-delay:1s"/>
  </g>

  <!-- ASTRONAUT CAT -->
  <g transform="translate(640,395)">
    <ellipse cx="0" cy="202" rx="178" ry="20" fill="#111827" class="shadowPulse" filter="url(#soft)"/>
    <g class="bob">
      <!-- Tail -->
      <g transform="translate(-52,52)">
        <g class="tailWag">
          <path d="M0 0 C-62 -6 -102 -48 -96 -98 C-93 -124 -76 -138 -58 -130" fill="none" stroke="#ffae42" stroke-width="30" stroke-linecap="round"/>
          <path d="M0 0 C-62 -6 -102 -48 -96 -98 C-93 -124 -76 -138 -58 -130" fill="none" stroke="#d97706" stroke-width="30" stroke-linecap="round" stroke-dasharray="7 22" opacity=".5"/>
          <circle cx="-58" cy="-130" r="16" fill="#ffae42"/>
        </g>
      </g>

      <!-- Backpack -->
      <rect x="-110" y="-84" width="58" height="130" rx="22" fill="#cbd5e1" stroke="#94a3b8" stroke-width="3"/>
      <rect x="-100" y="-64" width="38" height="24" rx="6" fill="#94a3b8"/>
      <circle cx="-81" cy="18" r="11" fill="#f59e0b" stroke="#d97706" stroke-width="3"/>
      <path d="M-82 -84 C-82 -112 -42 -118 -18 -106" fill="none" stroke="#64748b" stroke-width="8" stroke-linecap="round"/>

      <!-- Back arm -->
      <path d="M-56 -50 C-100 -26 -120 6 -110 40" fill="none" stroke="#b8c0cc" stroke-width="40" stroke-linecap="round"/>
      <path d="M-56 -50 C-100 -26 -120 6 -110 40" fill="none" stroke="#f8fafc" stroke-width="32" stroke-linecap="round"/>
      <circle cx="-110" cy="48" r="24" fill="#f8fafc" stroke="#b8c0cc" stroke-width="3"/>
      <circle cx="-110" cy="48" r="13" fill="#ffae42"/>
      <circle cx="-110" cy="52" r="5" fill="#92400e"/>
      <circle cx="-119" cy="42" r="3" fill="#92400e"/>
      <circle cx="-101" cy="42" r="3" fill="#92400e"/>

      <!-- Back leg -->
      <path d="M-28 52 L-78 108 L-72 132" fill="none" stroke="#b8c0cc" stroke-width="42" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M-28 52 L-78 108 L-72 132" fill="none" stroke="#f8fafc" stroke-width="34" stroke-linecap="round" stroke-linejoin="round"/>

      <!-- Skateboard -->
      <g>
        <rect x="-140" y="156" width="50" height="12" rx="4" fill="#94a3b8"/>
        <rect x="90" y="156" width="50" height="12" rx="4" fill="#94a3b8"/>
        <g transform="translate(-115,176)">
          <g class="spin">
            <circle r="20" fill="#f8fafc" stroke="#64748b" stroke-width="4"/>
            <path d="M-16 0 H16 M0 -16 V16 M-11 -11 L11 11 M-11 11 L11 -11" stroke="#94a3b8" stroke-width="3"/>
            <circle r="6" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
          </g>
        </g>
        <g transform="translate(115,176)">
          <g class="spin">
            <circle r="20" fill="#f8fafc" stroke="#64748b" stroke-width="4"/>
            <path d="M-16 0 H16 M0 -16 V16 M-11 -11 L11 11 M-11 11 L11 -11" stroke="#94a3b8" stroke-width="3"/>
            <circle r="6" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
          </g>
        </g>
        <path d="M-178 126 Q-188 106 -162 104 L152 104 Q184 106 174 128 Q166 146 138 146 L-142 146 Q-170 146 -178 126Z" fill="url(#boardGrad)" stroke="#312e81" stroke-width="3" stroke-linejoin="round"/>
        <path d="M-165 132 Q0 143 165 132" fill="none" stroke="#ffffff" stroke-width="4" opacity=".5" stroke-linecap="round"/>
        <use href="#spark" transform="translate(-52,126) scale(1.05)" fill="#ffffff" opacity=".95"/>
        <circle cx="42" cy="126" r="9" fill="#ffffff" opacity=".85"/>
        <circle cx="42" cy="130" r="4" fill="#312e81"/>
      </g>

      <!-- Front leg -->
      <path d="M30 56 L78 104 L102 130" fill="none" stroke="#b8c0cc" stroke-width="42" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M30 56 L78 104 L102 130" fill="none" stroke="#f8fafc" stroke-width="34" stroke-linecap="round" stroke-linejoin="round"/>

      <!-- Boots on board -->
      <g transform="translate(-72,132) rotate(-8)">
        <rect x="-34" y="-14" width="68" height="28" rx="14" fill="#ffffff" stroke="#94a3b8" stroke-width="3"/>
        <rect x="-34" y="6" width="68" height="8" rx="4" fill="#334155"/>
      </g>
      <g transform="translate(102,130) rotate(7)">
        <rect x="-34" y="-14" width="68" height="28" rx="14" fill="#ffffff" stroke="#94a3b8" stroke-width="3"/>
        <rect x="-34" y="6" width="68" height="8" rx="4" fill="#f59e0b"/>
      </g>

      <!-- Torso suit -->
      <rect x="-74" y="-88" width="148" height="158" rx="54" fill="url(#suitGrad)" stroke="#b8c0cc" stroke-width="3"/>
      <ellipse cx="0" cy="-86" rx="60" ry="20" fill="#e2e8f0" stroke="#b8c0cc" stroke-width="3"/>
      <rect x="-44" y="-54" width="88" height="66" rx="14" fill="#1e293b" stroke="#475569" stroke-width="3"/>
      <rect x="-32" y="-44" width="64" height="22" rx="6" fill="#67e8f9"/>
      <circle cx="-22" cy="-6" r="7" fill="#ef4444"/>
      <circle cx="0" cy="-6" r="7" fill="#facc15"/>
      <circle cx="22" cy="-6" r="7" fill="#4ade80"/>
      <g transform="translate(56,-58)">
        <circle r="13" fill="#2563eb" stroke="#ffffff" stroke-width="2"/>
        <use href="#spark" transform="scale(.45)" fill="#ffffff"/>
      </g>
      <rect x="-70" y="36" width="140" height="20" rx="9" fill="#f59e0b" stroke="#d97706" stroke-width="3"/>
      <rect x="-16" y="40" width="32" height="13" rx="4" fill="#fef3c7" stroke="#92400e" stroke-width="2"/>

      <!-- Front arm -->
      <path d="M58 -48 C102 -22 124 12 116 48" fill="none" stroke="#b8c0cc" stroke-width="40" stroke-linecap="round"/>
      <path d="M58 -48 C102 -22 124 12 116 48" fill="none" stroke="#f8fafc" stroke-width="32" stroke-linecap="round"/>
      <circle cx="116" cy="56" r="24" fill="#f8fafc" stroke="#b8c0cc" stroke-width="3"/>
      <circle cx="116" cy="56" r="13" fill="#ffae42"/>
      <circle cx="116" cy="60" r="5" fill="#92400e"/>
      <circle cx="107" cy="50" r="3" fill="#92400e"/>
      <circle cx="125" cy="50" r="3" fill="#92400e"/>

      <!-- Neck -->
      <ellipse cx="0" cy="-92" rx="38" ry="16" fill="#e2e8f0" stroke="#b8c0cc" stroke-width="2"/>

      <!-- Cat head -->
      <path d="M84 -196 C120 -170 122 -128 96 -104" fill="none" stroke="#94a3b8" stroke-width="10" stroke-linecap="round"/>
      <path d="M-62 -202 L-54 -248 L-20 -218 Z" fill="#ffae42" stroke="#d97706" stroke-width="3" stroke-linejoin="round"/>
      <path d="M62 -202 L54 -248 L20 -218 Z" fill="#ffae42" stroke="#d97706" stroke-width="3" stroke-linejoin="round"/>
      <path d="M-52 -214 L-48 -238 L-30 -220 Z" fill="#fda4af"/>
      <path d="M52 -214 L48 -238 L30 -220 Z" fill="#fda4af"/>
      <circle cx="0" cy="-168" r="66" fill="url(#catGrad)" stroke="#d97706" stroke-width="3"/>
      <ellipse cx="0" cy="-140" rx="26" ry="18" fill="#ffe0b3" opacity=".92"/>
      <path d="M-18 -226 L-15 -208 M0 -230 L0 -210 M18 -226 L15 -208" stroke="#d97706" stroke-width="5" stroke-linecap="round"/>
      <g class="blinkEyes">
        <ellipse cx="-26" cy="-176" rx="13" ry="16" fill="#ffffff" stroke="#92400e" stroke-width="2"/>
        <ellipse cx="26" cy="-176" rx="13" ry="16" fill="#ffffff" stroke="#92400e" stroke-width="2"/>
        <circle cx="-21" cy="-176" r="7" fill="#1f2937"/>
        <circle cx="31" cy="-176" r="7" fill="#1f2937"/>
        <circle cx="-23" cy="-180" r="2.6" fill="#ffffff"/>
        <circle cx="29" cy="-180" r="2.6" fill="#ffffff"/>
      </g>
      <path d="M-38 -198 Q-26 -204 -14 -198 M14 -198 Q26 -204 38 -198" fill="none" stroke="#92400e" stroke-width="3" stroke-linecap="round"/>
      <path d="M-8 -155 L8 -155 L0 -145 Z" fill="#ff6b9d" stroke="#be185d" stroke-width="2" stroke-linejoin="round"/>
      <path d="M0 -145 Q-6 -137 -14 -142 M0 -145 Q6 -137 14 -142" fill="none" stroke="#7c2d12" stroke-width="3" stroke-linecap="round"/>
      <ellipse cx="-40" cy="-138" rx="12" ry="7" fill="#fda4af" opacity=".6"/>
      <ellipse cx="40" cy="-138" rx="12" ry="7" fill="#fda4af" opacity=".6"/>
      <g stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity=".95">
        <path d="M-46 -152 L-82 -158 M-46 -144 L-84 -144 M-46 -136 L-80 -128"/>
        <path d="M46 -152 L82 -158 M46 -144 L84 -144 M46 -136 L80 -128"/>
      </g>

      <!-- Helmet glass -->
      <circle cx="0" cy="-168" r="110" fill="url(#helmetGrad)" stroke="#ffffff" stroke-width="13"/>
      <circle cx="0" cy="-168" r="110" fill="none" stroke="#bae6fd" stroke-width="3" opacity=".8"/>
      <path d="M-72 -228 Q-30 -262 22 -250" fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round" class="shine"/>
      <ellipse cx="-58" cy="-226" rx="22" ry="10" fill="#ffffff" opacity=".5" transform="rotate(-32 -58 -226)"/>
      <circle cx="0" cy="-276" r="5" fill="#94a3b8" stroke="#64748b" stroke-width="2"/>
      <circle cx="-80" cy="-200" r="5" fill="#94a3b8" stroke="#64748b" stroke-width="2"/>
      <circle cx="80" cy="-200" r="5" fill="#94a3b8" stroke="#64748b" stroke-width="2"/>
      <circle cx="84" cy="-216" r="6" fill="#ef4444" class="blinkLight"/>
    </g>
  </g>

  <!-- Foreground rocks -->
  <polygon points="28,800 62,752 104,800" fill="#7d8593" stroke="#646d7b" stroke-width="2" stroke-linejoin="round"/>
  <polygon points="1140,800 1178,744 1224,800" fill="#7d8593" stroke="#646d7b" stroke-width="2" stroke-linejoin="round"/>
  <polygon points="1200,800 1228,768 1256,800" fill="#98a0ad" stroke="#798190" stroke-width="2" stroke-linejoin="round"/>

  <!-- TITLE -->
  <g transform="rotate(-2 60 70)">
    <text x="48" y="74" font-size="54" font-weight="900" fill="#ffffff" stroke="#0f172a" stroke-width="6" paint-order="stroke" letter-spacing="1">ASTRO-<tspan fill="#ffb347">CAT</tspan></text>
    <text x="50" y="108" font-size="19" font-weight="700" fill="#cbd5e1" letter-spacing="4">SKATEBOARDING ON THE MOON</text>
    <path d="M52 122 Q180 134 312 120" fill="none" stroke="#f59e0b" stroke-width="5" stroke-linecap="round"/>
  </g>

  <g>
    <rect x="36" y="726" width="238" height="38" rx="19" fill="#0f172a" opacity=".6" stroke="#475569" stroke-width="2"/>
    <circle cx="58" cy="745" r="6" fill="#4ade80"/>
    <text x="74" y="751" font-size="14" font-weight="700" fill="#e2e8f0" letter-spacing="1">O2 OK  •  MOON GRAVITY 1/6g</text>
  </g>

  <rect width="1280" height="800" fill="none" stroke="#ffffff" stroke-opacity=".08" stroke-width="2"/>
</svg>

Reasoning trace (13,977 tokens)

Checking output constraints for a self-contained HTML demo with inline assets and responsive layout.Choosing SVG-only output with inline animation and responsive viewBox.Extending the SVG with animated craters, stars, and dust while defining gradients, filters, and transform origins.Adding animated dust, speed lines, and a scrolling moon surface with craters and a flag.Extending animation layering with nested SVG groups and a seamless scrolling ground pattern.Adjusting cat and board coordinates to align wheels with the ground level.Adding helmet, arms, and facial features while positioning the cat on the board.Extending CSS and SMIL animations for tail, wheels, eyes, and scrolling ground while adding flag, dust, and title elements.Adding wheel reuse, scarf, blinking light, and dust sparkle animations while refining shadow and tilt timing.Drafting SVG structure with gradients, clipPaths, filters, and tiled use elements for scrolling background.