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.7 s
Cost: $0.0009
Output tokens: 1,295
Spent thinking: 0 tokens
Speed: 203.7 tok/s
Console errors: 0

First token after: 380 ms
First visible text after: 380 ms
Prompt tokens: 367
Code size: 2.5 KB
Finish reason: stop
Served by: Mistral
Model id: mistralai/mistral-small-2603
Reasoning sent: model default
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 · 59 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <!-- Moon background -->
  <rect width="800" height="600" fill="#e6e6e6"/>
  <circle cx="400" cy="300" r="250" fill="#d1d1d1"/>
  <circle cx="200" cy="200" r="50" fill="#c1c1c1"/>
  <circle cx="600" cy="400" r="70" fill="#c1c1c1"/>

  <!-- Astronaut cat -->
  <!-- Head -->
  <ellipse cx="400" cy="250" rx="40" ry="35" fill="#f9c846" stroke="#333" stroke-width="2"/>
  <!-- Ears -->
  <path d="M370 220 L350 190 L380 210 Z" fill="#f9c846" stroke="#333" stroke-width="2"/>
  <path d="M430 220 L450 190 L420 210 Z" fill="#f9c846" stroke="#333" stroke-width="2"/>
  <!-- Inner ears -->
  <path d="M375 225 L355 200 L380 220 Z" fill="#ffd166"/>
  <path d="M435 225 L455 200 L420 220 Z" fill="#ffd166"/>
  <!-- Eyes -->
  <circle cx="385" cy="245" r="8" fill="#333"/>
  <circle cx="415" cy="245" r="8" fill="#333"/>
  <!-- Nose -->
  <path d="M400 260 L395 270 L405 270 Z" fill="#ff6b6b"/>
  <!-- Mouth -->
  <path d="M400 270 Q400 275 405 275" stroke="#333" stroke-width="1" fill="none"/>
  <!-- Body -->
  <ellipse cx="400" cy="320" rx="35" ry="25" fill="#f9c846" stroke="#333" stroke-width="2"/>
  <!-- Arms -->
  <path d="M365 310 L340 300 L340 320 Z" fill="#f9c846" stroke="#333" stroke-width="2"/>
  <path d="M435 310 L460 300 L460 320 Z" fill="#f9c846" stroke="#333" stroke-width="2"/>
  <!-- Legs -->
  <path d="M385 345 L370 360 L390 360 Z" fill="#f9c846" stroke="#333" stroke-width="2"/>
  <path d="M415 345 L430 360 L410 360 Z" fill="#f9c846" stroke="#333" stroke-width="2"/>

  <!-- Astronaut helmet -->
  <ellipse cx="400" cy="250" rx="50" ry="40" fill="#a0d2eb" stroke="#333" stroke-width="2"/>
  <!-- Helmet visor -->
  <path d="M350 250 Q400 220 450 250" fill="#e6f7ff" stroke="#333" stroke-width="1"/>
  <!-- Helmet details -->
  <circle cx="380" cy="240" r="3" fill="#333"/>
  <circle cx="420" cy="240" r="3" fill="#333"/>

  <!-- Skateboard -->
  <rect x="370" y="360" width="60" height="10" rx="5" fill="#8b4513"/>
  <rect x="375" y="355" width="50" height="5" rx="2" fill="#555"/>
  <!-- Wheels -->
  <circle cx="375" cy="365" r="5" fill="#333"/>
  <circle cx="425" cy="365" r="5" fill="#333"/>

  <!-- Stars -->
  <g fill="#fff">
    <circle cx="100" cy="50" r="2"/>
    <circle cx="700" cy="80" r="1.5"/>
    <circle cx="150" cy="550" r="2"/>
    <circle cx="650" cy="520" r="1.5"/>
    <circle cx="300" cy="100" r="1.5"/>
    <circle cx="500" cy="500" r="2"/>
    <circle cx="200" cy="400" r="1.5"/>
    <circle cx="600" cy="200" r="2"/>
  </g>
</svg>