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: 3.8 s
Cost: $0.0022
Output tokens: 1,352
Spent thinking: 0 tokens
Speed: 436.9 tok/s
Console errors: 0

First token after: 692 ms
First visible text after: 692 ms
Prompt tokens: 533
Code size: 2.9 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

Create a standalone SVG illustration of a fox sitting on a hill, looking at the moon on a starry night, with a few subtle animations. Requirements: - Output a single valid .svg file (```svg code block) with a viewBox of 0 0 800 600. - Hand-written shapes and paths only: no embedded raster images, no external references, no JavaScript. - The fox must be clearly recognizable (pointy ears, snout, bushy tail with a white tip). - Include the moon with a soft glow, many stars, the hill and some background elements (trees, distant hills). - Use a coherent color palette and at least one gradient. - Animations (SMIL or CSS inside the SVG), all looping seamlessly: stars twinkling, the fox's tail swaying gently, and a shooting star crossing the sky every 4 seconds (the first one within 2 seconds).

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 · 75 lines

Download

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0a0a2a" />
      <stop offset="100%" stop-color="#2a2a5a" />
    </linearGradient>
    <radialGradient id="moonGlow">
      <stop offset="0%" stop-color="#fff" />
      <stop offset="50%" stop-color="#fff8d0" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#fff8d0" stop-opacity="0" />
    </radialGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>

  <!-- Background -->
  <rect width="800" height="600" fill="url(#skyGrad)" />
  
  <!-- Stars -->
  <g>
    <circle cx="100" cy="100" r="1.5" fill="white">
      <animate attributeName="opacity" values="0.2;1;0.2" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="300" cy="50" r="1" fill="white">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="4s" repeatCount="indefinite" />
    </circle>
    <circle cx="550" cy="150" r="2" fill="white">
      <animate attributeName="opacity" values="0.1;0.8;0.1" dur="2s" repeatCount="indefinite" />
    </circle>
    <circle cx="700" cy="80" r="1.2" fill="white">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="5s" repeatCount="indefinite" />
    </circle>
  </g>

  <!-- Shooting Star -->
  <path d="M 0 0 L 100 50" stroke="white" stroke-width="2" stroke-linecap="round">
    <animateTransform attributeName="transform" type="translate" from="-200 0" to="1000 500" dur="4s" repeatCount="indefinite" />
    <animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite" />
  </path>

  <!-- Moon -->
  <circle cx="650" cy="120" r="50" fill="url(#moonGlow)" filter="url(#glow)" />

  <!-- Distant Hills -->
  <path d="M 0 600 Q 200 400 400 500 T 800 550 L 800 600 Z" fill="#1a1a3a" />

  <!-- Main Hill -->
  <path d="M 0 600 C 200 450 600 450 800 600 Z" fill="#1e2e1e" />

  <!-- Fox -->
  <g transform="translate(450, 420)">
    <!-- Tail -->
    <path d="M 30 50 Q 80 0 110 40 Q 90 60 70 50 Z" fill="#d35400">
      <animateTransform attributeName="transform" type="rotate" values="-5;10;-5" dur="3s" repeatCount="indefinite" additive="sum" />
    </path>
    <!-- Tail Tip -->
    <path d="M 95 45 Q 110 40 115 35 L 105 55 Z" fill="white" />
    <!-- Body -->
    <ellipse cx="25" cy="40" rx="30" ry="20" fill="#d35400" />
    <!-- Head -->
    <path d="M 10 20 L 30 0 L 40 30 L 10 20 Z" fill="#d35400" />
    <!-- Ears -->
    <path d="M 12 10 L 5 0 L 20 5 Z" fill="#d35400" />
    <path d="M 28 5 L 35 0 L 38 15 Z" fill="#d35400" />
    <!-- Snout -->
    <ellipse cx="35" cy="20" rx="8" ry="5" fill="#f39c12" />
    <circle cx="40" cy="19" r="2" fill="black" />
  </g>

  <!-- Trees -->
  <path d="M 100 500 L 120 400 L 140 500 Z" fill="#0d1b0d" />
  <path d="M 150 520 L 170 420 L 190 520 Z" fill="#0d1b0d" />
</svg>