Skateboarding astronaut catOne-line
Gemini 3.1 Flash Lite
by GoogleReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 4.6 s
- Cost
- $0.0026
- Output tokens
- 1,651
- Spent thinking
- 468 tokens
- Speed
- 469.5 tok/s
- Console errors
- 0
- First token after
- 1.1 s
- First visible text after
- 2.1 s
- Prompt tokens
- 353
- Code size
- 3.1 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-3.1-flash-lite- Reasoning sent
{"effort":"medium"}- 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 · 89 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronaut Cat on the Moon</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #050510;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: sans-serif;
}
.container {
width: 100%;
max-width: 800px;
aspect-ratio: 4 / 3;
}
svg {
width: 100%;
height: 100%;
}
.crater { fill: #444; }
.moon-surface { fill: #888; }
.star { fill: white; animation: twinkle 2s infinite alternate; }
@keyframes twinkle { from { opacity: 0.3; } to { opacity: 1; } }
/* Skating Animation */
.skater {
animation: skate 3s ease-in-out infinite;
}
@keyframes skate {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(-2deg); }
}
.wheel { animation: spin 0.5s linear infinite; transform-origin: center; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 800 600">
<!-- Stars -->
<circle class="star" cx="100" cy="50" r="1.5" />
<circle class="star" cx="200" cy="120" r="2" />
<circle class="star" cx="500" cy="80" r="1" />
<circle class="star" cx="700" cy="150" r="2" />
<circle class="star" cx="300" cy="200" r="1.5" />
<!-- Distant Earth -->
<circle cx="650" cy="100" r="40" fill="#2a5ea7" />
<path d="M620,110 Q650,90 680,110" fill="#fff" opacity="0.3" />
<!-- Moon Surface -->
<ellipse cx="400" cy="700" rx="600" ry="200" class="moon-surface" />
<circle class="crater" cx="150" cy="550" r="30" />
<circle class="crater" cx="500" cy="580" r="45" />
<circle class="crater" cx="750" cy="540" r="20" />
<!-- Cat Skater -->
<g class="skater" transform="translate(300, 350)">
<!-- Skateboard -->
<rect x="-40" y="80" width="100" height="10" rx="5" fill="#e74c3c" />
<circle class="wheel" cx="-20" cy="95" r="8" fill="#333" />
<circle class="wheel" cx="40" cy="95" r="8" fill="#333" />
<!-- Astronaut Suit -->
<rect x="-15" y="40" width="50" height="50" rx="10" fill="#ecf0f1" />
<!-- Helmet -->
<circle cx="10" cy="20" r="35" fill="#bdc3c7" stroke="#34495e" stroke-width="3" />
<circle cx="10" cy="20" r="25" fill="#34495e" />
<!-- Cat Face inside -->
<circle cx="-5" cy="15" r="8" fill="#f1c40f" />
<circle cx="25" cy="15" r="8" fill="#f1c40f" />
<path d="M-5,10 L-15,0 M25,10 L35,0" stroke="#f1c40f" stroke-width="3" />
</g>
</svg>
</div>
</body>
</html>Reasoning trace (468 tokens)
**Visualizing Astronaut Cat** I'm currently conceptualizing the scene, focusing on the interplay of the astronaut cat's suit, the skateboard's details, and the lunar surface. I'm exploring dynamic poses to convey movement and the stark, yet potentially whimsical, contrast of the moon. **Creating Interactive Illustration** I'm now structuring the output as a complete HTML file, embedding the SVG within it to create a self-contained, playable demo as requested. My focus is on implementing animations for the cat and skateboard using CSS keyframes, ensuring a dynamic visual experience on the lunar landscape.
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 on the Moon</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #050510;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: sans-serif;
}
.container {
width: 100%;
max-width: 800px;
aspect-ratio: 4 / 3;
}
svg {
width: 100%;
height: 100%;
}
.crater { fill: #444; }
.moon-surface { fill: #888; }
.star { fill: white; animation: twinkle 2s infinite alternate; }
@keyframes twinkle { from { opacity: 0.3; } to { opacity: 1; } }
/* Skating Animation */
.skater {
animation: skate 3s ease-in-out infinite;
}
@keyframes skate {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(-2deg); }
}
.wheel { animation: spin 0.5s linear infinite; transform-origin: center; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 800 600">
<!-- Stars -->
<circle class="star" cx="100" cy="50" r="1.5" />
<circle class="star" cx="200" cy="120" r="2" />
<circle class="star" cx="500" cy="80" r="1" />
<circle class="star" cx="700" cy="150" r="2" />
<circle class="star" cx="300" cy="200" r="1.5" />
<!-- Distant Earth -->
<circle cx="650" cy="100" r="40" fill="#2a5ea7" />
<path d="M620,110 Q650,90 680,110" fill="#fff" opacity="0.3" />
<!-- Moon Surface -->
<ellipse cx="400" cy="700" rx="600" ry="200" class="moon-surface" />
<circle class="crater" cx="150" cy="550" r="30" />
<circle class="crater" cx="500" cy="580" r="45" />
<circle class="crater" cx="750" cy="540" r="20" />
<!-- Cat Skater -->
<g class="skater" transform="translate(300, 350)">
<!-- Skateboard -->
<rect x="-40" y="80" width="100" height="10" rx="5" fill="#e74c3c" />
<circle class="wheel" cx="-20" cy="95" r="8" fill="#333" />
<circle class="wheel" cx="40" cy="95" r="8" fill="#333" />
<!-- Astronaut Suit -->
<rect x="-15" y="40" width="50" height="50" rx="10" fill="#ecf0f1" />
<!-- Helmet -->
<circle cx="10" cy="20" r="35" fill="#bdc3c7" stroke="#34495e" stroke-width="3" />
<circle cx="10" cy="20" r="25" fill="#34495e" />
<!-- Cat Face inside -->
<circle cx="-5" cy="15" r="8" fill="#f1c40f" />
<circle cx="25" cy="15" r="8" fill="#f1c40f" />
<path d="M-5,10 L-15,0 M25,10 L35,0" stroke="#f1c40f" stroke-width="3" />
</g>
</svg>
</div>
</body>
</html>
```