Skateboarding astronaut catOne-line

MiMo-V2.6-Pro

by Xiaomireasoning defaultClean

Open in new window

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

How it went

Total time: 1 min 29 s
Cost: $0.0045
Output tokens: 6,700
Spent thinking: 0 tokens
Speed: 77.5 tok/s
Console errors: 0

First token after: 2.4 s
First visible text after: 2.4 s
Prompt tokens: 353
Code size: 12.3 KB
Finish reason: stop
Served by: GMICloud
Model id: xiaomi/mimo-v2.6-pro
Reasoning sent: model default
Max output: 131,072 tokens
Generated: Nov 13, 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 · 213 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="1280" height="800" role="img" aria-label="An astronaut cat skateboarding on the moon">
  <defs>
    <radialGradient id="space" cx="50%" cy="35%" r="85%">
      <stop offset="0%" stop-color="#2c2c5c"/>
      <stop offset="55%" stop-color="#12122e"/>
      <stop offset="100%" stop-color="#05050f"/>
    </radialGradient>
    <radialGradient id="earthGrad" cx="35%" cy="30%" r="75%">
      <stop offset="0%" stop-color="#8fe7ff"/>
      <stop offset="55%" stop-color="#2b7ed8"/>
      <stop offset="100%" stop-color="#123c8c"/>
    </radialGradient>
    <radialGradient id="moonGrad" cx="50%" cy="25%" r="90%">
      <stop offset="0%" stop-color="#d9d9e2"/>
      <stop offset="65%" stop-color="#a7a7b8"/>
      <stop offset="100%" stop-color="#5d5d72"/>
    </radialGradient>
    <linearGradient id="suitGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="55%" stop-color="#d7d7e6"/>
      <stop offset="100%" stop-color="#9a9ab2"/>
    </linearGradient>
    <linearGradient id="visorGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffd98a"/>
      <stop offset="45%" stop-color="#f28c3c"/>
      <stop offset="100%" stop-color="#6b2d63"/>
    </linearGradient>
    <linearGradient id="boardGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#7cf7ff"/>
      <stop offset="50%" stop-color="#3b7fe8"/>
      <stop offset="100%" stop-color="#23327a"/>
    </linearGradient>
    <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
      <feGaussianBlur stdDeviation="8" result="b"/>
      <feMerge>
        <feMergeNode in="b"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="softGlow" x="-80%" y="-80%" width="260%" height="260%">
      <feGaussianBlur stdDeviation="18"/>
    </filter>
    <style>
      .star{fill:#fff}
      .starblue{fill:#9fd8ff}
      .crater{fill:#77778b;opacity:.55}
      .dust{fill:#e8e8f2;opacity:.85}
      .line{fill:none;stroke-linecap:round;stroke-linejoin:round}
      .darkline{stroke:#252544;stroke-width:6}
    </style>
  </defs>

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

  <!-- Starfield -->
  <g class="star">
    <circle cx="72" cy="70" r="2.2"/><circle cx="140" cy="132" r="1.4"/><circle cx="215" cy="58" r="2.8"/>
    <circle cx="286" cy="168" r="1.7"/><circle cx="352" cy="96" r="2.3"/><circle cx="430" cy="42" r="1.5"/>
    <circle cx="512" cy="142" r="2.1"/><circle cx="598" cy="72" r="1.6"/><circle cx="672" cy="150" r="2.5"/>
    <circle cx="748" cy="48" r="1.8"/><circle cx="826" cy="118" r="2.2"/><circle cx="910" cy="64" r="1.5"/>
    <circle cx="982" cy="158" r="2.7"/><circle cx="1060" cy="82" r="1.8"/><circle cx="1148" cy="140" r="2.3"/>
    <circle cx="1218" cy="52" r="1.6"/><circle cx="110" cy="226" r="1.8"/><circle cx="196" cy="288" r="2.4"/>
    <circle cx="332" cy="246" r="1.6"/><circle cx="462" cy="292" r="2.1"/><circle cx="560" cy="232" r="1.4"/>
    <circle cx="700" cy="286" r="2.2"/><circle cx="846" cy="238" r="1.7"/><circle cx="952" cy="304" r="2.4"/>
    <circle cx="1092" cy="252" r="1.5"/><circle cx="1192" cy="312" r="2.1"/>
  </g>
  <g class="starblue" opacity=".9">
    <circle cx="118" cy="382" r="2.6"/><circle cx="258" cy="356" r="2"/><circle cx="398" cy="412" r="2.4"/>
    <circle cx="548" cy="370" r="1.8"/><circle cx="706" cy="418" r="2.7"/><circle cx="862" cy="366" r="1.9"/>
    <circle cx="1018" cy="410" r="2.5"/><circle cx="1168" cy="372" r="1.8"/>
    <circle cx="82" cy="512" r="1.8"/><circle cx="228" cy="548" r="2.2"/><circle cx="372" cy="502" r="1.5"/>
    <circle cx="1238" cy="488" r="2.1"/>
  </g>

  <!-- distant nebula -->
  <g opacity=".22" filter="url(#softGlow)">
    <ellipse cx="232" cy="188" rx="150" ry="72" fill="#7c4ee8"/>
    <ellipse cx="1030" cy="210" rx="170" ry="66" fill="#d34fb8"/>
  </g>

  <!-- Earth -->
  <g>
    <circle cx="1052" cy="146" r="72" fill="#64b9ff" opacity=".18" filter="url(#softGlow)"/>
    <circle cx="1052" cy="146" r="66" fill="url(#earthGrad)"/>
    <path d="M1005 122c18-14 36-8 52 2 12 8 20 4 34-4-8 18-22 26-42 22-16-3-26 2-38 12-10 8-18-4-6-32z" fill="#57c98c" opacity=".9"/>
    <path d="M1022 182c14-10 30-8 44 2 12 8 26 6 36-4-4 22-22 34-46 30-18-3-28-12-34-28z" fill="#57c98c" opacity=".85"/>
    <path d="M998 118c18 8 22 18 16 30-10 20 2 34 14 44-28-6-46-28-46-52 0-10 4-18 16-22z" fill="#ffffff" opacity=".35"/>
    <circle cx="1052" cy="146" r="66" fill="none" stroke="#b9ecff" stroke-width="3" opacity=".65"/>
  </g>

  <!-- Moon horizon -->
  <path d="M0 552 C180 500 330 520 470 540 C640 564 760 532 900 522 C1060 510 1170 540 1280 520 L1280 800 L0 800 Z" fill="url(#moonGrad)"/>
  <path d="M0 560 C170 512 330 530 470 550 C640 574 770 542 910 532 C1060 522 1170 552 1280 532" fill="none" stroke="#f0f0f8" stroke-width="5" opacity=".55"/>

  <!-- Moon craters -->
  <g class="crater">
    <ellipse cx="120" cy="650" rx="86" ry="26"/>
    <ellipse cx="120" cy="644" rx="86" ry="26" fill="#c5c5d2" opacity=".75"/>
    <ellipse cx="348" cy="712" rx="118" ry="32"/>
    <ellipse cx="348" cy="705" rx="118" ry="32" fill="#c5c5d2" opacity=".7"/>
    <ellipse cx="1110" cy="666" rx="104" ry="30"/>
    <ellipse cx="1110" cy="659" rx="104" ry="30" fill="#c5c5d2" opacity=".72"/>
    <ellipse cx="880" cy="742" rx="72" ry="20"/>
    <ellipse cx="880" cy="737" rx="72" ry="20" fill="#c5c5d2" opacity=".7"/>
    <ellipse cx="640" cy="626" rx="34" ry="10"/>
    <ellipse cx="640" cy="622" rx="34" ry="10" fill="#c5c5d2" opacity=".75"/>
    <ellipse cx="1010" cy="580" rx="22" ry="7"/>
    <ellipse cx="1010" cy="577" rx="22" ry="7" fill="#c5c5d2" opacity=".75"/>
  </g>

  <!-- dust behind skateboard -->
  <g class="dust">
    <circle cx="470" cy="606" r="7"/><circle cx="432" cy="622" r="5"/><circle cx="500" cy="632" r="4"/>
    <circle cx="398" cy="596" r="3.5"/><circle cx="536" cy="612" r="6"/><circle cx="562" cy="638" r="3"/>
  </g>

  <!-- skateboard shadow -->
  <ellipse cx="626" cy="642" rx="188" ry="22" fill="#4b4b62" opacity=".45"/>

  <!-- skateboard -->
  <g transform="rotate(-8 626 610)">
    <path d="M444 596 C472 578 512 574 626 574 C742 574 782 578 812 596 C816 602 812 612 802 616 C772 628 730 632 626 632 C522 632 480 628 450 616 C440 612 438 602 444 596 Z" fill="url(#boardGrad)" stroke="#1c2350" stroke-width="6"/>
    <path d="M456 598 C492 588 548 584 626 584 C704 584 760 588 798 598" class="line" stroke="#b7f6ff" stroke-width="5" opacity=".8"/>
    <path d="M470 612 C520 622 560 624 626 624 C692 624 736 622 782 612" class="line" stroke="#1f2b73" stroke-width="4" opacity=".8"/>
    <rect x="566" y="578" width="120" height="46" rx="12" fill="#f6c94b" opacity=".95"/>
    <path d="M584 600 h84 M626 584 v34" class="line" stroke="#b06b2b" stroke-width="5"/>
    <circle cx="514" cy="636" r="18" fill="#22223c" stroke="#b9b9d2" stroke-width="6"/>
    <circle cx="742" cy="636" r="18" fill="#22223c" stroke="#b9b9d2" stroke-width="6"/>
  </g>

  <!-- cat astronaut -->
  <g transform="translate(0,0)">
    <!-- backpack -->
    <g transform="rotate(-6 640 430)">
      <rect x="716" y="332" width="82" height="168" rx="28" fill="#a9a9c2" stroke="#29294c" stroke-width="7"/>
      <rect x="730" y="352" width="24" height="112" rx="11" fill="#e9e9f4" opacity=".65"/>
      <rect x="764" y="352" width="18" height="52" rx="9" fill="#f2a54f"/>
    </g>

    <!-- back leg -->
    <g transform="rotate(12 604 520)">
      <path d="M588 470 C584 512 588 542 592 566 C596 588 616 588 628 568 C638 550 638 512 634 474 Z" fill="url(#suitGrad)" stroke="#29294c" stroke-width="7"/>
      <path d="M582 566 C602 558 632 558 648 568 C656 574 654 586 644 592 C620 600 588 598 578 588 C572 580 574 572 582 566 Z" fill="#d7d7e6" stroke="#29294c" stroke-width="7"/>
    </g>

    <!-- front leg -->
    <g transform="rotate(-14 660 520)">
      <path d="M636 470 C630 512 632 546 638 572 C642 592 664 592 676 572 C688 550 688 512 682 474 Z" fill="url(#suitGrad)" stroke="#29294c" stroke-width="7"/>
      <path d="M632 572 C652 562 684 562 700 572 C710 578 708 590 698 596 C672 604 638 602 628 592 C622 584 624 578 632 572 Z" fill="#d7d7e6" stroke="#29294c" stroke-width="7"/>
    </g>

    <!-- tail -->
    <path d="M554 474 C494 458 468 414 492 382 C510 358 548 364 552 392 C556 416 528 422 516 404" class="line" stroke="#d7d7e6" stroke-width="26"/>
    <path d="M554 474 C494 458 468 414 492 382 C510 358 548 364 552 392 C556 416 528 422 516 404" class="line" stroke="#29294c" stroke-width="7"/>

    <!-- body -->
    <path d="M570 354 C566 316 596 288 640 286 C688 284 722 312 724 356 C734 402 730 454 700 482 C676 504 596 506 572 482 C548 454 548 398 570 354 Z" fill="url(#suitGrad)" stroke="#29294c" stroke-width="8"/>
    <path d="M586 392 C610 414 668 414 700 392" class="line" stroke="#9a9ab2" stroke-width="5" opacity=".8"/>
    <rect x="586" y="424" width="112" height="52" rx="14" fill="#c7c7d8" stroke="#29294c" stroke-width="6"/>
    <circle cx="612" cy="450" r="8" fill="#f26b4f"/>
    <circle cx="638" cy="450" r="8" fill="#4de1ff"/>
    <circle cx="664" cy="450" r="8" fill="#f4c84b"/>
    <path d="M690 438 h12 M690 452 h12 M690 466 h12" class="line" stroke="#29294c" stroke-width="5"/>

    <!-- arms -->
    <path d="M578 338 C532 346 500 380 494 420 C490 448 514 458 528 438 C542 418 552 392 584 378 Z" fill="url(#suitGrad)" stroke="#29294c" stroke-width="7"/>
    <path d="M716 338 C766 342 798 370 812 402 C822 424 802 442 786 428 C766 410 748 388 714 378 Z" fill="url(#suitGrad)" stroke="#29294c" stroke-width="7"/>
    <!-- gloves -->
    <path d="M492 414 C508 402 528 412 532 428 C536 444 520 458 506 452 C490 446 480 426 492 414 Z" fill="#f3f3fa" stroke="#29294c" stroke-width="7"/>
    <path d="M790 396 C808 390 826 404 826 420 C826 438 808 446 794 436 C780 426 776 402 790 396 Z" fill="#f3f3fa" stroke="#29294c" stroke-width="7"/>

    <!-- helmet -->
    <circle cx="642" cy="238" r="112" fill="#e9e9f4" stroke="#29294c" stroke-width="8"/>
    <circle cx="642" cy="238" r="92" fill="url(#visorGrad)" stroke="#29294c" stroke-width="6"/>
    <path d="M576 202 C598 166 660 150 706 176 C674 168 612 182 576 202 Z" fill="#fff" opacity=".55"/>
    <path d="M582 282 C622 304 682 300 712 272" class="line" stroke="#ffffff" stroke-width="7" opacity=".35"/>

    <!-- cat ears -->
    <path d="M566 170 L556 92 L622 140 Z" fill="#d7d7e6" stroke="#29294c" stroke-width="8"/>
    <path d="M718 170 L730 92 L662 140 Z" fill="#d7d7e6" stroke="#29294c" stroke-width="8"/>
    <path d="M572 154 L568 116 L604 142 Z" fill="#f28c8c"/>
    <path d="M712 154 L718 116 L682 142 Z" fill="#f28c8c"/>

    <!-- cat face inside visor -->
    <path d="M598 226 C612 208 632 208 644 224 C658 206 682 208 692 228 C704 252 690 282 666 292 C648 300 620 296 606 280 C592 264 588 242 598 226 Z" fill="#f6c9a6" opacity=".92"/>
    <path d="M616 236 C622 228 632 228 638 236 M658 236 C664 228 674 228 680 236" class="line" stroke="#4b2b2b" stroke-width="6"/>
    <circle cx="627" cy="242" r="6" fill="#3b2020"/>
    <circle cx="669" cy="242" r="6" fill="#3b2020"/>
    <path d="M642 258 L654 258 L648 266 Z" fill="#d46a74"/>
    <path d="M648 266 C642 276 632 276 626 268 M648 266 C654 276 664 276 670 268" class="line" stroke="#4b2b2b" stroke-width="5"/>
    <path d="M602 258 L572 250 M602 268 L570 272 M694 258 L724 250 M694 268 L726 272" class="line" stroke="#4b2b2b" stroke-width="4" opacity=".8"/>

    <!-- helmet ring -->
    <path d="M560 302 C592 332 692 332 724 302" class="line" stroke="#b7b7cc" stroke-width="12"/>
    <path d="M560 302 C592 332 692 332 724 302" class="line" stroke="#29294c" stroke-width="5"/>

    <!-- shoulder patches -->
    <circle cx="582" cy="348" r="14" fill="#4de1ff" stroke="#29294c" stroke-width="5"/>
    <circle cx="702" cy="348" r="14" fill="#f26b4f" stroke="#29294c" stroke-width="5"/>
    <path d="M578 348 h8 M582 344 v8" class="line" stroke="#fff" stroke-width="3"/>
  </g>

  <!-- motion swoosh -->
  <path d="M344 470 C396 430 438 418 480 414" class="line" stroke="#7cf7ff" stroke-width="8" opacity=".8" filter="url(#glow)"/>
  <path d="M322 512 C384 474 430 462 470 458" class="line" stroke="#c886ff" stroke-width="5" opacity=".7"/>

  <!-- floating moon dust -->
  <g class="dust">
    <circle cx="382" cy="566" r="5"/><circle cx="352" cy="590" r="3"/><circle cx="420" cy="620" r="4"/>
    <circle cx="456" cy="574" r="3"/><circle cx="842" cy="586" r="5"/><circle cx="874" cy="612" r="3"/>
  </g>
</svg>