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: 3.3 s
Cost: $0.0018
Output tokens: 1,165
Spent thinking: 0 tokens
Speed: 378.4 tok/s
Console errors: 0

First token after: 267 ms
First visible text after: 267 ms
Prompt tokens: 353
Code size: 3.2 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: model default
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>
<head>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #0b0e14;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: sans-serif;
            color: white;
        }
        svg {
            width: 90vmin;
            height: 90vmin;
        }
        #ui {
            position: absolute;
            text-align: center;
            pointer-events: none;
        }
        .text {
            font-size: 2vw;
            text-shadow: 0 0 10px #000;
            animation: pulse 2s infinite;
        }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    </style>
</head>
<body>
    <div id="ui"><div class="text">Click to start the Astro-Cat mission!</div></div>

    <svg viewBox="0 0 500 500" id="canvas">
        <defs>
            <radialGradient id="starGradient">
                <stop offset="0%" stop-color="#fff"/>
                <stop offset="100%" stop-color="#333"/>
            </radialGradient>
        </defs>
        
        <!-- Stars -->
        <circle cx="50" cy="50" r="1.5" fill="white"/>
        <circle cx="400" cy="100" r="1" fill="white"/>
        <circle cx="200" cy="300" r="2" fill="white"/>
        <circle cx="450" cy="400" r="1" fill="white"/>

        <!-- Moon Surface -->
        <path d="M0,400 Q250,300 500,400 L500,500 L0,500 Z" fill="#6c757d"/>
        <circle cx="100" cy="420" r="15" fill="#5a6268"/>
        <circle cx="350" cy="450" r="25" fill="#5a6268"/>

        <g id="cat-group">
            <!-- Skateboard -->
            <rect x="220" y="380" width="80" height="10" rx="5" fill="#e83e8c" />
            <circle cx="235" cy="395" r="8" fill="#333" />
            <circle cx="285" cy="395" r="8" fill="#333" />

            <!-- Astronaut Suit -->
            <rect x="235" y="300" width="50" height="60" rx="10" fill="white" />
            <!-- Helmet -->
            <circle cx="260" cy="280" r="30" fill="white" />
            <circle cx="260" cy="280" r="20" fill="#212529" />
            <!-- Visor Shine -->
            <rect x="250" y="270" width="5" height="10" rx="2" fill="#fff" opacity="0.3" />
            
            <!-- Ears -->
            <path d="M235 260 L220 230 L250 260" fill="white"/>
            <path d="M285 260 L300 230 L270 260" fill="white"/>
        </g>
    </svg>

<script>
    let cat = document.getElementById('cat-group');
    let pos = 0;
    let playing = false;

    function animate() {
        if (!playing) return;
        pos += 0.05;
        let yOffset = Math.sin(pos * 5) * 10;
        cat.setAttribute('transform', `translate(0, ${yOffset}) rotate(${Math.sin(pos) * 5}, 260, 350)`);
        requestAnimationFrame(animate);
    }

    document.body.addEventListener('click', () => {
        if (!playing) {
            playing = true;
            document.getElementById('ui').style.display = 'none';
            animate();
        }
    });

    // Auto-start demo mode
    setTimeout(() => {
        if(!playing) {
            playing = true;
            document.getElementById('ui').style.display = 'none';
            animate();
        }
    }, 2000);
</script>
</body>
</html>

Raw response

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #0b0e14;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: sans-serif;
            color: white;
        }
        svg {
            width: 90vmin;
            height: 90vmin;
        }
        #ui {
            position: absolute;
            text-align: center;
            pointer-events: none;
        }
        .text {
            font-size: 2vw;
            text-shadow: 0 0 10px #000;
            animation: pulse 2s infinite;
        }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    </style>
</head>
<body>
    <div id="ui"><div class="text">Click to start the Astro-Cat mission!</div></div>

    <svg viewBox="0 0 500 500" id="canvas">
        <defs>
            <radialGradient id="starGradient">
                <stop offset="0%" stop-color="#fff"/>
                <stop offset="100%" stop-color="#333"/>
            </radialGradient>
        </defs>
        
        <!-- Stars -->
        <circle cx="50" cy="50" r="1.5" fill="white"/>
        <circle cx="400" cy="100" r="1" fill="white"/>
        <circle cx="200" cy="300" r="2" fill="white"/>
        <circle cx="450" cy="400" r="1" fill="white"/>

        <!-- Moon Surface -->
        <path d="M0,400 Q250,300 500,400 L500,500 L0,500 Z" fill="#6c757d"/>
        <circle cx="100" cy="420" r="15" fill="#5a6268"/>
        <circle cx="350" cy="450" r="25" fill="#5a6268"/>

        <g id="cat-group">
            <!-- Skateboard -->
            <rect x="220" y="380" width="80" height="10" rx="5" fill="#e83e8c" />
            <circle cx="235" cy="395" r="8" fill="#333" />
            <circle cx="285" cy="395" r="8" fill="#333" />

            <!-- Astronaut Suit -->
            <rect x="235" y="300" width="50" height="60" rx="10" fill="white" />
            <!-- Helmet -->
            <circle cx="260" cy="280" r="30" fill="white" />
            <circle cx="260" cy="280" r="20" fill="#212529" />
            <!-- Visor Shine -->
            <rect x="250" y="270" width="5" height="10" rx="2" fill="#fff" opacity="0.3" />
            
            <!-- Ears -->
            <path d="M235 260 L220 230 L250 260" fill="white"/>
            <path d="M285 260 L300 230 L270 260" fill="white"/>
        </g>
    </svg>

<script>
    let cat = document.getElementById('cat-group');
    let pos = 0;
    let playing = false;

    function animate() {
        if (!playing) return;
        pos += 0.05;
        let yOffset = Math.sin(pos * 5) * 10;
        cat.setAttribute('transform', `translate(0, ${yOffset}) rotate(${Math.sin(pos) * 5}, 260, 350)`);
        requestAnimationFrame(animate);
    }

    document.body.addEventListener('click', () => {
        if (!playing) {
            playing = true;
            document.getElementById('ui').style.display = 'none';
            animate();
        }
    });

    // Auto-start demo mode
    setTimeout(() => {
        if(!playing) {
            playing = true;
            document.getElementById('ui').style.display = 'none';
            animate();
        }
    }, 2000);
</script>
</body>
</html>
```