Skateboarding astronaut catOne-line

Mistral Small 4

by MistralReasoningClean

Open in new window

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

How it went

Total time: 6.8 s
Cost: $0.0008
Output tokens: 1,243
Spent thinking: 0 tokens
Speed: 194.6 tok/s
Console errors: 0

First token after: 369 ms
First visible text after: 369 ms
Prompt tokens: 367
Code size: 2.4 KB
Finish reason: stop
Served by: Mistral
Model id: mistralai/mistral-small-2603
Reasoning sent: {"effort":"none"}
Max output: 209,715 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 · 61 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="1280" height="800">
  <!-- Background -->
  <rect width="100%" height="100%" fill="#0a0a2a"/>

  <!-- Moon surface -->
  <ellipse cx="400" cy="450" rx="380" ry="50" fill="#f5f5f5"/>
  <ellipse cx="400" cy="450" rx="350" ry="45" fill="#e0e0e0"/>
  <ellipse cx="400" cy="450" rx="320" ry="40" fill="#d0d0d0"/>

  <!-- Craters -->
  <circle cx="200" cy="400" r="30" fill="#c0c0c0"/>
  <circle cx="600" cy="420" r="25" fill="#c0c0c0"/>
  <circle cx="300" cy="430" r="15" fill="#c0c0c0"/>
  <circle cx="500" cy="410" r="20" fill="#c0c0c0"/>

  <!-- Skateboard -->
  <rect x="350" y="380" width="100" height="10" rx="5" fill="#8B4513"/>
  <rect x="360" y="375" width="80" height="5" rx="2" fill="#5D4037"/>
  <circle cx="365" cy="390" r="8" fill="#333"/>
  <circle cx="435" cy="390" r="8" fill="#333"/>

  <!-- Astronaut Cat -->
  <!-- Body -->
  <ellipse cx="400" cy="350" rx="25" ry="20" fill="#f9c846"/>
  <!-- Head -->
  <circle cx="400" cy="320" r="18" fill="#f9c846"/>
  <!-- Helmet -->
  <circle cx="400" cy="320" r="22" fill="#a0d0ff" stroke="#555" stroke-width="2"/>
  <circle cx="400" cy="315" r="5" fill="#333"/>
  <!-- Ears -->
  <path d="M385 310 L380 295 L390 295 Z" fill="#f9c846"/>
  <path d="M415 310 L420 295 L410 295 Z" fill="#f9c846"/>
  <!-- Tail -->
  <path d="M425 350 Q450 340 460 360 Q450 370 425 350" fill="#f9c846"/>
  <!-- Arms -->
  <ellipse cx="375" cy="350" rx="8" ry="12" fill="#f9c846" transform="rotate(-30 375 350)"/>
  <ellipse cx="425" cy="350" rx="8" ry="12" fill="#f9c846" transform="rotate(30 425 350)"/>
  <!-- Legs -->
  <ellipse cx="385" cy="380" rx="6" ry="10" fill="#f9c846"/>
  <ellipse cx="415" cy="380" rx="6" ry="10" fill="#f9c846"/>

  <!-- Stars -->
  <g fill="#fff">
    <circle cx="100" cy="100" r="2"/>
    <circle cx="150" cy="80" r="1.5"/>
    <circle cx="200" cy="120" r="2.5"/>
    <circle cx="250" cy="90" r="1"/>
    <circle cx="300" cy="110" r="1.5"/>
    <circle cx="350" cy="70" r="2"/>
    <circle cx="400" cy="130" r="1.5"/>
    <circle cx="450" cy="80" r="2.5"/>
    <circle cx="500" cy="100" r="1"/>
    <circle cx="550" cy="120" r="1.5"/>
    <circle cx="600" cy="90" r="2"/>
    <circle cx="650" cy="110" r="1.5"/>
    <circle cx="700" cy="70" r="2.5"/>
  </g>

  <!-- "Click to start" message -->
  <text x="400" y="480" font-family="Arial" font-size="20" fill="#fff" text-anchor="middle">Click or press a key to start</text>
</svg>