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: 22.8 s
Cost: $0.0040
Output tokens: 6,552
Spent thinking: 168 tokens
Speed: 296.7 tok/s
Console errors: 0

First token after: 684 ms
First visible text after: 1.6 s
Prompt tokens: 519
Code size: 15.8 KB
Finish reason: stop
Served by: DigitalOcean
Model id: minimax/minimax-m3.1-flash
Reasoning sent: {"effort":"low"}
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 · 314 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="1280" height="800" role="img" aria-labelledby="title desc">
  <title id="title">Astronaut Cat Skateboarding on the Moon</title>
  <desc id="desc">A cheerful cat in a spacesuit rides a skateboard across the cratered lunar surface, with Earth glowing in a starry black sky.</desc>

  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#050718"/>
      <stop offset="60%" stop-color="#101232"/>
      <stop offset="100%" stop-color="#231a4a"/>
    </linearGradient>
    <radialGradient id="moon" cx="38%" cy="28%" r="80%">
      <stop offset="0%" stop-color="#f4f1e8"/>
      <stop offset="55%" stop-color="#cfcabd"/>
      <stop offset="100%" stop-color="#9b968e"/>
    </radialGradient>
    <radialGradient id="crater" cx="45%" cy="40%" r="65%">
      <stop offset="0%" stop-color="#8e8a84"/>
      <stop offset="70%" stop-color="#b9b5ac"/>
      <stop offset="100%" stop-color="#e2ded4"/>
    </radialGradient>
    <radialGradient id="glass" cx="35%" cy="25%" r="75%">
      <stop offset="0%" stop-color="#9fe4ff" stop-opacity=".45"/>
      <stop offset="45%" stop-color="#2d5f96" stop-opacity=".35"/>
      <stop offset="100%" stop-color="#08162e" stop-opacity=".85"/>
    </radialGradient>
    <radialGradient id="earth" cx="32%" cy="28%" r="72%">
      <stop offset="0%" stop-color="#7fd7ff"/>
      <stop offset="60%" stop-color="#2b7fd4"/>
      <stop offset="100%" stop-color="#123a80"/>
    </radialGradient>
    <radialGradient id="glow">
      <stop offset="0%" stop-color="#7fd0ff" stop-opacity=".85"/>
      <stop offset="55%" stop-color="#4a8fff" stop-opacity=".28"/>
      <stop offset="100%" stop-color="#4a8fff" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="55%" stop-color="#e6e8ee"/>
      <stop offset="100%" stop-color="#b9bec9"/>
    </linearGradient>
    <linearGradient id="suitShade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#aeb4c2"/>
      <stop offset="50%" stop-color="#eef0f5"/>
      <stop offset="100%" stop-color="#8f96a8"/>
    </linearGradient>
    <linearGradient id="board" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ff5f9e"/>
      <stop offset="50%" stop-color="#ffd166"/>
      <stop offset="100%" stop-color="#4ce0c0"/>
    </linearGradient>
    <linearGradient id="visorRim" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#9aa2b5"/>
    </linearGradient>
    <filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="14"/>
    </filter>
    <filter id="shadowBlur" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="7"/>
    </filter>
  </defs>

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

  <!-- Nebula haze -->
  <ellipse cx="300" cy="210" rx="320" ry="180" fill="#5b2a9e" opacity=".18" filter="url(#soft)"/>
  <ellipse cx="1080" cy="300" rx="260" ry="220" fill="#1f6ea8" opacity=".16" filter="url(#soft)"/>

  <!-- STARS -->
  <g fill="#ffffff">
    <circle cx="90" cy="90" r="2"/><circle cx="170" cy="180" r="1.4"/><circle cx="250" cy="60" r="1.8"/>
    <circle cx="330" cy="140" r="1.2"/><circle cx="430" cy="45" r="2.2"/><circle cx="520" cy="120" r="1.3"/>
    <circle cx="620" cy="60" r="1.7"/><circle cx="760" cy="110" r="1.2"/><circle cx="880" cy="50" r="2"/>
    <circle cx="1010" cy="150" r="1.5"/><circle cx="1150" cy="70" r="2.1"/><circle cx="1230" cy="190" r="1.3"/>
    <circle cx="60" cy="330" r="1.6"/><circle cx="140" cy="420" r="1.2"/><circle cx="230" cy="300" r="2"/>
    <circle cx="350" cy="380" r="1.4"/><circle cx="480" cy="250" r="1.1"/><circle cx="900" cy="300" r="1.9"/>
    <circle cx="1060" cy="380" r="1.3"/><circle cx="1190" cy="300" r="1.8"/><circle cx="1215" cy="470" r="1.2"/>
    <circle cx="30" cy="520" r="1.7"/><circle cx="1100" cy="520" r="1.5"/>
  </g>
  <g fill="#cfe9ff" opacity=".9">
    <path d="M215 95 l3 9 9 3 -9 3 -3 9 -3-9 -9-3 9-3z"/>
    <path d="M840 165 l2.5 7 7 2.5 -7 2.5 -2.5 7 -2.5-7 -7-2.5 7-2.5z"/>
    <path d="M1175 240 l2.5 7 7 2.5 -7 2.5 -2.5 7 -2.5-7 -7-2.5 7-2.5z"/>
    <path d="M390 220 l2 5.5 5.5 2 -5.5 2 -2 5.5 -2-5.5 -5.5-2 5.5-2z"/>
  </g>

  <!-- EARTH -->
  <circle cx="1040" cy="235" r="150" fill="url(#glow)"/>
  <circle cx="1040" cy="235" r="88" fill="url(#earth)"/>
  <g opacity=".85">
    <path d="M982 172 q22-16 45-6 q10 16-6 26 q-18 6-22 22 q-22 2-26-14 q-4-16 9-28z" fill="#5fbf6a"/>
    <path d="M1040 178 q30-4 44 18 q4 20-14 26 q-14-2-18-14 q-16 4-22-8 q-2-12 10-22z" fill="#7ed47a"/>
    <path d="M1080 240 q22 6 20 26 q-6 24-26 30 q-16 2-18-12 q10-14 8-28 q-4-10 16-16z" fill="#63bb63"/>
    <path d="M998 250 q16-6 24 4 q6 14-8 22 q-18 6-24-6 q-4-12 8-20z" fill="#e7e9c9" opacity=".9"/>
  </g>
  <g fill="#ffffff" opacity=".5">
    <ellipse cx="1004" cy="204" rx="26" ry="9"/>
    <ellipse cx="1062" cy="268" rx="22" ry="8"/>
    <ellipse cx="1022" cy="180" rx="16" ry="6"/>
  </g>
  <circle cx="1040" cy="235" r="88" fill="none" stroke="#bfe6ff" stroke-width="3" opacity=".7"/>

  <!-- MOON SURFACE -->
  <path d="M0 560 Q160 520 320 552 T640 545 T960 555 T1280 530 L1280 800 L0 800 Z" fill="url(#moon)"/>
  <path d="M0 560 Q160 520 320 552 T640 545 T960 555 T1280 530" fill="none" stroke="#f7f4ea" stroke-width="4" opacity=".6"/>

  <!-- Craters -->
  <g>
    <ellipse cx="180" cy="660" rx="110" ry="42" fill="url(#crater)" opacity=".9"/>
    <ellipse cx="180" cy="672" rx="72" ry="22" fill="#6f6c68" opacity=".55"/>
    <ellipse cx="180" cy="666" rx="78" ry="24" fill="#b3afa6"/>
    <ellipse cx="1120" cy="640" rx="120" ry="46" fill="url(#crater)" opacity=".85"/>
    <ellipse cx="1120" cy="652" rx="80" ry="24" fill="#6f6c68" opacity=".5"/>
    <ellipse cx="880" cy="740" rx="95" ry="34" fill="url(#crater)" opacity=".85"/>
    <ellipse cx="880" cy="750" rx="60" ry="18" fill="#6f6c68" opacity=".5"/>
    <ellipse cx="380" cy="765" rx="90" ry="30" fill="url(#crater)" opacity=".8"/>
    <ellipse cx="380" cy="774" rx="58" ry="16" fill="#6f6c68" opacity=".45"/>
    <ellipse cx="640" cy="700" rx="60" ry="20" fill="#a5a199" opacity=".7"/>
  </g>
  <!-- scattered rocks -->
  <g fill="#8f8b84">
    <ellipse cx="70" cy="712" rx="18" ry="9"/>
    <ellipse cx="300" cy="690" rx="12" ry="7"/>
    <ellipse cx="980" cy="700" rx="16" ry="8"/>
    <ellipse cx="1215" cy="745" rx="22" ry="10"/>
    <ellipse cx="520" cy="755" rx="10" ry="6"/>
  </g>
  <g fill="#e9e6dc" opacity=".8">
    <ellipse cx="66" cy="706" rx="12" ry="6"/>
    <ellipse cx="296" cy="685" rx="8" ry="4"/>
    <ellipse cx="976" cy="694" rx="10" ry="5"/>
  </g>

  <!-- Motion dust -->
  <g fill="#f3efe4" opacity=".55">
    <circle cx="330" cy="668" r="7"/><circle cx="280" cy="650" r="5"/><circle cx="390" cy="690" r="4"/>
    <circle cx="230" cy="676" r="3.5"/><circle cx="440" cy="662" r="3"/>
  </g>

  <!-- Shadow under skateboard -->
  <ellipse cx="640" cy="700" rx="215" ry="30" fill="#4c4a48" opacity=".28" filter="url(#shadowBlur)"/>

  <!-- SKATEBOARD -->
  <g>
    <!-- rear wheel -->
    <g>
      <circle cx="470" cy="685" r="27" fill="#39405c"/>
      <circle cx="470" cy="685" r="15" fill="#8f97ad"/>
      <circle cx="470" cy="685" r="6" fill="#39405c"/>
      <path d="M470 670 v30 M455 685 h30" stroke="#c3c9d8" stroke-width="3"/>
    </g>
    <!-- front wheel -->
    <g>
      <circle cx="812" cy="682" r="27" fill="#39405c"/>
      <circle cx="812" cy="682" r="15" fill="#8f97ad"/>
      <circle cx="812" cy="682" r="6" fill="#39405c"/>
      <path d="M812 667 v30 M797 682 h30" stroke="#c3c9d8" stroke-width="3"/>
    </g>
    <!-- trucks -->
    <path d="M455 655 h30 v22 h-30z" fill="#7d8496"/>
    <path d="M797 652 h30 v22 h-30z" fill="#7d8496"/>
    <!-- deck -->
    <path d="M380 640 Q640 668 900 634 L898 660 Q640 700 384 668 Z" fill="url(#board)"/>
    <path d="M380 640 Q640 668 900 634 L898 644 Q640 680 382 654 Z" fill="#ffffff" opacity=".35"/>
    <path d="M384 668 Q640 700 898 660" fill="none" stroke="#2b2f45" stroke-width="5" stroke-linecap="round"/>
    <!-- grip stripes -->
    <g fill="#1f2436" opacity=".55">
      <rect x="430" y="650" width="12" height="26" rx="6" transform="rotate(6 436 663)"/>
      <rect x="470" y="653" width="12" height="26" rx="6" transform="rotate(6 476 666)"/>
      <rect x="510" y="656" width="12" height="26" rx="6" transform="rotate(5 516 669)"/>
      <rect x="550" y="659" width="12" height="26" rx="6" transform="rotate(4 556 672)"/>
      <rect x="590" y="661" width="12" height="26" rx="6" transform="rotate(3 596 674)"/>
      <rect x="630" y="662" width="12" height="26" rx="6" transform="rotate(2 636 675)"/>
      <rect x="670" y="662" width="12" height="26" rx="6" transform="rotate(-1 676 675)"/>
      <rect x="710" y="660" width="12" height="26" rx="6" transform="rotate(-3 716 673)"/>
      <rect x="750" y="657" width="12" height="26" rx="6" transform="rotate(-5 756 670)"/>
      <rect x="790" y="653" width="12" height="26" rx="6" transform="rotate(-7 796 666)"/>
      <rect x="830" y="648" width="12" height="26" rx="6" transform="rotate(-9 836 661)"/>
    </g>
  </g>

  <!-- CAT FIGURE -->
  <g>
    <!-- backpack -->
    <rect x="530" y="420" width="70" height="110" rx="22" fill="#cfd4df" stroke="#9aa1b1" stroke-width="4"/>
    <rect x="545" y="440" width="40" height="34" rx="10" fill="#ff8f4d" opacity=".9"/>

    <!-- tail -->
    <path d="M742 500 q86 6 74 -62 q-4 -26 -30 -22 q-22 4 -16 24" fill="none" stroke="#e6e8ee" stroke-width="26" stroke-linecap="round"/>
    <path d="M742 500 q86 6 74 -62 q-4 -26 -30 -22" fill="none" stroke="#c3c8d4" stroke-width="10" stroke-linecap="round" opacity=".7"/>
    <path d="M770 446 q10 -10 22 -4" fill="none" stroke="#e08a3c" stroke-width="22" stroke-linecap="round"/>

    <!-- legs -->
    <!-- back leg -->
    <path d="M700 500 q34 60 6 100 q-20 30 -58 22" fill="none" stroke="url(#suitShade)" stroke-width="44" stroke-linecap="round"/>
    <path d="M650 620 q-24 12 -40 6" fill="none" stroke="#eef0f5" stroke-width="46" stroke-linecap="round"/>
    <!-- boot back -->
    <g transform="translate(600,626) rotate(-8)">
      <rect x="-34" y="-16" width="70" height="34" rx="16" fill="#e8ebf2" stroke="#9aa1b1" stroke-width="4"/>
      <rect x="-34" y="2" width="70" height="16" rx="8" fill="#4a5166"/>
    </g>
    <!-- front leg -->
    <path d="M580 500 q-30 62 6 102 q22 26 62 22" fill="none" stroke="url(#suitShade)" stroke-width="46" stroke-linecap="round"/>
    <!-- boot front -->
    <g transform="translate(690,622) rotate(8)">
      <rect x="-30" y="-18" width="76" height="36" rx="17" fill="#eef0f5" stroke="#9aa1b1" stroke-width="4"/>
      <rect x="-30" y="2" width="76" height="16" rx="8" fill="#4a5166"/>
    </g>

    <!-- torso -->
    <path d="M640 380 q74 0 88 70 q10 56 -26 84 q-38 22 -84 8 q-52-14 -48-76 q4-64 70-86z" fill="url(#suit)"/>
    <!-- belly panel -->
    <ellipse cx="640" cy="470" rx="46" ry="56" fill="#f8f9fc" opacity=".9"/>
    <g fill="#b9becb">
      <circle cx="628" cy="446" r="6"/><circle cx="654" cy="452" r="6"/><circle cx="636" cy="476" r="6"/><circle cx="660" cy="492" r="5"/>
    </g>
    <!-- suit seams -->
    <path d="M596 420 q44 22 90 2" fill="none" stroke="#b4bac8" stroke-width="4"/>
    <!-- chest badge -->
    <g transform="translate(600,418)">
      <circle cx="0" cy="0" r="17" fill="#20304e"/>
      <circle cx="0" cy="0" r="12" fill="#5fd0ff"/>
      <path d="M-6 1 q6 -9 12 0 q-6 8 -12 0z" fill="#ffd166"/>
    </g>

    <!-- arms -->
    <!-- left arm out for balance -->
    <path d="M566 420 q-52 -6 -86 -46" fill="none" stroke="url(#suitShade)" stroke-width="40" stroke-linecap="round"/>
    <g transform="translate(468,366) rotate(-28)">
      <rect x="-22" y="-18" width="52" height="36" rx="17" fill="#eef0f5" stroke="#9aa1b1" stroke-width="4"/>
      <rect x="-22" y="4" width="52" height="14" rx="7" fill="#4a5166"/>
    </g>
    <!-- right arm up -->
    <path d="M714 418 q56 -18 76 -66" fill="none" stroke="url(#suitShade)" stroke-width="40" stroke-linecap="round"/>
    <g transform="translate(798,338) rotate(14)">
      <rect x="-26" y="-18" width="54" height="36" rx="17" fill="#eef0f5" stroke="#9aa1b1" stroke-width="4"/>
      <rect x="-26" y="4" width="54" height="14" rx="7" fill="#4a5166"/>
    </g>

    <!-- HELMET -->
    <!-- ears peeking through -->
    <path d="M566 260 l-8 -76 l70 44z" fill="#f0a860"/>
    <path d="M714 260 l10 -78 l-72 46z" fill="#f0a860"/>
    <path d="M575 240 l-4 -38 l36 25z" fill="#f7b8a0"/>
    <path d="M705 238 l6 -40 l-38 27z" fill="#f7b8a0"/>

    <!-- helmet shell -->
    <circle cx="640" cy="292" r="118" fill="url(#suit)"/>
    <circle cx="640" cy="292" r="118" fill="none" stroke="#9aa1b1" stroke-width="6"/>
    <!-- helmet ring -->
    <circle cx="640" cy="292" r="100" fill="#2a3145"/>
    <circle cx="640" cy="292" r="94" fill="url(#glass)"/>

    <!-- cat face inside visor -->
    <g>
      <!-- head -->
      <path d="M640 190 q72 0 76 70 q2 62 -76 72 q-78 -10 -76 -72 q4 -70 76 -70z" fill="#f2a75e"/>
      <!-- cheeks/cheek fluff -->
      <path d="M570 262 q-12 30 8 46 q-18 4 -24-14 q-6-18 16-32z" fill="#f2a75e"/>
      <path d="M710 262 q12 30 -8 46 q18 4 24-14 q6-18-16-32z" fill="#f2a75e"/>
      <!-- inner ears -->
      <path d="M596 232 l-4 -50 l44 34z" fill="#f6b9a2"/>
      <path d="M684 232 l6 -50 l-46 34z" fill="#f6b9a2"/>
      <!-- muzzle -->
      <ellipse cx="640" cy="296" rx="44" ry="34" fill="#ffe2c4"/>
      <!-- eyes -->
      <ellipse cx="610" cy="262" rx="13" ry="16" fill="#2f3b2c"/>
      <ellipse cx="670" cy="262" rx="13" ry="16" fill="#2f3b2c"/>
      <ellipse cx="606" cy="256" rx="5" ry="6" fill="#ffffff"/>
      <ellipse cx="666" cy="256" rx="5" ry="6" fill="#ffffff"/>
      <!-- nose -->
      <path d="M640 278 q-12 0 -10 10 q2 10 10 10 q8 0 10-10 q2-10-10-10z" fill="#e2708c"/>
      <!-- mouth -->
      <path d="M640 298 q-10 14 -22 2 M640 298 q10 14 22 2" fill="none" stroke="#8a5a44" stroke-width="4" stroke-linecap="round"/>
      <!-- whiskers -->
      <g stroke="#fdf1e2" stroke-width="3" stroke-linecap="round" opacity=".95">
        <path d="M600 292 l-36 -8"/><path d="M600 302 l-36 8"/>
        <path d="M680 292 l36 -8"/><path d="M680 302 l36 8"/>
      </g>
      <!-- stripes -->
      <g stroke="#d6813f" stroke-width="7" stroke-linecap="round" opacity=".85">
        <path d="M626 196 l-4 24"/><path d="M640 194 v26"/><path d="M654 196 l4 24"/>
      </g>
    </g>

    <!-- visor glare -->
    <path d="M578 232 q16 -46 62 -54 q-30 26 -36 62 q-4 26 -18 40 q-14 -18 -8 -48z" fill="#ffffff" opacity=".28"/>
    <path d="M640 198 a94 94 0 0 1 88 128 q-26 -46 -52 -74 q-22 -24 -36 -54z" fill="#ffffff" opacity=".13"/>
    <!-- helmet lights -->
    <rect x="560" y="376" width="46" height="18" rx="9" fill="#9aa1b1"/>
    <rect x="676" y="376" width="46" height="18" rx="9" fill="#9aa1b1"/>
    <circle cx="583" cy="385" r="5" fill="#ffd166"/><circle cx="699" cy="385" r="5" fill="#ff5f7a"/>
    <!-- antenna -->
    <path d="M742 204 q22 -26 6 -48" fill="none" stroke="#c3c9d8" stroke-width="6" stroke-linecap="round"/>
    <circle cx="746" cy="152" r="9" fill="#ff5f7a"/>
    <circle cx="746" cy="152" r="16" fill="#ff5f7a" opacity=".25"/>
  </g>

  <!-- small rocket far away for fun -->
  <g transform="translate(210,300) rotate(-18)">
    <path d="M0 0 q-14 26 0 56 q14 -30 0 -56z" fill="#f4f4f8"/>
    <circle cx="0" cy="26" r="7" fill="#4cc4ff"/>
    <path d="M-10 44 l-12 22 l12-8z" fill="#ff5f5f"/>
    <path d="M10 44 l12 22 l-12-8z" fill="#ff5f5f"/>
    <path d="M-6 58 q6 26 6 40 q0 -14 6 -40z" fill="#ffb03a" opacity=".9"/>
  </g>

  <!-- caption plate -->
  <g transform="translate(640,748)">
    <rect x="-260" y="-26" width="520" height="52" rx="26" fill="#0b1024" opacity=".55"/>
    <text x="0" y="8" text-anchor="middle" font-family="Trebuchet MS, Verdana, sans-serif" font-size="26" font-weight="bold" fill="#ffffff" letter-spacing="2">MOONWALK MEWS</text>
  </g>
</svg>

Reasoning trace (168 tokens)

Create an SVG scene, detailed, fun. Output one fenced svg block. Include astronaut cat on skateboard on moon surface, Earth in space, stars, craters, helmet reflection. Need self-contained, viewBox.

Compose carefully. Use gradients, shapes, groups. Cat in suit, helmet glass, board, moon ground.

Let's write SVG ~ 200 lines.

Need no external. Provide title/desc. Layout 1280x800.

Cat: board around y=620, cat body above. Helmet big circle around (640,300) r=110 with cat face inside. Body torso around 640,450. Legs bent to board. Arms out.

Board: curved path from 430,640 Q640,700 850,640 with wheels.

Moon ground horizon y=600.

Let's do.