Skateboarding astronaut catOne-line

Ministral 3 14B 2512

by Mistralreasoning defaultClean

Open in new window

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

How it went

Total time: 15.5 s
Cost: $0.0005
Output tokens: 2,020
Spent thinking: 0 tokens
Speed: 132.5 tok/s
Console errors: 0

First token after: 297 ms
First visible text after: 297 ms
Prompt tokens: 355
Code size: 5.6 KB
Finish reason: stop
Served by: Mistral
Model id: mistralai/ministral-14b-2512
Reasoning sent: model default
Max output: 209,715 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 · 136 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Astronaut Cat Skateboarding on the Moon</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #0a0a2a;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        .container {
            text-align: center;
            position: relative;
        }
        svg {
            max-width: 100%;
            height: auto;
            display: block;
        }
        .caption {
            color: white;
            margin-top: 20px;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <div class="container">
        <svg viewBox="0 0 1280 800" xmlns="http://www.w3.org/2000/svg">
            <!-- Moon background -->
            <rect width="100%" height="100%" fill="#2a2a4a" />

            <!-- Moon surface texture -->
            <filter id="moonTexture" x="0" y="0" width="100%" height="100%">
                <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise"/>
                <feDiffuseLighting in="noise" lighting-color="#ddd" surfaceScale="3" result="diffuse">
                    <feDistantLight azimuth="45" elevation="60"/>
                </feDiffuseLighting>
                <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="0" k2="1" k3="0.3" k4="0"/>
            </filter>
            <circle cx="640" cy="400" r="350" fill="#e0e0e0" filter="url(#moonTexture)"/>

            <!-- Crater -->
            <circle cx="400" cy="300" r="80" fill="#a0a0a0" opacity="0.7"/>
            <circle cx="900" cy="500" r="100" fill="#a0a0a0" opacity="0.7"/>

            <!-- Stars -->
            <g fill="#fff">
                <circle cx="100" cy="150" r="1" opacity="0.8"/>
                <circle cx="1200" cy="200" r="1.2" opacity="0.8"/>
                <circle cx="300" cy="600" r="0.8" opacity="0.8"/>
                <circle cx="800" cy="100" r="1.1" opacity="0.8"/>
                <circle cx="1100" cy="700" r="0.9" opacity="0.8"/>
                <circle cx="200" cy="750" r="1" opacity="0.8"/>
                <circle cx="600" cy="50" r="1.3" opacity="0.8"/>
                <circle cx="1000" cy="650" r="0.7" opacity="0.8"/>
            </g>

            <!-- Astronaut Cat -->
            <g transform="translate(400, 200) scale(0.8)">
                <!-- Helmet -->
                <path d="M0,0 C50,-50 100,-50 100,0 L100,100 C100,150 50,150 0,100 Z" fill="#333" stroke="#000" stroke-width="2"/>

                <!-- Visor -->
                <path d="M20,20 L80,20 L80,80 L20,80 Z" fill="none" stroke="#000" stroke-width="1"/>

                <!-- Body -->
                <path d="M50,100 C70,120 90,120 110,100 C130,80 130,60 110,40 C90,20 70,20 50,40 C30,60 30,80 50,100 Z" fill="#4a90e2" stroke="#000" stroke-width="2"/>

                <!-- Arms -->
                <path d="M30,80 L10,100" stroke="#000" stroke-width="3" fill="none"/>
                <path d="M70,80 L90,100" stroke="#000" stroke-width="3" fill="none"/>

                <!-- Legs -->
                <path d="M50,140 L30,180" stroke="#000" stroke-width="3" fill="none"/>
                <path d="M50,140 L70,180" stroke="#000" stroke-width="3" fill="none"/>

                <!-- Tail -->
                <path d="M110,80 Q130,60 150,80" stroke="#000" stroke-width="3" fill="none"/>

                <!-- Cat ears -->
                <path d="M30,20 L20,0 L10,20 Z" fill="#333" stroke="#000" stroke-width="1"/>
                <path d="M70,20 L80,0 L90,20 Z" fill="#333" stroke="#000" stroke-width="1"/>

                <!-- Cat eyes -->
                <circle cx="40" cy="40" r="3" fill="#fff"/>
                <circle cx="60" cy="40" r="3" fill="#fff"/>
                <circle cx="40" cy="40" r="1" fill="#000"/>
                <circle cx="60" cy="40" r="1" fill="#000"/>

                <!-- Cat nose -->
                <path d="M50,50 L50,55 L55,52 Z" fill="#000"/>
            </g>

            <!-- Skateboard -->
            <g transform="translate(500, 250) scale(0.7)">
                <!-- Board -->
                <rect x="0" y="0" width="100" height="10" fill="#8B4513" stroke="#000" stroke-width="2" rx="2"/>

                <!-- Wheels -->
                <circle cx="20" cy="15" r="8" fill="#000"/>
                <circle cx="80" cy="15" r="8" fill="#000"/>

                <!-- Truck -->
                <rect x="35" y="-10" width="30" height="5" fill="#555" stroke="#000" stroke-width="1"/>

                <!-- Skateboarder's feet -->
                <path d="M10,0 L5,-10" stroke="#000" stroke-width="3" fill="none"/>
                <path d="M90,0 L95,-10" stroke="#000" stroke-width="3" fill="none"/>
            </g>

            <!-- Motion blur effect for skateboard -->
            <path d="M450,250 Q500,240 550,250" stroke="#8B4513" stroke-width="8" fill="none" opacity="0.3" stroke-linecap="round"/>
            <path d="M450,255 Q500,245 550,255" stroke="#8B4513" stroke-width="8" fill="none" opacity="0.3" stroke-linecap="round"/>

            <!-- Moon dust -->
            <g fill="#fff" opacity="0.6">
                <circle cx="550" cy="230" r="2"/>
                <circle cx="570" cy="225" r="1.5"/>
                <circle cx="530" cy="240" r="2.5"/>
                <circle cx="590" cy="235" r="1"/>
                <circle cx="560" cy="250" r="1.8"/>
            </g>
        </svg>
        <div class="caption">Astronaut Cat Skateboarding on the Moon</div>
    </div>
</body>
</html>

Raw response

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Astronaut Cat Skateboarding on the Moon</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #0a0a2a;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        .container {
            text-align: center;
            position: relative;
        }
        svg {
            max-width: 100%;
            height: auto;
            display: block;
        }
        .caption {
            color: white;
            margin-top: 20px;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <div class="container">
        <svg viewBox="0 0 1280 800" xmlns="http://www.w3.org/2000/svg">
            <!-- Moon background -->
            <rect width="100%" height="100%" fill="#2a2a4a" />

            <!-- Moon surface texture -->
            <filter id="moonTexture" x="0" y="0" width="100%" height="100%">
                <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise"/>
                <feDiffuseLighting in="noise" lighting-color="#ddd" surfaceScale="3" result="diffuse">
                    <feDistantLight azimuth="45" elevation="60"/>
                </feDiffuseLighting>
                <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="0" k2="1" k3="0.3" k4="0"/>
            </filter>
            <circle cx="640" cy="400" r="350" fill="#e0e0e0" filter="url(#moonTexture)"/>

            <!-- Crater -->
            <circle cx="400" cy="300" r="80" fill="#a0a0a0" opacity="0.7"/>
            <circle cx="900" cy="500" r="100" fill="#a0a0a0" opacity="0.7"/>

            <!-- Stars -->
            <g fill="#fff">
                <circle cx="100" cy="150" r="1" opacity="0.8"/>
                <circle cx="1200" cy="200" r="1.2" opacity="0.8"/>
                <circle cx="300" cy="600" r="0.8" opacity="0.8"/>
                <circle cx="800" cy="100" r="1.1" opacity="0.8"/>
                <circle cx="1100" cy="700" r="0.9" opacity="0.8"/>
                <circle cx="200" cy="750" r="1" opacity="0.8"/>
                <circle cx="600" cy="50" r="1.3" opacity="0.8"/>
                <circle cx="1000" cy="650" r="0.7" opacity="0.8"/>
            </g>

            <!-- Astronaut Cat -->
            <g transform="translate(400, 200) scale(0.8)">
                <!-- Helmet -->
                <path d="M0,0 C50,-50 100,-50 100,0 L100,100 C100,150 50,150 0,100 Z" fill="#333" stroke="#000" stroke-width="2"/>

                <!-- Visor -->
                <path d="M20,20 L80,20 L80,80 L20,80 Z" fill="none" stroke="#000" stroke-width="1"/>

                <!-- Body -->
                <path d="M50,100 C70,120 90,120 110,100 C130,80 130,60 110,40 C90,20 70,20 50,40 C30,60 30,80 50,100 Z" fill="#4a90e2" stroke="#000" stroke-width="2"/>

                <!-- Arms -->
                <path d="M30,80 L10,100" stroke="#000" stroke-width="3" fill="none"/>
                <path d="M70,80 L90,100" stroke="#000" stroke-width="3" fill="none"/>

                <!-- Legs -->
                <path d="M50,140 L30,180" stroke="#000" stroke-width="3" fill="none"/>
                <path d="M50,140 L70,180" stroke="#000" stroke-width="3" fill="none"/>

                <!-- Tail -->
                <path d="M110,80 Q130,60 150,80" stroke="#000" stroke-width="3" fill="none"/>

                <!-- Cat ears -->
                <path d="M30,20 L20,0 L10,20 Z" fill="#333" stroke="#000" stroke-width="1"/>
                <path d="M70,20 L80,0 L90,20 Z" fill="#333" stroke="#000" stroke-width="1"/>

                <!-- Cat eyes -->
                <circle cx="40" cy="40" r="3" fill="#fff"/>
                <circle cx="60" cy="40" r="3" fill="#fff"/>
                <circle cx="40" cy="40" r="1" fill="#000"/>
                <circle cx="60" cy="40" r="1" fill="#000"/>

                <!-- Cat nose -->
                <path d="M50,50 L50,55 L55,52 Z" fill="#000"/>
            </g>

            <!-- Skateboard -->
            <g transform="translate(500, 250) scale(0.7)">
                <!-- Board -->
                <rect x="0" y="0" width="100" height="10" fill="#8B4513" stroke="#000" stroke-width="2" rx="2"/>

                <!-- Wheels -->
                <circle cx="20" cy="15" r="8" fill="#000"/>
                <circle cx="80" cy="15" r="8" fill="#000"/>

                <!-- Truck -->
                <rect x="35" y="-10" width="30" height="5" fill="#555" stroke="#000" stroke-width="1"/>

                <!-- Skateboarder's feet -->
                <path d="M10,0 L5,-10" stroke="#000" stroke-width="3" fill="none"/>
                <path d="M90,0 L95,-10" stroke="#000" stroke-width="3" fill="none"/>
            </g>

            <!-- Motion blur effect for skateboard -->
            <path d="M450,250 Q500,240 550,250" stroke="#8B4513" stroke-width="8" fill="none" opacity="0.3" stroke-linecap="round"/>
            <path d="M450,255 Q500,245 550,255" stroke="#8B4513" stroke-width="8" fill="none" opacity="0.3" stroke-linecap="round"/>

            <!-- Moon dust -->
            <g fill="#fff" opacity="0.6">
                <circle cx="550" cy="230" r="2"/>
                <circle cx="570" cy="225" r="1.5"/>
                <circle cx="530" cy="240" r="2.5"/>
                <circle cx="590" cy="235" r="1"/>
                <circle cx="560" cy="250" r="1.8"/>
            </g>
        </svg>
        <div class="caption">Astronaut Cat Skateboarding on the Moon</div>
    </div>
</body>
</html>
```