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: 5.5 s
Cost: $0.0028
Output tokens: 1,784
Spent thinking: 120 tokens
Speed: 430.3 tok/s
Console errors: 0

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

Download

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Gradients -->
    <linearGradient id="skyGradient" 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="#fff5" />
      <stop offset="100%" stop-color="#fff0" />
    </radialGradient>
    <linearGradient id="hillGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1a1a3a" />
      <stop offset="100%" stop-color="#050510" />
    </linearGradient>
    <linearGradient id="foxGradient" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#e67e22" />
      <stop offset="100%" stop-color="#d35400" />
    </linearGradient>

    <!-- Star twinkling animation -->
    <style>
      .star { fill: white; opacity: 0.7; }
      .twinkle { animation: twinkle 3s infinite alternate ease-in-out; }
      @keyframes twinkle {
        0%, 100% { opacity: 0.3; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.2); }
      }
      .tail { animation: sway 4s infinite ease-in-out; transform-origin: 380px 480px; }
      @keyframes sway {
        0%, 100% { transform: rotate(0deg); }
        50% { transform: rotate(5deg); }
      }
      .shooting-star {
        animation: shoot 4s linear infinite;
        opacity: 0;
      }
      @keyframes shoot {
        0% { transform: translate(-100px, 0) rotate(-20deg); opacity: 0; }
        10% { opacity: 1; }
        20% { transform: translate(500px, 200px) rotate(-20deg); opacity: 0; }
        100% { opacity: 0; }
      }
    </style>
  </defs>

  <!-- Background Sky -->
  <rect width="800" height="600" fill="url(#skyGradient)" />

  <!-- Stars -->
  <g class="twinkle">
    <circle cx="100" cy="50" r="1.5" class="star" />
    <circle cx="200" cy="120" r="2" class="star" />
    <circle cx="450" cy="80" r="1" class="star" />
    <circle cx="600" cy="150" r="2" class="star" />
    <circle cx="750" cy="40" r="1.5" class="star" />
    <circle cx="50" cy="300" r="2" class="star" />
    <circle cx="700" cy="250" r="1.5" class="star" />
    <circle cx="300" cy="40" r="2" class="star" />
  </g>

  <!-- Moon -->
  <circle cx="650" cy="120" r="40" fill="url(#moonGlow)" />
  <circle cx="650" cy="120" r="35" fill="#fcfcf0" />

  <!-- Shooting Star -->
  <line x1="0" y1="0" x2="100" y2="40" stroke="white" stroke-width="2" stroke-linecap="round" class="shooting-star" />

  <!-- Distant Hills -->
  <path d="M0,600 L0,350 Q200,250 400,350 T800,350 L800,600 Z" fill="#151530" />
  
  <!-- Foreground Hill -->
  <path d="M0,600 L0,450 Q400,300 800,450 L800,600 Z" fill="url(#hillGradient)" />

  <!-- Tree -->
  <path d="M50,550 L50,350 M50,450 L20,400 M50,420 L80,380" stroke="#0a0a1a" stroke-width="4" stroke-linecap="round" />

  <!-- Fox -->
  <g transform="translate(350, 420)">
    <!-- Tail -->
    <path class="tail" d="M30,80 Q100,50 120,-20 Q140,-60 180,-50 Q160,-20 150,0 Q140,50 100,80" fill="url(#foxGradient)" />
    <path class="tail" d="M150,0 Q170,-20 180,-50 Q180,-20 160,0" fill="#fff" />
    
    <!-- Body -->
    <ellipse cx="40" cy="60" rx="35" ry="45" fill="url(#foxGradient)" />
    
    <!-- Head -->
    <g transform="translate(20, 0)">
      <ellipse cx="20" cy="20" rx="25" ry="22" fill="url(#foxGradient)" />
      <!-- Snout -->
      <path d="M40,20 L60,35 L40,40 Z" fill="#e67e22" />
      <circle cx="55" cy="32" r="2" fill="#000" />
      <!-- Ears -->
      <polygon points="10,0 20,-20 30,0" fill="url(#foxGradient)" />
      <polygon points="35,0 45,-20 55,0" fill="url(#foxGradient)" />
      <!-- Eyes -->
      <circle cx="20" cy="15" r="2" fill="#000" />
    </g>
  </g>

</svg>