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: 10.2 s
Cost: $0.0011
Output tokens: 1,880
Spent thinking: 312 tokens
Speed: 190.7 tok/s
Console errors: 0

First token after: 349 ms
First visible text after: 2.5 s
Prompt tokens: 367
Code size: 3.4 KB
Finish reason: stop
Served by: Mistral
Model id: mistralai/mistral-small-2603
Reasoning sent: {"effort":"high"}
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 · 82 lines

Download

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <!-- Background: Deep space with stars -->
  <rect width="800" height="600" fill="#0a0a2a"/>

  <!-- Stars -->
  <g fill="#ffffff">
    <circle cx="100" cy="80" r="1.5"/>
    <circle cx="720" cy="120" r="1"/>
    <circle cx="650" cy="500" r="1.2"/>
    <circle cx="300" cy="450" r="1.8"/>
    <circle cx="450" cy="100" r="1"/>
    <circle cx="200" cy="300" r="1.5"/>
    <circle cx="550" cy="400" r="1.2"/>
    <circle cx="150" cy="550" r="1"/>
    <circle cx="680" cy="200" r="1.5"/>
    <circle cx="350" cy="250" r="1.2"/>
    <circle cx="50" cy="350" r="1.8"/>
    <circle cx="750" cy="480" r="1"/>
  </g>

  <!-- Moon -->
  <circle cx="400" cy="300" r="180" fill="#e0e0e0" stroke="#b0b0b0" stroke-width="2"/>
  <circle cx="320" cy="250" r="30" fill="#c0c0c0"/>
  <circle cx="480" cy="280" r="25" fill="#c0c0c0"/>
  <circle cx="350" cy="350" r="20" fill="#c0c0c0"/>
  <circle cx="450" cy="380" r="15" fill="#c0c0c0"/>
  <circle cx="280" cy="320" r="18" fill="#c0c0c0"/>

  <!-- Astronaut Cat -->
  <g transform="translate(350, 220)">
    <!-- Helmet -->
    <ellipse cx="25" cy="45" rx="22" ry="20" fill="#d0d0d0" stroke="#a0a0a0" stroke-width="1.5"/>
    <ellipse cx="25" cy="45" rx="18" ry="16" fill="#ffffff"/>
    <circle cx="25" cy="40" r="8" fill="#40a0ff" opacity="0.8"/>
    <path d="M17 40 L33 40" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
    <path d="M25 32 L25 48" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>

    <!-- Suit -->
    <rect x="10" y="65" width="30" height="35" rx="5" fill="#ffffff" stroke="#a0a0a0" stroke-width="1"/>
    <rect x="5" y="75" width="10" height="20" fill="#ffffff" stroke="#a0a0a0" stroke-width="1"/>
    <rect x="45" y="75" width="10" height="20" fill="#ffffff" stroke="#a0a0a0" stroke-width="1"/>

    <!-- Arms -->
    <path d="M5 70 L10 80 L15 75" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M45 70 L50 80 L55 75" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>

    <!-- Legs -->
    <path d="M15 100 L10 115 L15 110" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M35 100 L40 115 L35 110" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>

    <!-- Cat body -->
    <ellipse cx="25" cy="85" rx="12" ry="8" fill="#ffffff"/>
    <ellipse cx="25" cy="85" rx="10" ry="6" fill="#f0c0a0"/>

    <!-- Tail -->
    <path d="M35 80 Q45 85 40 95" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>

    <!-- Paws on skateboard -->
    <circle cx="15" cy="115" r="3" fill="#f0c0a0"/>
    <circle cx="35" cy="115" r="3" fill="#f0c0a0"/>
  </g>

  <!-- Skateboard -->
  <g transform="translate(330, 280)">
    <rect x="0" y="-5" width="40" height="8" rx="3" fill="#8b4513"/>
    <rect x="2" y="-7" width="36" height="2" fill="#000000"/>
    <rect x="2" y="5" width="36" height="2" fill="#000000"/>
    <circle cx="5" cy="0" r="4" fill="#333333"/>
    <circle cx="35" cy="0" r="4" fill="#333333"/>
    <path d="M5 0 L35 0" stroke="#000000" stroke-width="1"/>
  </g>

  <!-- Additional stars for depth -->
  <g fill="#ffffff">
    <circle cx="50" cy="150" r="1.2"/>
    <circle cx="700" cy="80" r="1.5"/>
    <circle cx="120" cy="500" r="1"/>
    <circle cx="600" cy="400" r="1.8"/>
    <circle cx="250" cy="200" r="1.2"/>
    <circle cx="580" cy="550" r="1.5"/>
  </g>
</svg>

Reasoning trace (312 tokens)

The user wants an SVG of an astronaut cat skateboarding on the moon. I need to create a self-contained SVG file that depicts this scene. Let me think about the key elements:

1. The moon surface - should be a grayish circle with craters
2. An astronaut cat - needs a helmet, suit, and cat features
3. A skateboard - for the cat to ride on
4. The cat should be in a skateboarding pose on the moon

I'll need to use SVG elements like circles, paths, rectangles, and maybe some filters for texture. Let me sketch this out:

- Moon: Large circle with some crater details
- Astronaut cat: 
  - Cat body (maybe in a spacesuit)
  - Helmet with a visor
  - Arms and legs in a skateboarding stance
  - Paws on the skateboard
- Skateboard: Underneath the cat
- Background: Dark space with stars

I should make it visually appealing and recognizable. Let me structure the SVG with proper dimensions and viewBox.

I'll create:
1. A dark background with stars
2. The moon as a large gray circle with some craters
3. The astronaut cat wearing a white suit with a helmet
4. The cat in a crouched skateboarding position
5. A skateboard under the cat's paws

Let me write the SVG code with all these elements. I'll make sure it's self-contained and looks good at different sizes.