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.9 s
Cost: $0.0032
Output tokens: 2,061
Spent thinking: 615 tokens
Speed: 436 tok/s
Console errors: 0

First token after: 1.1 s
First visible text after: 2.4 s
Prompt tokens: 533
Code size: 3.0 KB
Finish reason: stop
Served by: Google
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

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

Download

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <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" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff" stop-opacity="0.8" />
      <stop offset="50%" stop-color="#ffffe0" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#ffffe0" stop-opacity="0" />
    </radialGradient>
    <style>
      .star { animation: twinkle 3s infinite ease-in-out; }
      @keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
      .tail { transform-origin: 520px 450px; animation: sway 4s infinite ease-in-out; }
      @keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } }
      .shooting-star { animation: shoot 4s infinite linear; opacity: 0; }
      @keyframes shoot { 
        0% { transform: translate(-200px, -200px); opacity: 0; }
        10% { opacity: 1; }
        20% { transform: translate(600px, 600px); opacity: 0; }
        100% { transform: translate(600px, 600px); opacity: 0; }
      }
    </style>
  </defs>

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

  <!-- Stars -->
  <circle class="star" cx="100" cy="50" r="1.5" fill="white" style="animation-delay: 0.5s" />
  <circle class="star" cx="250" cy="120" r="2" fill="white" style="animation-delay: 1.2s" />
  <circle class="star" cx="600" cy="80" r="1" fill="white" style="animation-delay: 0.2s" />
  <circle class="star" cx="400" cy="200" r="1.5" fill="white" style="animation-delay: 2.1s" />
  <circle class="star" cx="700" cy="300" r="2" fill="white" style="animation-delay: 0.8s" />
  <circle class="star" cx="50" cy="400" r="1" fill="white" style="animation-delay: 1.5s" />

  <!-- Moon -->
  <circle cx="650" cy="150" r="60" fill="url(#moonGlow)" />
  <circle cx="650" cy="150" r="50" fill="#fffaf0" />

  <!-- Distant Hills -->
  <path d="M0 600 L0 350 Q 200 250, 400 350 T 800 350 L800 600 Z" fill="#1a1a4a" />

  <!-- Foreground Hill -->
  <path d="M0 600 L0 450 Q 400 300, 800 500 L800 600 Z" fill="#2d3a2d" />

  <!-- Fox -->
  <g transform="translate(450, 380)">
    <!-- Tail -->
    <path class="tail" d="M70 70 C 150 70, 150 -50, 80 -80 C 120 -50, 100 20, 70 70" fill="#d35400" />
    <path class="tail" d="M120 -50 C 150 -60, 170 -80, 150 -100 C 130 -80, 120 -60, 120 -50" fill="#ffffff" />
    
    <!-- Body -->
    <ellipse cx="40" cy="50" rx="40" ry="30" fill="#d35400" />
    
    <!-- Head -->
    <path d="M20 30 L0 -20 L40 -20 L60 30 Z" fill="#d35400" />
    <!-- Ears -->
    <path d="M5 -20 L15 -50 L25 -20 Z" fill="#d35400" />
    <path d="M35 -20 L45 -50 L55 -20 Z" fill="#d35400" />
    <!-- Snout -->
    <path d="M15 0 L45 0 L30 20 Z" fill="#e67e22" />
    <circle cx="30" cy="5" r="3" fill="#2c3e50" />
  </g>

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

</svg>

Reasoning trace (615 tokens)

**Drawing Fox Scene**

I'm focused on refining the fox's silhouette and the glow of the moon. Next, I'll add the starry sky and integrate the stylized trees onto the hill.

**Integrating SMIL Animations**

My current focus is on implementing the SMIL animations for the twinkling stars and the fox's tail sway. I'm also working on the shooting star effect, ensuring it triggers every four seconds.

Raw response

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <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" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff" stop-opacity="0.8" />
      <stop offset="50%" stop-color="#ffffe0" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#ffffe0" stop-opacity="0" />
    </radialGradient>
    <style>
      .star { animation: twinkle 3s infinite ease-in-out; }
      @keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
      .tail { transform-origin: 520px 450px; animation: sway 4s infinite ease-in-out; }
      @keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } }
      .shooting-star { animation: shoot 4s infinite linear; opacity: 0; }
      @keyframes shoot { 
        0% { transform: translate(-200px, -200px); opacity: 0; }
        10% { opacity: 1; }
        20% { transform: translate(600px, 600px); opacity: 0; }
        100% { transform: translate(600px, 600px); opacity: 0; }
      }
    </style>
  </defs>

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

  <!-- Stars -->
  <circle class="star" cx="100" cy="50" r="1.5" fill="white" style="animation-delay: 0.5s" />
  <circle class="star" cx="250" cy="120" r="2" fill="white" style="animation-delay: 1.2s" />
  <circle class="star" cx="600" cy="80" r="1" fill="white" style="animation-delay: 0.2s" />
  <circle class="star" cx="400" cy="200" r="1.5" fill="white" style="animation-delay: 2.1s" />
  <circle class="star" cx="700" cy="300" r="2" fill="white" style="animation-delay: 0.8s" />
  <circle class="star" cx="50" cy="400" r="1" fill="white" style="animation-delay: 1.5s" />

  <!-- Moon -->
  <circle cx="650" cy="150" r="60" fill="url(#moonGlow)" />
  <circle cx="650" cy="150" r="50" fill="#fffaf0" />

  <!-- Distant Hills -->
  <path d="M0 600 L0 350 Q 200 250, 400 350 T 800 350 L800 600 Z" fill="#1a1a4a" />

  <!-- Foreground Hill -->
  <path d="M0 600 L0 450 Q 400 300, 800 500 L800 600 Z" fill="#2d3a2d" />

  <!-- Fox -->
  <g transform="translate(450, 380)">
    <!-- Tail -->
    <path class="tail" d="M70 70 C 150 70, 150 -50, 80 -80 C 120 -50, 100 20, 70 70" fill="#d35400" />
    <path class="tail" d="M120 -50 C 150 -60, 170 -80, 150 -100 C 130 -80, 120 -60, 120 -50" fill="#ffffff" />
    
    <!-- Body -->
    <ellipse cx="40" cy="50" rx="40" ry="30" fill="#d35400" />
    
    <!-- Head -->
    <path d="M20 30 L0 -20 L40 -20 L60 30 Z" fill="#d35400" />
    <!-- Ears -->
    <path d="M5 -20 L15 -50 L25 -20 Z" fill="#d35400" />
    <path d="M35 -20 L45 -50 L55 -20 Z" fill="#d35400" />
    <!-- Snout -->
    <path d="M15 0 L45 0 L30 20 Z" fill="#e67e22" />
    <circle cx="30" cy="5" r="3" fill="#2c3e50" />
  </g>

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

</svg>