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: 29.2 s
Cost: $0.0077
Output tokens: 15,280
Spent thinking: 8,076 tokens
Speed: 571.6 tok/s
Console errors: 0

First token after: 2.5 s
First visible text after: 21.5 s
Prompt tokens: 365
Code size: 17.9 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: model default
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 · 332 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" role="img" aria-labelledby="title desc">
  <title id="title">Astronaut Cat Skateboarding on the Moon</title>
  <desc id="desc">A cute orange tabby cat in a white spacesuit and bubble helmet doing an ollie on a skateboard across the lunar surface, with Earth and stars in space.</desc>
  <defs>
    <linearGradient id="spaceGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#070b1d"/>
      <stop offset="0.5" stop-color="#131a36"/>
      <stop offset="1" stop-color="#26325e"/>
    </linearGradient>
    <radialGradient id="earthGrad" cx="0.35" cy="0.35" r="0.85">
      <stop offset="0" stop-color="#7dd3fc"/>
      <stop offset="0.55" stop-color="#2563eb"/>
      <stop offset="1" stop-color="#1e3a8a"/>
    </radialGradient>
    <linearGradient id="moonGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#d6dce7"/>
      <stop offset="0.45" stop-color="#9aa3b5"/>
      <stop offset="1" stop-color="#6f7a8f"/>
    </linearGradient>
    <linearGradient id="suitGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="0.6" stop-color="#eef2f7"/>
      <stop offset="1" stop-color="#cbd5e1"/>
    </linearGradient>
    <radialGradient id="glassGrad" cx="0.35" cy="0.3" r="0.85">
      <stop offset="0" stop-color="#ffffff" stop-opacity="0.65"/>
      <stop offset="0.45" stop-color="#bae6fd" stop-opacity="0.22"/>
      <stop offset="1" stop-color="#7dd3fc" stop-opacity="0.08"/>
    </radialGradient>
    <linearGradient id="boardGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#8b5cf6"/>
      <stop offset="0.5" stop-color="#ec4899"/>
      <stop offset="1" stop-color="#06b6d4"/>
    </linearGradient>
    <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="6"/>
    </filter>
    <filter id="soft" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
  </defs>

  <!-- SPACE -->
  <rect x="0" y="0" width="1200" height="800" fill="url(#spaceGrad)"/>

  <!-- STARS -->
  <g fill="#ffffff">
    <circle cx="80" cy="80" r="2.2"/><circle cx="180" cy="60" r="1.8"/><circle cx="320" cy="90" r="2.6"/><circle cx="450" cy="50" r="2"/>
    <circle cx="550" cy="110" r="1.6"/><circle cx="700" cy="70" r="2.3"/><circle cx="850" cy="90" r="1.9"/><circle cx="1100" cy="80" r="2.5"/>
    <circle cx="1150" cy="250" r="2"/><circle cx="60" cy="240" r="1.9"/><circle cx="240" cy="200" r="2.1"/><circle cx="380" cy="170" r="1.6"/>
    <circle cx="760" cy="170" r="2"/><circle cx="880" cy="260" r="1.7"/><circle cx="90" cy="360" r="2"/><circle cx="1120" cy="360" r="1.9"/>
    <circle cx="180" cy="420" r="1.6"/><circle cx="1040" cy="420" r="2.1"/><circle cx="320" cy="300" r="1.6"/><circle cx="690" cy="280" r="1.8"/>
    <circle cx="30" cy="520" r="1.7"/><circle cx="1170" cy="520" r="1.6"/><circle cx="260" cy="130" r="1.5"/><circle cx="920" cy="310" r="1.5"/>
    <circle cx="500" cy="180" r="1.4"/><circle cx="640" cy="140" r="1.5"/><circle cx="80" cy="470" r="1.4"/><circle cx="1080" cy="470" r="1.5"/>
  </g>
  <g stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9">
    <path d="M340 120 L340 138 M331 129 L349 129"/>
    <path d="M820 200 L820 216 M812 208 L828 208"/>
    <path d="M90 300 L90 314 M83 307 L97 307"/>
    <path d="M1120 150 L1120 166 M1112 158 L1128 158"/>
  </g>
  <path d="M950 70 L1085 125" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.75"/>
  <path d="M975 82 L1050 112" stroke="#7dd3fc" stroke-width="2" stroke-linecap="round" opacity="0.6"/>

  <!-- SATURN -->
  <g>
    <ellipse cx="155" cy="185" rx="68" ry="17" fill="none" stroke="#fcd34d" stroke-width="8" opacity="0.85" transform="rotate(-18 155 185)"/>
    <circle cx="155" cy="185" r="35" fill="#fde68a" stroke="#d97706" stroke-width="3"/>
    <path d="M125 175 Q155 188 185 175" fill="none" stroke="#f59e0b" stroke-width="4" opacity="0.7"/>
    <path d="M95 200 Q155 215 215 195" fill="none" stroke="#fcd34d" stroke-width="7" stroke-linecap="round" transform="rotate(-4 155 185)"/>
  </g>

  <!-- EARTH -->
  <g>
    <circle cx="1005" cy="170" r="92" fill="#38bdf8" opacity="0.14"/>
    <circle cx="1005" cy="170" r="86" fill="none" stroke="#7dd3fc" stroke-width="7" opacity="0.35"/>
    <circle cx="1005" cy="170" r="78" fill="url(#earthGrad)" stroke="#bae6fd" stroke-width="3"/>
    <ellipse cx="978" cy="140" rx="28" ry="18" fill="#4ade80" opacity="0.92" transform="rotate(-15 978 140)"/>
    <ellipse cx="1032" cy="195" rx="30" ry="19" fill="#22c55e" opacity="0.9" transform="rotate(12 1032 195)"/>
    <ellipse cx="992" cy="208" rx="16" ry="10" fill="#4ade80" opacity="0.85"/>
    <ellipse cx="962" cy="118" rx="30" ry="9" fill="#ffffff" opacity="0.8"/>
    <ellipse cx="1022" cy="162" rx="36" ry="10" fill="#ffffff" opacity="0.75"/>
    <ellipse cx="988" cy="192" rx="23" ry="7" fill="#ffffff" opacity="0.6"/>
  </g>

  <!-- MOON DISTANT MOUNTAINS -->
  <path d="M0 620 L120 570 L220 600 L340 560 L460 605 L580 575 L700 610 L820 565 L940 600 L1060 570 L1200 615 L1200 800 L0 800 Z" fill="#64748b" opacity="0.35"/>

  <!-- MOON SURFACE -->
  <path d="M0 635 Q180 605 360 625 Q540 645 720 620 Q900 595 1080 625 Q1140 635 1200 625 L1200 800 L0 800 Z" fill="url(#moonGrad)"/>
  <path d="M0 700 Q300 675 600 700 Q900 725 1200 690 L1200 800 L0 800 Z" fill="#7f8a9e" opacity="0.45"/>

  <!-- CRATERS -->
  <g>
    <ellipse cx="180" cy="700" rx="85" ry="22" fill="#8b95a8"/>
    <ellipse cx="180" cy="694" rx="60" ry="14" fill="#aeb7c6"/>
    <ellipse cx="1020" cy="710" rx="95" ry="24" fill="#8b95a8"/>
    <ellipse cx="1020" cy="703" rx="68" ry="15" fill="#aeb7c6"/>
    <ellipse cx="620" cy="740" rx="72" ry="16" fill="#8b95a8" opacity="0.85"/>
    <ellipse cx="350" cy="760" rx="52" ry="12" fill="#8b95a8" opacity="0.8"/>
    <ellipse cx="860" cy="770" rx="62" ry="14" fill="#8b95a8" opacity="0.8"/>
    <ellipse cx="90" cy="770" rx="46" ry="11" fill="#8b95a8" opacity="0.8"/>
    <ellipse cx="480" cy="680" rx="36" ry="9" fill="#8b95a8" opacity="0.7"/>
    <ellipse cx="770" cy="690" rx="28" ry="8" fill="#8b95a8" opacity="0.7"/>
  </g>

  <!-- ROCKS -->
  <g fill="#7c8699" stroke="#5b6577" stroke-width="2">
    <polygon points="270,665 305,650 330,668 315,682 280,680"/>
    <polygon points="895,665 925,650 950,668 935,682 905,680"/>
    <polygon points="70,655 95,645 112,660 100,672 78,668"/>
    <polygon points="1080,660 1105,648 1122,662 1110,674 1090,672"/>
  </g>

  <!-- BOARD SHADOW -->
  <ellipse cx="600" cy="698" rx="215" ry="22" fill="#0f172a" opacity="0.28" filter="url(#blur)"/>

  <!-- SPEED LINES -->
  <g stroke="#e2e8f0" stroke-width="6" stroke-linecap="round" opacity="0.55">
    <path d="M260 420 L385 420"/>
    <path d="M230 470 L365 470"/>
    <path d="M280 520 L395 520"/>
    <path d="M300 375 L380 375"/>
  </g>

  <!-- DUST BEHIND -->
  <g fill="#cbd5e1" opacity="0.7">
    <circle cx="425" cy="660" r="18"/>
    <circle cx="382" cy="676" r="12"/>
    <circle cx="462" cy="676" r="10"/>
    <circle cx="345" cy="690" r="8"/>
  </g>

  <!-- TAIL -->
  <g>
    <path d="M515 545 Q430 565 405 518 Q390 482 425 472 Q462 466 468 498" fill="none" stroke="#d97706" stroke-width="30" stroke-linecap="round"/>
    <path d="M515 545 Q430 565 405 518 Q390 482 425 472 Q462 466 468 498" fill="none" stroke="#f59e0b" stroke-width="24" stroke-linecap="round"/>
    <path d="M515 545 Q430 565 405 518 Q390 482 425 472 Q462 466 468 498" fill="none" stroke="#b45309" stroke-width="24" stroke-linecap="round" stroke-dasharray="7 20" opacity="0.45"/>
    <circle cx="468" cy="498" r="16" fill="#f59e0b"/>
  </g>

  <!-- BACKPACK / LIFE SUPPORT -->
  <g>
    <rect x="470" y="390" width="88" height="158" rx="24" fill="#e2e8f0" stroke="#94a3b8" stroke-width="4"/>
    <rect x="486" y="408" width="22" height="104" rx="11" fill="#94a3b8"/>
    <rect x="517" y="408" width="22" height="104" rx="11" fill="#94a3b8"/>
    <rect x="490" y="418" width="7" height="80" rx="3.5" fill="#cbd5e1" opacity="0.8"/>
    <path d="M502 392 L476 338" stroke="#64748b" stroke-width="5" stroke-linecap="round"/>
    <circle cx="473" cy="332" r="10" fill="#ef4444" stroke="#ffffff" stroke-width="3"/>
    <circle cx="540" cy="432" r="6" fill="#22c55e"/>
    <circle cx="540" cy="452" r="6" fill="#facc15"/>
  </g>

  <!-- SKATEBOARD -->
  <g transform="rotate(-12 600 620)">
    <rect x="425" y="605" width="350" height="21" rx="11" fill="#111827" stroke="#000000" stroke-width="2"/>
    <rect x="425" y="620" width="350" height="6" fill="url(#boardGrad)"/>
    <rect x="425" y="608" width="350" height="4" fill="#334155"/>
    <circle cx="600" cy="615" r="9" fill="#facc15"/>
    <polygon points="600,607 602,613 608,613 603,617 605,623 600,619 595,623 597,617 592,613 598,613" fill="#111827"/>
    <rect x="465" y="626" width="28" height="10" rx="3" fill="#94a3b8"/>
    <rect x="707" y="626" width="28" height="10" rx="3" fill="#94a3b8"/>
    <circle cx="479" cy="647" r="19" fill="#f8fafc" stroke="#94a3b8" stroke-width="4"/>
    <circle cx="479" cy="647" r="7" fill="#64748b"/>
    <circle cx="721" cy="647" r="19" fill="#f8fafc" stroke="#94a3b8" stroke-width="4"/>
    <circle cx="721" cy="647" r="7" fill="#64748b"/>
    <path d="M455 647 A24 24 0 0 1 479 623" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6" opacity="0.8"/>
    <path d="M697 647 A24 24 0 0 1 721 623" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6" opacity="0.8"/>
  </g>

  <!-- LEGS -->
  <g fill="none" stroke-linecap="round">
    <path d="M565 560 Q545 595 535 620" stroke="#cbd5e1" stroke-width="52"/>
    <path d="M565 560 Q545 595 535 620" stroke="#f8fafc" stroke-width="42"/>
    <path d="M640 560 Q685 580 715 565" stroke="#cbd5e1" stroke-width="52"/>
    <path d="M640 560 Q685 580 715 565" stroke="#f8fafc" stroke-width="42"/>
  </g>
  <!-- BOOTS -->
  <g>
    <ellipse cx="530" cy="630" rx="38" ry="17" fill="#475569" stroke="#1e293b" stroke-width="3" transform="rotate(-8 530 630)"/>
    <ellipse cx="505" cy="627" rx="13" ry="10" fill="#64748b" transform="rotate(-8 505 627)"/>
    <ellipse cx="730" cy="560" rx="36" ry="16" fill="#475569" stroke="#1e293b" stroke-width="3" transform="rotate(18 730 560)"/>
    <ellipse cx="755" cy="567" rx="12" ry="9" fill="#64748b" transform="rotate(18 755 567)"/>
  </g>

  <!-- LEFT ARM (behind torso) -->
  <g fill="none" stroke-linecap="round">
    <path d="M520 470 Q470 485 435 510" stroke="#cbd5e1" stroke-width="48"/>
    <path d="M520 470 Q470 485 435 510" stroke="#f8fafc" stroke-width="38"/>
  </g>
  <g>
    <circle cx="428" cy="515" r="27" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/>
    <ellipse cx="446" cy="500" rx="10" ry="14" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" transform="rotate(30 446 500)"/>
    <path d="M415 505 Q428 512 442 508" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/>
  </g>

  <!-- TORSO / SUIT -->
  <ellipse cx="600" cy="500" rx="108" ry="98" fill="url(#suitGrad)" stroke="#cbd5e1" stroke-width="4"/>
  <ellipse cx="600" cy="520" rx="68" ry="58" fill="#f1f5f9" opacity="0.95"/>

  <!-- BELT -->
  <path d="M505 545 Q600 575 695 545" fill="none" stroke="#94a3b8" stroke-width="12" stroke-linecap="round"/>
  <rect x="585" y="550" width="30" height="18" rx="4" fill="#facc15" stroke="#a16207" stroke-width="2"/>

  <!-- CHEST PANEL -->
  <g>
    <rect x="565" y="455" width="70" height="46" rx="10" fill="#1e293b" stroke="#475569" stroke-width="3"/>
    <rect x="575" y="465" width="30" height="16" rx="3" fill="#38bdf8"/>
    <circle cx="621" cy="470" r="5" fill="#ef4444"/>
    <circle cx="621" cy="488" r="5" fill="#22c55e"/>
    <circle cx="575" cy="490" r="4" fill="#facc15"/>
  </g>
  <!-- PATCH -->
  <g>
    <circle cx="665" cy="475" r="17" fill="#ffffff" stroke="#cbd5e1" stroke-width="2"/>
    <circle cx="665" cy="475" r="13" fill="#3b82f6"/>
    <polygon points="665,467 667,473 673,473 668,477 670,483 665,479 660,483 662,477 657,473 663,473" fill="#ffffff"/>
  </g>
  <!-- NAME TAG -->
  <g>
    <rect x="560" y="515" width="80" height="16" rx="4" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5"/>
    <text x="600" y="527" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="9" font-weight="bold" fill="#334155" letter-spacing="1">WHISKERS</text>
  </g>

  <!-- NECK RING -->
  <ellipse cx="600" cy="425" rx="75" ry="20" fill="#94a3b8" stroke="#64748b" stroke-width="3"/>
  <ellipse cx="600" cy="424" rx="58" ry="13" fill="#475569"/>

  <!-- RIGHT ARM (front) -->
  <g fill="none" stroke-linecap="round">
    <path d="M685 470 Q735 480 770 450" stroke="#cbd5e1" stroke-width="48"/>
    <path d="M685 470 Q735 480 770 450" stroke="#f8fafc" stroke-width="38"/>
  </g>
  <g>
    <circle cx="778" cy="445" r="27" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/>
    <ellipse cx="760" cy="430" rx="10" ry="14" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" transform="rotate(-25 760 430)"/>
    <path d="M765 438 Q778 445 792 440" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/>
  </g>

  <!-- OXYGEN HOSE -->
  <path d="M495 338 Q470 410 550 460" fill="none" stroke="#ef4444" stroke-width="7" stroke-linecap="round"/>
  <path d="M495 338 Q470 410 550 460" fill="none" stroke="#fca5a5" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="4 8"/>

  <!-- CAT HEAD -->
  <g>
    <!-- Ears -->
    <polygon points="540,285 545,210 595,255" fill="#f59e0b" stroke="#d97706" stroke-width="3" stroke-linejoin="round"/>
    <polygon points="660,285 655,210 605,255" fill="#f59e0b" stroke="#d97706" stroke-width="3" stroke-linejoin="round"/>
    <polygon points="552,268 555,228 582,255" fill="#fda4af"/>
    <polygon points="648,268 645,228 618,255" fill="#fda4af"/>
    <!-- Head -->
    <ellipse cx="600" cy="325" rx="80" ry="72" fill="#f9a03f" stroke="#d97706" stroke-width="3"/>
    <!-- Cheek tufts -->
    <polygon points="525,340 503,355 525,365" fill="#f9a03f" stroke="#d97706" stroke-width="2" stroke-linejoin="round"/>
    <polygon points="675,340 697,355 675,365" fill="#f9a03f" stroke="#d97706" stroke-width="2" stroke-linejoin="round"/>
    <!-- Forehead stripes -->
    <g stroke="#b45309" stroke-width="4" stroke-linecap="round">
      <path d="M585 258 L585 275"/>
      <path d="M600 255 L600 272"/>
      <path d="M615 258 L615 275"/>
    </g>
    <!-- Blush -->
    <ellipse cx="545" cy="360" rx="14" ry="7" fill="#fb923c" opacity="0.65"/>
    <ellipse cx="655" cy="360" rx="14" ry="7" fill="#fb923c" opacity="0.65"/>
    <!-- Eyes -->
    <ellipse cx="565" cy="330" rx="15" ry="20" fill="#111827"/>
    <ellipse cx="635" cy="330" rx="15" ry="20" fill="#111827"/>
    <circle cx="570" cy="322" r="5" fill="#ffffff"/>
    <circle cx="560" cy="338" r="3" fill="#ffffff" opacity="0.9"/>
    <circle cx="640" cy="322" r="5" fill="#ffffff"/>
    <circle cx="630" cy="338" r="3" fill="#ffffff" opacity="0.9"/>
    <!-- Nose & Mouth -->
    <path d="M590 355 L610 355 L600 368 Z" fill="#f472b6" stroke="#be185d" stroke-width="2" stroke-linejoin="round"/>
    <path d="M582 374 Q591 384 600 374 Q609 384 618 374" fill="none" stroke="#78350f" stroke-width="3" stroke-linecap="round"/>
    <ellipse cx="600" cy="386" rx="10" ry="7" fill="#f472b6" stroke="#be185d" stroke-width="1.5"/>
    <!-- Whiskers -->
    <g stroke="#78350f" stroke-width="2.5" stroke-linecap="round" opacity="0.7">
      <path d="M535 360 L495 355"/>
      <path d="M535 370 L498 375"/>
      <path d="M540 380 L505 392"/>
      <path d="M665 360 L705 355"/>
      <path d="M665 370 L702 375"/>
      <path d="M660 380 L695 392"/>
    </g>
  </g>

  <!-- HELMET -->
  <g>
    <circle cx="600" cy="315" r="108" fill="url(#glassGrad)"/>
    <circle cx="600" cy="315" r="115" fill="#bae6fd" opacity="0.12" stroke="#e0f2fe" stroke-width="5"/>
    <circle cx="490" cy="325" r="20" fill="#94a3b8" stroke="#64748b" stroke-width="3"/>
    <circle cx="490" cy="325" r="8" fill="#64748b"/>
    <circle cx="710" cy="325" r="20" fill="#94a3b8" stroke="#64748b" stroke-width="3"/>
    <circle cx="710" cy="325" r="8" fill="#64748b"/>
    <ellipse cx="550" cy="245" rx="42" ry="16" fill="#ffffff" opacity="0.5" transform="rotate(-28 550 245)"/>
    <ellipse cx="660" cy="260" rx="18" ry="9" fill="#ffffff" opacity="0.4" transform="rotate(-28 660 260)"/>
    <circle cx="625" cy="225" r="8" fill="#ffffff" opacity="0.6"/>
    <path d="M672 222 L674 230 L682 232 L674 234 L672 242 L670 234 L662 232 L670 230 Z" fill="#ffffff" opacity="0.9"/>
  </g>

  <!-- DUST FRONT -->
  <g fill="#e2e8f0" opacity="0.85">
    <ellipse cx="470" cy="672" rx="16" ry="8"/>
    <ellipse cx="525" cy="682" rx="11" ry="6"/>
    <ellipse cx="705" cy="672" rx="13" ry="7"/>
    <ellipse cx="390" cy="700" rx="20" ry="7" opacity="0.6"/>
    <ellipse cx="790" cy="700" rx="18" ry="6" opacity="0.6"/>
  </g>
  <g fill="#cbd5e1">
    <circle cx="485" cy="665" r="4"/><circle cx="515" cy="670" r="3"/><circle cx="720" cy="665" r="4"/><circle cx="750" cy="675" r="3"/>
  </g>

  <!-- SPARKLES AROUND BOARD -->
  <g fill="#fde047" stroke="#f59e0b" stroke-width="1.5">
    <polygon points="410,575 413,585 423,588 413,591 410,601 407,591 397,588 407,585"/>
    <polygon points="805,595 808,605 818,608 808,611 805,621 802,611 792,608 802,605"/>
    <polygon points="795,515 798,525 808,528 798,531 795,541 792,531 782,528 792,525"/>
  </g>

  <!-- FOREGROUND CRATER EDGE -->
  <path d="M0 762 Q300 738 600 762 Q900 786 1200 752 L1200 800 L0 800 Z" fill="#7f8a9e" opacity="0.55"/>

  <!-- TITLE -->
  <g font-family="'Arial Black', Arial, Helvetica, sans-serif">
    <text x="42" y="64" font-size="38" font-weight="900" fill="#ffffff" letter-spacing="2">ASTRO CAT</text>
    <text x="44" y="92" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="700" fill="#7dd3fc" letter-spacing="4">SKATEBOARDING ON THE MOON</text>
    <rect x="42" y="104" width="190" height="5" rx="2.5" fill="#f472b6"/>
    <circle cx="250" cy="62" r="5" fill="#f472b6"/>
    <circle cx="262" cy="50" r="4" fill="#f9a03f"/>
    <circle cx="274" cy="62" r="5" fill="#7dd3fc"/>
  </g>
</svg>

Reasoning trace (8,076 tokens)

Evaluating SVG output format and content constraints for a self-contained web demo.Extending the SVG layout with coordinates, gradients, and character pose details.Adding feline pose, motion effects, and SVG filters while finalizing the standalone code block.Extending the SVG with tail, skateboard, lunar terrain, and UI details while ordering layers.Refining SVG layering and adding facial features, stars, craters, and styling details.Adjusting helmet reflections, torso and limb paths, and skateboard rotation for the ollie pose.Composing the final SVG with gradients, filters, and layered elements while keeping the viewBox responsive.Finalizing SVG element ordering and coordinate placement for responsive layout.Adding stylized motion effects, backpack details, and board and limb geometry with fills and strokes.