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.0017
Output tokens: 1,098
Spent thinking: 0 tokens
Speed: 402.7 tok/s
Console errors: 0

First token after: 533 ms
First visible text after: 533 ms
Prompt tokens: 353
Code size: 2.8 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"minimal"}
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 · 70 lines

Download

<!DOCTYPE html>
<html>
<head>
    <style>
        body { margin: 0; background: #0b0e14; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: sans-serif; color: white; }
        .container { width: 90vw; max-width: 800px; text-align: center; }
        svg { width: 100%; height: auto; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); }
        .hint { margin-top: 20px; opacity: 0.7; animation: blink 1.5s infinite; }
        @keyframes blink { 50% { opacity: 0.2; } }
    </style>
</head>
<body>

<div class="container">
    <svg viewBox="0 0 500 300">
        <!-- Moon Surface -->
        <circle cx="250" cy="800" r="600" fill="#3e3e42" />
        <circle cx="100" cy="850" r="50" fill="#2d2d30" opacity="0.5" />
        <circle cx="400" cy="900" r="80" fill="#2d2d30" opacity="0.5" />
        
        <!-- Stars -->
        <circle cx="50" cy="50" r="1" fill="white" />
        <circle cx="450" cy="30" r="1.5" fill="white" />
        <circle cx="200" cy="20" r="1" fill="white" />
        <circle cx="350" cy="70" r="1.2" fill="white" />

        <!-- Skateboard -->
        <g transform="translate(250, 230) rotate(-10)">
            <rect x="-40" y="0" width="80" height="8" rx="4" fill="#ff4757" />
            <circle cx="-25" cy="12" r="6" fill="#dfe6e9" />
            <circle cx="25" cy="12" r="6" fill="#dfe6e9" />
        </g>

        <!-- Astronaut Cat -->
        <g id="cat">
            <!-- Suit -->
            <rect x="220" y="160" width="60" height="70" rx="10" fill="#f1f2f6" />
            <!-- Helmet -->
            <circle cx="250" cy="150" r="35" fill="#f1f2f6" />
            <circle cx="250" cy="150" r="25" fill="#2d3436" />
            <circle cx="255" cy="145" r="8" fill="#55efc4" opacity="0.3" />
            <!-- Ears -->
            <polygon points="225,125 210,100 240,120" fill="#f1f2f6" />
            <polygon points="275,125 290,100 260,120" fill="#f1f2f6" />
            <!-- Arms/Legs -->
            <rect x="210" y="180" width="15" height="40" rx="5" fill="#f1f2f6" />
            <rect x="275" y="180" width="15" height="40" rx="5" fill="#f1f2f6" />
        </g>
    </svg>
    <div class="hint">Click or press a key to start mission</div>
</div>

<script>
    const cat = document.getElementById('cat');
    let angle = 0;
    
    function animate() {
        angle += 0.05;
        const y = Math.sin(angle) * 10;
        cat.setAttribute('transform', `translate(0, ${y})`);
        requestAnimationFrame(animate);
    }
    
    animate();
    
    window.addEventListener('keydown', () => document.querySelector('.hint').innerText = "Cat is shredding the moon!");
    window.addEventListener('click', () => document.querySelector('.hint').innerText = "Cat is shredding the moon!");
</script>
</body>
</html>

Raw response

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        body { margin: 0; background: #0b0e14; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: sans-serif; color: white; }
        .container { width: 90vw; max-width: 800px; text-align: center; }
        svg { width: 100%; height: auto; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); }
        .hint { margin-top: 20px; opacity: 0.7; animation: blink 1.5s infinite; }
        @keyframes blink { 50% { opacity: 0.2; } }
    </style>
</head>
<body>

<div class="container">
    <svg viewBox="0 0 500 300">
        <!-- Moon Surface -->
        <circle cx="250" cy="800" r="600" fill="#3e3e42" />
        <circle cx="100" cy="850" r="50" fill="#2d2d30" opacity="0.5" />
        <circle cx="400" cy="900" r="80" fill="#2d2d30" opacity="0.5" />
        
        <!-- Stars -->
        <circle cx="50" cy="50" r="1" fill="white" />
        <circle cx="450" cy="30" r="1.5" fill="white" />
        <circle cx="200" cy="20" r="1" fill="white" />
        <circle cx="350" cy="70" r="1.2" fill="white" />

        <!-- Skateboard -->
        <g transform="translate(250, 230) rotate(-10)">
            <rect x="-40" y="0" width="80" height="8" rx="4" fill="#ff4757" />
            <circle cx="-25" cy="12" r="6" fill="#dfe6e9" />
            <circle cx="25" cy="12" r="6" fill="#dfe6e9" />
        </g>

        <!-- Astronaut Cat -->
        <g id="cat">
            <!-- Suit -->
            <rect x="220" y="160" width="60" height="70" rx="10" fill="#f1f2f6" />
            <!-- Helmet -->
            <circle cx="250" cy="150" r="35" fill="#f1f2f6" />
            <circle cx="250" cy="150" r="25" fill="#2d3436" />
            <circle cx="255" cy="145" r="8" fill="#55efc4" opacity="0.3" />
            <!-- Ears -->
            <polygon points="225,125 210,100 240,120" fill="#f1f2f6" />
            <polygon points="275,125 290,100 260,120" fill="#f1f2f6" />
            <!-- Arms/Legs -->
            <rect x="210" y="180" width="15" height="40" rx="5" fill="#f1f2f6" />
            <rect x="275" y="180" width="15" height="40" rx="5" fill="#f1f2f6" />
        </g>
    </svg>
    <div class="hint">Click or press a key to start mission</div>
</div>

<script>
    const cat = document.getElementById('cat');
    let angle = 0;
    
    function animate() {
        angle += 0.05;
        const y = Math.sin(angle) * 10;
        cat.setAttribute('transform', `translate(0, ${y})`);
        requestAnimationFrame(animate);
    }
    
    animate();
    
    window.addEventListener('keydown', () => document.querySelector('.hint').innerText = "Cat is shredding the moon!");
    window.addEventListener('click', () => document.querySelector('.hint').innerText = "Cat is shredding the moon!");
</script>
</body>
</html>
```