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.9 s
Cost: $0.0020
Output tokens: 1,252
Spent thinking: 0 tokens
Speed: 351.1 tok/s
Console errors: 0

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

Download

<svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="moonGrad" cx="30%" cy="30%" r="70%">
      <stop offset="0%" style="stop-color:#f0f0f0" />
      <stop offset="100%" style="stop-color:#b0b0b0" />
    </radialGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Space Background -->
  <rect width="800" height="500" fill="#050510" />
  <circle cx="700" cy="80" r="2" fill="white" opacity="0.8" />
  <circle cx="50" cy="400" r="1.5" fill="white" opacity="0.6" />
  <circle cx="600" cy="300" r="1" fill="white" opacity="0.9" />
  <circle cx="150" cy="100" r="2" fill="white" opacity="0.7" />

  <!-- Moon Surface -->
  <path d="M0 400 Q400 350 800 400 L800 500 L0 500 Z" fill="url(#moonGrad)" />
  <circle cx="100" cy="450" r="30" fill="#a0a0a0" opacity="0.3" />
  <circle cx="500" cy="430" r="50" fill="#a0a0a0" opacity="0.2" />

  <!-- Skateboard -->
  <g transform="translate(350, 360) rotate(-10)">
    <ellipse cx="60" cy="15" rx="60" ry="10" fill="#333" />
    <circle cx="20" cy="25" r="8" fill="#555" />
    <circle cx="100" cy="25" r="8" fill="#555" />
  </g>

  <!-- Astronaut Cat -->
  <g transform="translate(350, 250)">
    <!-- Helmet -->
    <circle cx="50" cy="50" r="50" fill="#e0e0e0" stroke="#fff" stroke-width="3" />
    <circle cx="50" cy="50" r="40" fill="#7799aa" />
    
    <!-- Face (Cat) -->
    <path d="M25 60 Q25 40 50 40 Q75 40 75 60 L75 80 Q50 95 25 80 Z" fill="#ffccaa" />
    <ellipse cx="38" cy="55" rx="5" ry="8" fill="#333" />
    <ellipse cx="62" cy="55" rx="5" ry="8" fill="#333" />
    <path d="M40 70 Q50 75 60 70" fill="none" stroke="#333" stroke-width="2" />
    
    <!-- Ears -->
    <polygon points="20,35 10,5 35,25" fill="#ffccaa" />
    <polygon points="80,35 90,5 65,25" fill="#ffccaa" />
    
    <!-- Suit -->
    <path d="M10 100 Q10 150 50 150 Q90 150 90 100 Z" fill="#fff" />
    <rect x="35" y="105" width="30" height="20" fill="#ff4444" rx="5" />
    
    <!-- Arms -->
    <path d="M10 110 L-20 140" stroke="#fff" stroke-width="15" stroke-linecap="round" />
    <path d="M90 110 L120 140" stroke="#fff" stroke-width="15" stroke-linecap="round" />
  </g>

  <!-- Text -->
  <text x="400" y="50" font-family="Arial" font-size="40" fill="white" text-anchor="middle" font-weight="bold" filter="url(#glow)">
    MOON WALKER
  </text>
  
  <animateTransform 
    xlink:href="#350" 
    attributeName="transform" 
    type="translate" 
    from="0 0" 
    to="900 0" 
    dur="5s" 
    repeatCount="indefinite" />
</svg>