Skateboarding astronaut catOne-line

Gemini 3.1 Flash Lite

by GoogleReasoningClean

Open in new window

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

How it went

Total time: 4.4 s
Cost: $0.0025
Output tokens: 1,585
Spent thinking: 128 tokens
Speed: 482.6 tok/s
Console errors: 0

First token after: 1.1 s
First visible text after: 1.1 s
Prompt tokens: 353
Code size: 3.8 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"low"}
Max output: 65,536 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 · 106 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 Skating on the Moon</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #0b0e14;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            width: 100%;
            max-width: 800px;
            aspect-ratio: 16 / 9;
            position: relative;
        }
        svg {
            width: 100%;
            height: 100%;
        }
        .text-overlay {
            position: absolute;
            bottom: 10%;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 1.5rem;
            text-shadow: 2px 2px 4px #000;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        .cat-group {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes skate-move {
            0% { transform: translateX(-100px); }
            100% { transform: translateX(100px); }
        }
        .skate-container {
            animation: skate-move 4s linear infinite alternate;
        }
    </style>
</head>
<body>

<div class="container">
    <svg viewBox="0 0 800 450" preserveAspectRatio="xMidYMid meet">
        <!-- Stars -->
        <circle cx="100" cy="50" r="1" fill="white" />
        <circle cx="200" cy="100" r="1.5" fill="white" />
        <circle cx="600" cy="40" r="1" fill="white" />
        <circle cx="700" cy="200" r="2" fill="white" />
        <circle cx="50" cy="300" r="1" fill="white" />
        
        <!-- Moon Surface -->
        <path d="M0 350 Q 400 250 800 350 L 800 450 L 0 450 Z" fill="#555" />
        <circle cx="150" cy="400" r="30" fill="#444" opacity="0.6"/>
        <circle cx="600" cy="420" r="50" fill="#444" opacity="0.6"/>

        <g class="skate-container">
            <g class="cat-group">
                <!-- Skateboard -->
                <rect x="330" y="320" width="140" height="15" rx="5" fill="#333" stroke="#fff" stroke-width="2"/>
                <circle cx="350" cy="340" r="10" fill="#888"/>
                <circle cx="450" cy="340" r="10" fill="#888"/>

                <!-- Helmet -->
                <circle cx="400" cy="250" r="50" fill="#e0e0e0" stroke="#fff" stroke-width="4"/>
                <circle cx="400" cy="250" r="40" fill="#77ccee" opacity="0.6"/>
                
                <!-- Cat Head -->
                <path d="M370 260 Q 360 220 380 210 Q 400 200 420 210 Q 440 220 430 260 Z" fill="#ffa500"/>
                <path d="M375 215 L 365 190 L 385 210 Z" fill="#ffa500"/>
                <path d="M425 215 L 435 190 L 415 210 Z" fill="#ffa500"/>
                <circle cx="385" cy="240" r="4" fill="black"/>
                <circle cx="415" cy="240" r="4" fill="black"/>
                <path d="M395 250 L 405 250 L 400 255 Z" fill="pink"/>

                <!-- Spacesuit Body -->
                <rect x="370" y="290" width="60" height="40" rx="10" fill="#eee" stroke="#fff" stroke-width="3"/>
                <!-- Arms -->
                <rect x="350" y="295" width="20" height="10" rx="5" fill="#eee" transform="rotate(-20 360 300)"/>
                <rect x="430" y="295" width="20" height="10" rx="5" fill="#eee" transform="rotate(20 440 300)"/>
            </g>
        </g>
    </svg>
    <div class="text-overlay">Lunar Skater mode active...</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 Skating on the Moon</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #0b0e14;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            width: 100%;
            max-width: 800px;
            aspect-ratio: 16 / 9;
            position: relative;
        }
        svg {
            width: 100%;
            height: 100%;
        }
        .text-overlay {
            position: absolute;
            bottom: 10%;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 1.5rem;
            text-shadow: 2px 2px 4px #000;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        .cat-group {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes skate-move {
            0% { transform: translateX(-100px); }
            100% { transform: translateX(100px); }
        }
        .skate-container {
            animation: skate-move 4s linear infinite alternate;
        }
    </style>
</head>
<body>

<div class="container">
    <svg viewBox="0 0 800 450" preserveAspectRatio="xMidYMid meet">
        <!-- Stars -->
        <circle cx="100" cy="50" r="1" fill="white" />
        <circle cx="200" cy="100" r="1.5" fill="white" />
        <circle cx="600" cy="40" r="1" fill="white" />
        <circle cx="700" cy="200" r="2" fill="white" />
        <circle cx="50" cy="300" r="1" fill="white" />
        
        <!-- Moon Surface -->
        <path d="M0 350 Q 400 250 800 350 L 800 450 L 0 450 Z" fill="#555" />
        <circle cx="150" cy="400" r="30" fill="#444" opacity="0.6"/>
        <circle cx="600" cy="420" r="50" fill="#444" opacity="0.6"/>

        <g class="skate-container">
            <g class="cat-group">
                <!-- Skateboard -->
                <rect x="330" y="320" width="140" height="15" rx="5" fill="#333" stroke="#fff" stroke-width="2"/>
                <circle cx="350" cy="340" r="10" fill="#888"/>
                <circle cx="450" cy="340" r="10" fill="#888"/>

                <!-- Helmet -->
                <circle cx="400" cy="250" r="50" fill="#e0e0e0" stroke="#fff" stroke-width="4"/>
                <circle cx="400" cy="250" r="40" fill="#77ccee" opacity="0.6"/>
                
                <!-- Cat Head -->
                <path d="M370 260 Q 360 220 380 210 Q 400 200 420 210 Q 440 220 430 260 Z" fill="#ffa500"/>
                <path d="M375 215 L 365 190 L 385 210 Z" fill="#ffa500"/>
                <path d="M425 215 L 435 190 L 415 210 Z" fill="#ffa500"/>
                <circle cx="385" cy="240" r="4" fill="black"/>
                <circle cx="415" cy="240" r="4" fill="black"/>
                <path d="M395 250 L 405 250 L 400 255 Z" fill="pink"/>

                <!-- Spacesuit Body -->
                <rect x="370" y="290" width="60" height="40" rx="10" fill="#eee" stroke="#fff" stroke-width="3"/>
                <!-- Arms -->
                <rect x="350" y="295" width="20" height="10" rx="5" fill="#eee" transform="rotate(-20 360 300)"/>
                <rect x="430" y="295" width="20" height="10" rx="5" fill="#eee" transform="rotate(20 440 300)"/>
            </g>
        </g>
    </svg>
    <div class="text-overlay">Lunar Skater mode active...</div>
</div>

</body>
</html>
```