Skateboarding astronaut catOne-line

MiniMax M3.1 Flash

by MiniMaxReasoningClean

Open in new window

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

How it went

Total time: 54.0 s
Cost: $0.0076
Output tokens: 12,515
Spent thinking: 4,213 tokens
Speed: 233.7 tok/s
Console errors: 0

First token after: 489 ms
First visible text after: 26.0 s
Prompt tokens: 532
Code size: 21.7 KB
Finish reason: stop
Served by: Nebius
Model id: minimax/minimax-m3.1-flash
Reasoning sent: {"effort":"high"}
Max output: 64,000 tokens
Generated: Nov 11, 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 · 420 lines

Download

<svg xmlns="http://www.wwww3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" role="img" aria-labelledby="ttl dsc">
  <title id="ttl">Astronaut Cat Skateboarding on the Moon</title>
  <desc id="dsc">A cat in a space suit rides a skateboard across the lunar surface, kicking up moon dust, with Earth hanging in a starry black sky.</desc>

  <defs>
    <linearGradient id="space" x1="0" y1="0" x2="0.3" y2="1">
      <stop offset="0%" stop-color="#04060f"/>
      <stop offset="45%" stop-color="#080d1c"/>
      <stop offset="100%" stop-color="#0d1426"/>
    </linearGradient>

    <radialGradient id="earthGrad" cx="0.35" cy="0.3" r="0.85">
      <stop offset="0%" stop-color="#8fd8ff"/>
      <stop offset="45%" stop-color="#2f8fe0"/>
      <stop offset="100%" stop-color="#0b3f86"/>
    </radialGradient>

    <radialGradient id="moonGrad" cx="0.5" cy="0.15" r="0.9">
      <stop offset="0%" stop-color="#e9ecf5"/>
      <stop offset="45%" stop-color="#c3c9da"/>
      <stop offset="100%" stop-color="#8b93ab"/>
    </radialGradient>

    <linearGradient id="moonFar" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#aab2c8"/>
      <stop offset="100%" stop-color="#7e869d"/>
    </linearGradient>

    <linearGradient id="suit" x1="0.2" y1="0" x2="0.9" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="55%" stop-color="#e6e9f2"/>
      <stop offset="100%" stop-color="#b9c0d4"/>
    </linearGradient>

    <linearGradient id="suitDark" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#d3d8e6"/>
      <stop offset="100%" stop-color="#98a0b8"/>
    </linearGradient>

    <radialGradient id="visor" cx="0.35" cy="0.25" r="0.9">
      <stop offset="0%" stop-color="#5fe3ff" stop-opacity="0.85"/>
      <stop offset="40%" stop-color="#1b6f9c" stop-opacity="0.75"/>
      <stop offset="100%" stop-color="#06263f" stop-opacity="0.92"/>
    </radialGradient>

    <radialGradient id="fur" cx="0.4" cy="0.3" r="0.85">
      <stop offset="0%" stop-color="#ffc178"/>
      <stop offset="60%" stop-color="#f0913c"/>
      <stop offset="100%" stop-color="#c96a20"/>
    </radialGradient>

    <linearGradient id="deckGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ff9a5b"/>
      <stop offset="100%" stop-color="#e0563a"/>
    </linearGradient>

    <filter id="soft" x="-60%" y="-60%" width="220%" height="220%">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
    <filter id="softer" x="-80%" y="-80%" width="260%" height="260%">
      <feGaussianBlur stdDeviation="22"/>
    </filter>
    <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
      <feGaussianBlur stdDeviation="4" result="b"/>
      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>

  <!-- ================= SKY ================= -->
  <rect width="1200" height="800" fill="url(#space)"/>

  <!-- stars -->
  <g fill="#ffffff">
    <g opacity="0.95">
      <circle cx="72" cy="60" r="2.4"/><circle cx="150" cy="128" r="1.5"/><circle cx="212" cy="44" r="1.8"/>
      <circle cx="268" cy="176" r="2.1"/><circle cx="330" cy="86" r="1.4"/><circle cx="392" cy="26" r="2.6"/>
      <circle cx="452" cy="150" r="1.6"/><circle cx="520" cy="70" r="1.9"/><circle cx="596" cy="30" r="1.3"/>
      <circle cx="660" cy="120" r="2.2"/><circle cx="722" cy="58" r="1.5"/><circle cx="786" cy="176" r="1.8"/>
      <circle cx="846" cy="42" r="2.5"/><circle cx="912" cy="236" r="1.4"/><circle cx="1108" cy="52" r="1.8"/>
      <circle cx="1156" cy="132" r="2.3"/><circle cx="1084" cy="300" r="1.5"/><circle cx="60" cy="240" r="1.7"/>
      <circle cx="118" cy="356" r="2.1"/><circle cx="24" cy="420" r="1.4"/><circle cx="1040" cy="392" r="1.9"/>
      <circle cx="880" cy="330" r="1.3"/><circle cx="740" cy="286" r="1.7"/><circle cx="352" cy="300" r="1.5"/>
      <circle cx="240" cy="392" r="1.9"/><circle cx="1140" cy="470" r="1.6"/><circle cx="60" cy="520" r="1.8"/>
    </g>
    <g opacity="0.55" fill="#cfe3ff">
      <circle cx="120" cy="22" r="1"/><circle cx="300" cy="240" r="1.1"/><circle cx="430" cy="228" r="1"/>
      <circle cx="612" cy="212" r="1.2"/><circle cx="820" cy="96" r="1"/><circle cx="960" cy="18" r="1.1"/>
      <circle cx="1160" cy="240" r="1"/><circle cx="1064" cy="150" r="1.1"/><circle cx="180" cy="470" r="1"/>
      <circle cx="480" cy="356" r="1.2"/><circle cx="906" cy="470" r="1"/><circle cx="36" cy="150" r="1.1"/>
      <circle cx="690" cy="380" r="1"/><circle cx="1150" cy="560" r="1.1"/><circle cx="40" cy="600" r="1"/>
    </g>
    <!-- twinkling bright stars -->
    <g fill="#ffffff" filter="url(#glow)">
      <circle cx="392" cy="26" r="2.6"><animate attributeName="opacity" values="1;0.25;1" dur="2.6s" repeatCount="indefinite"/></circle>
      <circle cx="846" cy="42" r="2.5"><animate attributeName="opacity" values="0.3;1;0.3" dur="3.4s" repeatCount="indefinite"/></circle>
      <circle cx="1156" cy="132" r="2.3"><animate attributeName="opacity" values="1;0.35;1" dur="2.1s" repeatCount="indefinite"/></circle>
      <circle cx="268" cy="176" r="2.1"><animate attributeName="opacity" values="0.4;1;0.4" dur="4s" repeatCount="indefinite"/></circle>
    </g>
    <!-- four-point sparkle -->
    <g stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" opacity="0.9">
      <path d="M166 92 v18 M157 101 h18"/>
      <path d="M770 140 v16 M762 148 h16"/>
    </g>
  </g>

  <!-- ================= EARTH ================= -->
  <g>
    <circle cx="1012" cy="140" r="82" fill="#3aa0ff" opacity="0.22" filter="url(#softer)"/>
    <circle cx="1012" cy="140" r="70" fill="url(#earthGrad)"/>
    <g clip-path="none">
      <g fill="#59c47a" opacity="0.95">
        <path d="M975 98 q22 -16 44 -4 q20 12 8 30 q-14 20 -36 12 q-18 -10 -16 -38 z"/>
        <path d="M1046 122 q16 -6 22 8 q5 14 -8 18 q-14 4 -18 -8 q-3 -12 4 -18 z"/>
        <path d="M968 156 q18 4 22 20 q3 14 -12 16 q-16 2 -20 -12 q-3 -16 10 -24 z"/>
        <path d="M1030 176 q20 -2 24 16 q2 14 -14 16 q-18 1 -20 -14 q-1 -14 10 -18 z"/>
      </g>
      <g fill="#ffffff" opacity="0.6">
        <ellipse cx="1000" cy="118" rx="26" ry="9" transform="rotate(-18 1000 118)"/>
        <ellipse cx="1036" cy="146" rx="20" ry="7" transform="rotate(12 1036 146)"/>
        <ellipse cx="990" cy="176" rx="16" ry="6" transform="rotate(-8 990 176)"/>
      </g>
      <g fill="#ffffff" opacity="0.25">
        <ellipse cx="980" cy="112" rx="30" ry="22"/>
      </g>
    </g>
    <circle cx="1012" cy="140" r="70" fill="none" stroke="#9fdcff" stroke-width="2" opacity="0.5"/>
    <ellipse cx="984" cy="110" rx="22" ry="14" fill="#ffffff" opacity="0.18"/>
  </g>

  <!-- ================= MOON HORIZON ================= -->
  <path d="M0 560 C 170 528 300 566 470 552 C 660 536 760 578 950 552 C 1070 536 1150 556 1200 546 L1200 800 L0 800 Z" fill="url(#moonFar)" opacity="0.85"/>
  <path d="M0 596 C 200 566 360 606 560 588 C 760 570 940 614 1200 580 L1200 800 L0 800 Z" fill="url(#moonGrad)"/>

  <!-- distant crater rims -->
  <g fill="#8e96ad" opacity="0.55">
    <ellipse cx="150" cy="586" rx="52" ry="12"/>
    <ellipse cx="860" cy="580" rx="64" ry="13"/>
    <ellipse cx="1090" cy="592" rx="40" ry="9"/>
  </g>

  <!-- craters on near ground -->
  <g>
    <g transform="translate(230,700)">
      <ellipse rx="66" ry="20" fill="#7f87a0" opacity="0.55"/>
      <ellipse cy="-4" rx="58" ry="16" fill="#a8b0c6" opacity="0.9"/>
      <ellipse cy="2" rx="50" ry="12" fill="#79819b" opacity="0.7"/>
      <ellipse cy="8" rx="40" ry="7" fill="#6e768f" opacity="0.6"/>
    </g>
    <g transform="translate(880,672)">
      <ellipse rx="84" ry="24" fill="#7f87a0" opacity="0.5"/>
      <ellipse cy="-5" rx="74" ry="19" fill="#adb5ca" opacity="0.9"/>
      <ellipse cy="3" rx="62" ry="14" fill="#79819b" opacity="0.65"/>
    </g>
    <g transform="translate(1080,760)">
      <ellipse rx="70" ry="18" fill="#79819b" opacity="0.5"/>
      <ellipse cy="-4" rx="60" ry="14" fill="#a8b0c6" opacity="0.85"/>
    </g>
    <g transform="translate(430,782)">
      <ellipse rx="56" ry="15" fill="#79819b" opacity="0.45"/>
      <ellipse cy="-4" rx="48" ry="11" fill="#a8b0c6" opacity="0.8"/>
    </g>
    <g transform="translate(1010,616)">
      <ellipse rx="30" ry="8" fill="#79819b" opacity="0.5"/>
    </g>
    <g transform="translate(90,770)">
      <ellipse rx="46" ry="12" fill="#79819b" opacity="0.45"/>
    </g>
  </g>

  <!-- rocks -->
  <g fill="#8d95ac">
    <path d="M1000 700 l10 -14 l16 4 l6 12 z"/>
    <path d="M330 640 l8 -10 l12 3 l4 9 z"/>
    <path d="M760 740 l7 -9 l11 3 l3 8 z"/>
  </g>
  <g fill="#b7bfd2" opacity="0.7">
    <path d="M1000 700 l10 -14 l6 12 z"/>
    <path d="M330 640 l8 -10 l5 9 z"/>
  </g>

  <!-- paw-print flag -->
  <g transform="translate(1042,600)">
    <line x1="0" y1="0" x2="0" y2="-120" stroke="#d6dcea" stroke-width="5" stroke-linecap="round"/>
    <path d="M2 -118 C 34 -128 66 -112 64 -96 C 62 -82 30 -82 2 -92 Z" fill="#e0563a"/>
    <g fill="#fff3e6" transform="translate(22,-99) scale(0.7)">
      <ellipse cx="0" cy="6" rx="7" ry="5.5"/>
      <ellipse cx="-9" cy="-4" rx="4" ry="5"/>
      <ellipse cx="-3" cy="-11" rx="4" ry="5"/>
      <ellipse cx="6" cy="-11" rx="4" ry="5"/>
      <ellipse cx="12" cy="-3" rx="4" ry="5"/>
    </g>
  </g>

  <!-- footprints trailing behind -->
  <g fill="#6f7791" opacity="0.55">
    <ellipse cx="420" cy="700" rx="14" ry="5" transform="rotate(-8 420 700)"/>
    <ellipse cx="366" cy="716" rx="14" ry="5" transform="rotate(-8 366 716)"/>
    <ellipse cx="312" cy="734" rx="13" ry="4.6" transform="rotate(-8 312 734)"/>
    <ellipse cx="258" cy="750" rx="12" ry="4.2" transform="rotate(-8 258 750)"/>
    <ellipse cx="204" cy="764" rx="11" ry="4" transform="rotate(-8 204 764)"/>
  </g>

  <!-- ================= DUST + RIDER ================= -->
  <g id="rider">
    <!-- dust cloud behind the board -->
    <g fill="#e9ecf5">
      <circle cx="470" cy="690" r="16" opacity="0.5"><animate attributeName="opacity" values="0.55;0;0.55" dur="1.6s" repeatCount="indefinite"/><animate attributeName="cx" values="480;380;330" dur="1.6s" repeatCount="indefinite"/><animate attributeName="cy" values="690;700;694" dur="1.6s" repeatCount="indefinite"/></circle>
      <circle cx="500" cy="712" r="20" opacity="0.45"><animate attributeName="opacity" values="0.5;0;0.5" dur="1.9s" repeatCount="indefinite" begin="0.4s"/><animate attributeName="cx" values="505;400;340" dur="1.9s" repeatCount="indefinite" begin="0.4s"/><animate attributeName="cy" values="714;726;712" dur="1.9s" repeatCount="indefinite" begin="0.4s"/></circle>
      <circle cx="520" cy="676" r="12" opacity="0.4"><animate attributeName="opacity" values="0.45;0;0.45" dur="1.4s" repeatCount="indefinite" begin="0.2s"/><animate attributeName="cx" values="530;440;400" dur="1.4s" repeatCount="indefinite" begin="0.2s"/></circle>
      <circle cx="446" cy="716" r="10" opacity="0.35"><animate attributeName="opacity" values="0.4;0;0.4" dur="2.2s" repeatCount="indefinite" begin="0.8s"/><animate attributeName="cx" values="455;350;300" dur="2.2s" repeatCount="indefinite" begin="0.8s"/></circle>
    </g>
    <g fill="#d7dbe9" opacity="0.5">
      <circle cx="480" cy="722" r="7"><animate attributeName="opacity" values="0.5;0;0.5" dur="1.7s" repeatCount="indefinite" begin="0.6s"/><animate attributeName="cx" values="490;380;330" dur="1.7s" repeatCount="indefinite" begin="0.6s"/></circle>
      <circle cx="512" cy="726" r="6"><animate attributeName="opacity" values="0.45;0;0.45" dur="2s" repeatCount="indefinite" begin="0.1s"/><animate attributeName="cx" values="520;410;360" dur="2s" repeatCount="indefinite" begin="0.1s"/></circle>
    </g>

    <!-- ground shadow -->
    <ellipse cx="600" cy="722" rx="140" ry="20" fill="#2b3149" opacity="0.35" filter="url(#soft)"/>

    <!-- ===== SKATEBOARD ===== -->
    <g transform="rotate(-10 600 690)">
      <!-- trucks -->
      <g fill="#aeb6c9">
        <path d="M524 688 h26 v12 h-26 z"/>
        <path d="M648 688 h26 v12 h-26 z"/>
      </g>
      <!-- wheels -->
      <g>
        <circle cx="522" cy="710" r="16" fill="#2e3448"/>
        <circle cx="522" cy="710" r="8" fill="#7c melhor"/>
        <circle cx="522" cy="710" r="8" fill="#7d859c"/>
        <circle cx="670" cy="710" r="16" fill="#2e3448"/>
        <circle cx="670" cy="710" r="8" fill="#7d859c"/>
      </g>
      <!-- deck -->
      <path d="M468 676 C 468 662 480 654 500 652 L 700 652 C 722 654 736 662 736 676 C 736 690 722 694 700 694 L 500 694 C 480 694 468 690 468 676 Z" fill="url(#deckGrad)"/>
      <!-- grip tape top -->
      <path d="M486 656 C 492 650 500 648 516 648 L 690 648 C 708 648 718 651 724 656 L 716 662 C 710 658 702 656 690 656 L 516 656 C 502 656 492 658 486 662 Z" fill="#3a3350" opacity="0.9"/>
      <!-- nose kick -->
      <path d="M726 664 C 734 656 738 646 736 636" stroke="#e0563a" stroke-width="9" fill="none" stroke-linecap="round"/>
      <!-- tail kick -->
      <path d="M474 664 C 466 656 462 646 464 636" stroke="#e0563a" stroke-width="9" fill="none" stroke-linecap="round"/>
      <!-- deck graphic: paw -->
      <g fill="#ffe9d6" opacity="0.95" transform="translate(600,672) scale(1.1)">
        <ellipse cx="0" cy="4" rx="11" ry="9"/>
        <ellipse cx="-13" cy="-8" rx="5.5" ry="6.5"/>
        <ellipse cx="-4" cy="-16" rx="5.5" ry="6.5"/>
        <ellipse cx="7" cy="-16" rx="5.5" ry="6.5"/>
        <ellipse cx="15" cy="-6" rx="5.5" ry="6.5"/>
      </g>
      <!-- motion speed lines -->
      <g stroke="#f4f6ff" stroke-width="3" stroke-linecap="round" opacity="0.35">
        <path d="M300 686 h70"/>
        <path d="M330 706 h60"/>
        <path d="M348 666 h44"/>
      </g>
    </g>

    <!-- ===== CAT ASTRONAUT ===== -->
    <g>
      <!-- tail -->
      <g>
        <path d="M556 578 C 512 592 476 578 472 542" stroke="#d2761f" stroke-width="15" fill="none" stroke-linecap="round"/>
        <path d="M556 578 C 512 592 476 578 472 542" stroke="url(#fur)" stroke-width="11" fill="none" stroke-linecap="round">
          <animateTransform attributeName="transform" type="rotate" values="0 556 578; 4 556 578; 0 556 578" dur="2.2s" repeatCount="indefinite"/>
        </path>
      </g>

      <!-- backpack -->
      <g>
        <rect x="496" y="504" width="56" height="78" rx="14" fill="url(#suitDark)" stroke="#8b93ab" stroke-width="2"/>
        <rect x="504" y="514" width="40" height="26" rx="7" fill="#9aa2ba"/>
        <g stroke="#7c melhor" stroke-width="3" stroke-linecap="round" opacity="0.8">
          <path d="M508 552 h32"/><path d="M508 562 h32"/>
        </g>
        <path d="M538 512 C 546 492 564 486 576 490" stroke="#7d859c" stroke-width="10" fill="none" stroke-linecap="round"/>
      </g>

      <!-- legs -->
      <g stroke-linecap="round" fill="none">
        <path d="M584 582 C 574 606 562 632 552 656" stroke="#c3cada" stroke-width="32"/>
        <path d="M584 582 C 574 606 562 632 552 656" stroke="url(#suit)" stroke-width="26"/>
        <path d="M618 580 C 626 602 634 622 640 644" stroke="#c3cada" stroke-width="32"/>
        <path d="M618 580 C 626 602 634 622 640 644" stroke="url(#suit)" stroke-width="26"/>
      </g>

      <!-- boots -->
      <g transform="rotate(-10 540 668)">
        <rect x="512" y="652" width="56" height="24" rx="12" fill="#8e96ad"/>
        <rect x="512" y="650" width="56" height="20" rx="10" fill="#f4f6ff"/>
        <rect x="514" y="652" width="52" height="6" rx="3" fill="#c3cada"/>
      </g>
      <g transform="rotate(-10 648 654)">
        <rect x="620" y="640" width="56" height="24" rx="12" fill="#8e96ad"/>
        <rect x="620" y="638" width="56" height="20" rx="10" fill="#f4f6ff"/>
        <rect x="622" y="640" width="52" height="6" rx="3" fill="#c3cada"/>
      </g>

      <!-- torso -->
      <path d="M548 512 C 548 494 562 486 600 486 C 638 486 652 494 652 512 L 650 574 C 650 590 636 598 600 598 C 564 598 550 590 550 574 Z" fill="url(#suit)" stroke="#a9b1c6" stroke-width="2"/>
      <!-- waist belt -->
      <path d="M551 566 h98 v18 q-49 12 -98 0 z" fill="#b9c0d4"/>
      <rect x="582" y="566" width="36" height="18" rx="5" fill="#7d859c"/>
      <rect x="588" y="571" width="24" height="8" rx="4" fill="#c3cada"/>

      <!-- chest control panel -->
      <g transform="translate(600,524)">
        <rect x="-30" y="-20" width="60" height="38" rx="9" fill="#3b4258" stroke="#2a3045" stroke-width="2"/>
        <rect x="-23" y="-14" width="26" height="16" rx="4" fill="#7bf0d0" opacity="0.85"/>
        <path d="M-19 -6 l4 -6 l4 6 l4 -6" stroke="#0d3a34" stroke-width="2" fill="none"/>
        <circle cx="12" cy="-6" r="5" fill="#ff7b6b"/>
        <circle cx="24" cy="-6" r="4" fill="#ffd166"/>
        <g fill="#5c6symbol">
          <circle cx="6" cy="8" r="3" fill="#5c6symbol"/>
        </g>
        <circle cx="8" cy="9" r="3.4" fill="#5c6880"/>
        <circle cx="18" cy="9" r="3.4" fill="#5c6880"/>
      </g>

      <!-- paw badge -->
      <g transform="translate(566,556) scale(0.62)" fill="#7d859c">
        <ellipse cx="0" cy="6" rx="12" ry="10"/>
        <ellipse cx="-14" cy="-8" rx="6" ry="7"/>
        <ellipse cx="-4" cy="-17" rx="6" ry="7"/>
        <ellipse cx="8" cy="-17" rx="6" ry="7"/>
        <ellipse cx="17" cy="-6" rx="6" ry="7"/>
      </g>

      <!-- arms -->
      <g fill="none" stroke-linecap="round">
        <path d="M558 506 C 520 502 486 484 462 456" stroke="#b9c0d4" stroke-width="34"/>
        <path d="M558 506 C 520 502 486 484 462 456" stroke="url(#suit)" stroke-width="28"/>
        <path d="M642 506 C 682 496 716 480 740 456" stroke="#b9c0d4" stroke-width="34"/>
        <path d="M642 506 C 682 496 716 480 740 456" stroke="url(#suit)" stroke-width="28"/>
      </g>
      <!-- gloves -->
      <g>
        <g transform="rotate(35 456 448)">
          <rect x="430" y="432" width="52" height="32" rx="16" fill="#f4f6ff" stroke="#b9c0d4" stroke-width="2"/>
          <path d="M436 440 h14 M436 450 h14 M436 460 h14" stroke="#c3cada" stroke-width="3" stroke-linecap="round"/>
        </g>
        <g transform="rotate(-35 748 448)">
          <rect x="722" y="432" width="52" height="32" rx="16" fill="#f4f6ff" stroke="#b9c0d4" stroke-width="2"/>
          <path d="M768 440 h-14 M768 450 h-14 M768 460 h-14" stroke="#c3cada" stroke-width="3" stroke-linecap="round"/>
        </g>
      </g>

      <!-- neck ring -->
      <ellipse cx="600" cy="492" rx="52" ry="14" fill="#aeb6c9"/>
      <ellipse cx="600" cy="490" rx="44" ry="10" fill="#e9ecf5"/>

      <!-- ===== HELMET ===== -->
      <g>
        <!-- antenna -->
        <path d="M646 384 L 676 340" stroke="#b9c0d4" stroke-width="5" stroke-linecap="round"/>
        <circle cx="679" cy="335" r="7" fill="#ff7b6b" filter="url(#glow)">
          <animate attributeName="opacity" values="1;0.35;1" dur="1.8s" repeatCount="indefinite"/>
        </circle>

        <!-- outer shell -->
        <circle cx="600" cy="436" r="74" fill="url(#suit)" stroke="#a9b1c6" stroke-width="2.5"/>
        <!-- rim shading -->
        <path d="M533 470 A 74 74 0 0 1 640 372 A 74 74 0 0 0 533 470 Z" fill="#ffffff" opacity="0.35"/>
        <!-- visor frame -->
        <circle cx="600" cy="436" r="61" fill="#7d859c"/>
        <!-- glass -->
        <circle cx="600" cy="436" r="57" fill="url(#visor)"/>

        <!-- cat face inside -->
        <g>
          <!-- ears -->
          <path d="M566 416 L 574 378 L 602 402 Z" fill="url(#fur)"/>
          <path d="M572 408 L 577 388 L 592 401 Z" fill="#ffb3a0"/>
          <path d="M634 416 L 626 378 L 598 402 Z" fill="url(#fur)"/>
          <path d="M628 408 L 623 388 L 608 401 Z" fill="#ffb3a0"/>
          <!-- head -->
          <ellipse cx="600" cy="442" rx="42" ry="38" fill="url(#fur)"/>
          <!-- cheek fluff -->
          <ellipse cx="560" cy="450" rx="14" ry="11" fill="#ffe3c2" opacity="0.9"/>
          <ellipse cx="640" cy="450" rx="14" ry="11" fill="#ffe3c2" opacity="0.9"/>
          <!-- muzzle -->
          <ellipse cx="600" cy="462" rx="20" ry="14" fill="#fff2df"/>
          <!-- eyes -->
          <ellipse cx="584" cy="438" rx="8" ry="10" fill="#1f7a4d"/>
          <ellipse cx="616" cy="438" rx="8" ry="10" fill="#1f7a4d"/>
          <ellipse cx="584" cy="438" rx="3.4" ry="8" fill="#0d3b26"/>
          <ellipse cx="616" cy="438" rx="3.4" ry="8" fill="#0d3b26"/>
          <circle cx="581" cy="433" r="3" fill="#ffffff"/>
          <circle cx="613" cy="433" r="3" fill="#ffffff"/>
          <!-- nose + mouth -->
          <path d="M594 454 L 606 454 L 600 462 Z" fill="#ff8fa3"/>
          <path d="M600 462 v5 M600 467 q-7 7 -13 0 M600 467 q7 7 13 0" stroke="#8a4a26" stroke-width="2.2" fill="none" stroke-linecap="round"/>
          <!-- whiskers -->
          <g stroke="#fff6ea" stroke-width="2" stroke-linecap="round" opacity="0.95">
            <path d="M566 456 l-24 -7"/><path d="M566 464 l-25 3"/>
            <path d="M634 456 l24 -7"/><path d="M634 464 l25 3"/>
          </g>
        </g>

        <!-- visor reflections -->
        <path d="M556 404 A 56 56 0 0 1 600 380" stroke="#ffffff" stroke-width="8" fill="none" opacity="0.22" stroke-linecap="round"/>
        <ellipse cx="574" cy="398" rx="20" ry="10" transform="rotate(-28 574 398)" fill="#ffffff" opacity="0.16"/>
        <ellipse cx="636" cy="468" rx="12" ry="6" transform="rotate(-20 636 468)" fill="#ffffff" opacity="0.12"/>
        <!-- visor edge highlight -->
        <circle cx="600" cy="436" r="57" fill="none" stroke="#cdf3ff" stroke-width="2" opacity="0.35"/>
      </g>

      <!-- helmet side lamp with light cone -->
      <g>
        <path d="M664 452 L 800 424 L 806 496 L 664 478 Z" fill="#ffe9a8" opacity="0.14"/>
        <rect x="650" y="448" width="26" height="22" rx="6" fill="#d6dcea" stroke="#a9b1c6" stroke-width="2"/>
        <circle cx="678" cy="459" r="7" fill="#fff3bd" filter="url(#glow)"/>
      </g>
    </g>
  </g>

  <!-- subtle vignette -->
  <rect width="1200" height="800" fill="none" stroke="#000000" stroke-width="0"/>
  <rect x="0" y="0" width="1200" height="800" fill="url(#space)" opacity="0" />
</svg>

Reasoning trace (4,213 tokens)

The task: draw an SVG of an astronaut cat skateboarding on the moon. Should be a single SVG file (fenced as svg). Make it self-contained, no external resources.

Let me create a nice detailed SVG scene: moon surface with craters, Earth in black sky with stars, an astronaut cat wearing a helmet with visor reflection, riding a skateboard, moon dust trail, maybe a small flag. Use gradients, etc. Viewport 1280x800 but SVG scales.

Let me design carefully.

Canvas: viewBox="0 0 1200 800".

Background: deep black-blue space gradient, stars, Earth in upper left/right.

Ground: moon surface curve around y=600, with craters.

Cat astronaut: helmet (circle with glass dome and reflection), face inside with cat ears, eyes, whiskers, nose. Body suit with backpack, arms out for balance, legs on skateboard. Skateboard tilted with wheels.

Let me place cat at center around x=600.

I'll draw:
- Earth: circle at (980, 140), r=70, blue with continents, atmosphere glow.
- Stars: random circles.
- Moon ground: path from y=560 curving. Craters ellipses.
- Skateboard at ~ (600, 660), tilted angle.
- Cat on top: body from y=560 up to helmet at y=380.

Let me write out coordinates.

Cat astronaut:
- Board: center (600, 690), rotated -12 degrees. Deck shape: rounded rect from x 480 to 720, height 14, with nose/tail kick up at both ends. Wheels: two pairs at x=540 and x=660, radius 16, y=730.
- Dust cloud behind.

Cat figure standing on board: feet at ~ (560, 672) and (640, 672).
- Legs: suit legs from hips down to feet. Hips at y=580. 
- Body: suit torso from y=580 up to y=500, rounded.
- Arms: outstretched left arm to (450, 470), right arm to (760, 460).
- Helmet: circle center (600, 460) r=62. Actually head inside. Let's do helmet outer: circle r=66 at (600,455). Visor: a rounded shape covering front (cat face) — glass region maybe ellipse. Ears inside peeking through helmet.

Let's structure helmet: outer ring circle (600,450) r=68 fill white suit; inner visor circle r=54 fill glass gradient dark teal; cat face inside: ears (triangles) at top, eyes, nose, whiskers.

Ears: triangles at (575,415) and (625,415) going up to y=385. But they should be inside the visor... in space suits, cat's head is inside helmet so ears poke up inside. Let's have ears at top of visor region.

Face: ellipse cx=600 cy=455 rx=30 ry=32 fill orange/cream fur. Ears triangles above. Eyes: two ellipses green. Nose pink triangle. Whiskers lines.

Visor reflection: a white arc streak over the visor.

Backpack: behind body, rect at (490, 505) etc. Actually body center at 600, so backpack behind at x~ 490? Let's put backpack on the back-left side.

Let me just carefully compose.

Body (suit torso): path from shoulders (545,505) to (655,505) down to hips (640,590),(560,590). Rounded rect-ish. Fill light gray gradient.

Shoulders: arms. Left arm: from shoulder (555,515) curving out to hand at (455,455). Draw as thick rounded path (stroke-width 34, linecap round) in suit color, plus glove circle at end.

Right arm: from (645,515) to (760,470).

Legs: hips at (585,585) and (615,585). Left leg down to foot (555,668), right leg to (640,665). Use thick stroke rounded paths. Boots: rounded rects.

Since the board is tilted, feet at different heights.

Tail: cat tail curling out from behind, thick orange stroke.

Ground shadow: ellipse under board.

Moon dust: small circles trailing behind board to the left.

Maybe a small "MOON" flag? Could add a little flag on the right with a paw print.

Let's add motion streaks and a little rocket?

I'll write the SVG with defs: gradients for space, suit, visor, earth, moon, board.

Add subtle animation? The prompt says draw SVG; animation optional but nice. Could add a slight bobbing animation of the whole astronaut group via <animateTransform> and twinkling stars. Keep it fine and safe (SMIL supported in Chrome). I'll add a gentle bob and dust particles moving.

Careful: the code block must be ```svg ... ``` with complete file. Provide xmlns.

Let me write.

Detailed SVG:

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
```

Background rect gradient space: radial gradient from top.

Stars: many small circles with varying opacity, plus a few with cross flare.

Earth: at (980,150) r 72. Gradient blue. Continents: green-ish blobs. Clouds: white ellipses. Atmosphere: outer circle stroke blue with blur filter.

Filters: feGaussianBlur for glow. Chrome supports.

Moon surface: big path. Let's have horizon curve: path M0,620 C 250,580 450,640 700,600 C 900,570 1050,620 1200,590 L1200,800 L0,800 Z fill moon gradient.

Distant hills: a darker ridge path.

Craters: ellipses with lighter rim and darker interior: e.g. group of ellipses at (200,700), (900,660), (350,745).

Now astronaut group with transform translate(0, bob).

Let me define the group id="astro" transform="translate(600,0)"? Might complicate. I'll just use absolute coords.

Let's lay out final coordinates:

Board center x=600. Deck: 
```
<g transform="rotate(-10 600 690)">
  <path d="M470 690 q-14 0 -16 -10 q-2 -12 12 -16 l120 -10 l140 10 q16 3 14 16 q-2 11 -16 10 z" />
```
Hmm, simpler: deck as path with upturned nose at right and tail at left:
d="M470 686 q-16 -2 -18 -14 q-2 -14 16 -16 l120 -6 l130 6 q18 2 16 16 q-2 12 -18 14 z"

That's a lens shape. Plus trucks and wheels.

Let me instead: 
- Deck: rounded shape: M 468 672 C 468 660, 480 654, 500 653 L 700 653 C 722 654, 734 662, 734 674 C 734 686, 722 692, 700 692 L 500 692 C 480 692, 468 685, 468 672 Z — that's a horizontal lens. But we want a tilted perspective board (viewed from side-ish). A skateboard seen from the side with slight perspective. Keep it simple: side view of deck with kicktails.

Deck path (side view, slight perspective): 
M 470 678 L 480 664 L 700 664 L 716 678 C 722 684, 718 690, 706 690 L 486 690 C 474 690, 466 686, 470 678 Z

Then nose kick at right going up: add path M 700 664 C 712 660, 724 652, 726 644 with stroke.

Wheels: circles at (520, 706) r 16 and (672, 706) r 16, with dark tire and lighter hub; trucks: small rects connecting deck to wheels.

Since board rotated -10deg, the whole group rotates; wheels rotate too, fine.

Dust: puffs near left wheels.

Cat figure (not rotated, standing upright relative to board, slight tilt).

Feet: left boot at (545, 668) pointing left, right boot at (645, 664) pointing right.

Legs: 
- Left leg: path M 578 580 L 560 640 with stroke-width 30 round.
- Right leg: path M 620 578 L 638 638.

Boots: rounded rect at each foot, e.g. left boot: rect x=520 y=650 w=52 h=22 rx=11 (pointing left), right boot: x=618 y=646 w=52 h=22 rx=11.

Hmm feet should be on top of deck (deck top at y=664 in unrotated coords). Board is rotated -10 about (600,690): left end at x=470 → y offset = ? rotation -10 degrees means counterclockwise? In SVG, positive angle rotates clockwise. So rotate(-10) rotates counterclockwise: point (470,690) relative to center (-130,0) → rotated by -10°: x' = -130*cos(-10) - 0*sin(-10) = -128, y' = -130*sin(-10) + 0 = +22.6. So left end goes down by 22.6 → y=712. Right end (734,690): rel (134,0) → x'=132, y' = 134*sin(-10)... wait formula: x' = x cosθ - y sinθ, y' = x sinθ + y cosθ, θ=-10°, cos=0.985, sin=-0.174. rel(134,0): x'=132, y'=-23.3 → y=666.7. So left end lower, right end higher — board nose up on the right. Good, cat leaning forward going right.

So feet need to be placed on the tilted deck. Deck top line: after rotation, top at left end y=712-? Let's compute deck points. Deck top edge at y=664 unrotated, from x=480 to 700. Left top corner (480,664): rel(-120,-26) → x' = -120*0.985 - (-26)(-0.174) = -118.2 - 4.52 = -122.7 → 477.3; y' = -120*(-0.174) + (-26)(0.985) = 20.9 - 25.6 = -4.7 → 685.3. Hmm that's the deck left-top at y=685, and deck bottom-left at (486,690): rel(-114,0) → x'=-112.3, y'=19.8 → 709.8.

Right top (700,664): rel(100,-26): x' = 98.5 - 4.52=93.98 → 694; y' = -17.4-25.6 = -43 → 647. Right bottom (706,690): rel(106,0): x'=104.4, y'=-18.4 → 671.6.

So the deck's top surface runs from about (477,685) to (694,647). Feet should be at around x=545 → interpolate: along the top line. At x=545: fraction = (545-477)/(694-477)=0.313 → y = 685 - 0.313*38 = 673. At x=645: fraction 0.775 → y=685-29.4=655.6.

So left foot at (545, 673), right foot at (645, 656). That's the tilted stance. Boots: left boot ellipse/rect centered at (540,672) rotated -10 too; right at (645,655).

Simplify: draw boots as rounded rects with transform rotate(-10 540 672).

Legs connect hips to those boots. Hips at (600,580) roughly. Left leg from (585,585) to (545,660). Right leg from (615,583) to (640,645).

Body torso: from shoulders y=500 to hips y=590, width from 545 to 655.

Let's do torso path:
M 548 512 C 548 496, 560 488, 600 488 C 640 488, 652 496, 652 512 L 648 578 C 648 592, 636 598, 600 598 C 564 598, 552 592, 552 578 Z

Suit color: white/light gray gradient with shadow.

Chest control panel: rounded rect at (572,520) w=56 h=34, dark, with tiny colored lights.

Arms: left arm from shoulder (556,505) curve to hand (452,448): path M 558 508 Q 505 500 462 458, stroke width 30, round cap, suit color; glove: circle at (455,452) r=18 with fingers? Just a rounded glove shape.

Right arm from (644,505) to (748,452): path M 642 506 Q 700 492 742 452; glove circle r=18 at (750,448).

Helmet: outer ring circle cx 600 cy 440 r=70 fill suit gradient, with darker rim. Then visor: circle r=58 at (600,440) glass gradient (dark teal translucent). Then cat face inside.

Cat head: ellipse cx 600 cy 445 rx 40 ry 38 fill fur gradient (orange). Ears: path M 562 420 L 570 380 L 600 405 Z and mirrored M 638 420 L 630 380 L 600 405 Z — inside pink inner ears.

Wait, ears inside helmet of radius 58 around (600,440): ear tip at (570,380): distance sqrt(30²+60²)=67 > 58, outside visor. So the ears would poke outside visor into helmet ring — that's actually typical for cute art: cat ears sticking out of the helmet? In space, helmet is sealed; but cute cartoon: make helmet big enough or ears small. Let's make ears tips at (572,392): distance sqrt(28²+48²)=55.6 < 58 ✓. Good. Ear inner pink smaller.

Eyes: at (585,442) and (615,442), ellipse rx 7 ry 9 fill dark green with white highlight. Nose: small pink triangle at (600,460). Mouth: two arcs. Whiskers: lines from cheeks.

Fur cheek fluff: white/cream tufts.

Visor reflection: an arc path white opacity .25 across upper-left, plus a small ellipse highlight.

Helmet lights: small circles on the ring at top-left, top-right; a tiny antenna on the helmet.

Backpack: behind torso, on left side (back), rect x=505? Since cat faces right (board nose right), the back is left. Backpack: rounded rect at x=496 to 548, y=500 to 580, with hoses connecting to helmet. Actually backpack behind body partially hidden: draw before body. Rounded rect (498,505) w=54 h=72 rx=12, light gray darker, with vertical ridges. Hose: path from (530,510) curving to (560,470) stroke dark.

Hmm hose from backpack to helmet neck ring at (555,478)? neck ring is bottom of helmet circle ~ (600,510). Let's route hose: M 540 512 C 548 490, 566 484, 578 486 — stroke width 10 dark gray.

Tail: cat tail emerging from behind lower body to the left: path M 540 575 C 500 585, 470 570, 468 540 with stroke-width 14 round, orange fur. Actually behind backpack... tail out to left curling up.

Ground shadow: ellipse cx 600 cy 720 rx 130 ry 20 fill black opacity .25 blur.

Dust: group of circles behind board trailing to left with animation.

Also small flag? Maybe skip. Add a small rover or footprint. Add footprints in moon dust trailing left: small ovals.

Add Earth with glow in top-right, and a crescent? Full Earth is nicer.

Also add floating "MOON" text? Could add a small badge on the suit with a paw print. Nice touch: paw print badge on chest.

Let me also add subtle animation: 
- group "astro" animateTransform translate values "0 0; 0 -8; 0 0" dur 2.4s repeat, plus slight rotate? Use additive? Just translate.
- dust particles animating opacity/translate.
- stars twinkle: a few with animate on opacity.
- Earth slow rotation: animateTransform rotate on continent group.

But if the astro group bobs, feet will separate from board. Instead animate board+astro together as one group: bob the whole thing slightly (0 to -4) - acceptable.

Actually better: animate the whole scene group (cat + board) with a subtle vertical bob and rotation -2..2. Let's wrap board + cat in group id="rider" with animateTransform type="translate" values "0 0;0 -6;0 0" dur="2s" repeatCount="indefinite". Fine.

Also the tail could wave: animate stroke? Use path with animate on d? Could be finicky; use a group rotating around tail base.

Keep it manageable.

Write final SVG.

Star field: I'll generate positions manually — many. Let me write ~50 stars with varied r.

I'll produce the code.

Also need to ensure "no horizontal scrollbar" — SVG with width 100% height 100% and preserveAspectRatio scales, fine. Set style="display:block; width:100%; height:100%;" on body? For an SVG file rendered directly, root svg with viewBox and width="100%" height="100%" works.

Add a subtle vignette.

Let me write it out now.

Details for the moon ground texture: small crater circles scattered, a few rocks.

Also add a small "flag" with paw print at right around x=980 on ground: pole from (990,600) to (990,500), flag waving path.

Let me write.

For the earth, I'll add continents as paths approximated.

Earth at cx=1010 cy=140 r=68.
Continents path: something like M 985 95 q 25 -12 45 5 q 18 16 2 30 q -20 18 -40 8 q -14 -18 -7 -43 z — rough blob. Another blob lower-left. Fine, stylized.

Clouds: ellipses white opacity .5.

Add atmosphere glow: circle r=78 fill none stroke #6ec6ff stroke-width 8 opacity .3 filter blur.

Also small moon in sky? We are on the moon; Earth in sky is the classic. Good.

Now the helmet ring details: bolts, top vent, and side lamp with light beam? Cute: helmet lamp on the side pointing right with a subtle cone.

Ok writing code.

Also add a tiny astronaut... no.

Paw badge: on chest, small circle with 4 toe circles and pad.

Let me write the final code carefully with proper structure.

I'll also add a title/desc for accessibility.

Final check on stars not overlapping the astronaut too much — fine.

Write code.