Gemma 4 31B

by Googlereasoning defaultClean

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 6.0 s
Cost: $0.0009
Output tokens: 2,361
Spent thinking: 0 tokens
Speed: 496 tok/s
Console errors: 0

First token after: 1.2 s
First visible text after: 1.2 s
Prompt tokens: 551
Code size: 5.0 KB
Finish reason: stop
Served by: KT
Model id: google/gemma-4-31b-it
Reasoning sent: model default
Max output: 16,384 tokens
Generated: Nov 13, 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 · 124 lines

Download

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Sky Gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a0a2a" />
      <stop offset="100%" stop-color="#201a4d" />
    </linearGradient>
    
    <!-- Moon Glow -->
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fffbe0" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#fffbe0" stop-opacity="0" />
    </radialGradient>

    <!-- Hill Gradient -->
    <linearGradient id="hillGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#1a3c1a" />
      <stop offset="100%" stop-color="#0a1a0a" />
    </linearGradient>
  </defs>

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

  <!-- Stars (Twinkling) -->
  <g id="stars">
    <!-- Generate random-ish star positions -->
    <circle cx="100" cy="100" r="1" fill="white">
      <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" />
    </circle>
    <circle cx="200" cy="50" r="1.2" fill="white">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="350" cy="120" r="0.8" fill="white">
      <animate attributeName="opacity" values="1;0.2;1" dur="2.5s" repeatCount="indefinite" />
    </circle>
    <circle cx="500" cy="80" r="1.1" fill="white">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="4s" repeatCount="indefinite" />
    </circle>
    <circle cx="650" cy="150" r="0.9" fill="white">
      <animate attributeName="opacity" values="1;0.4;1" dur="3.2s" repeatCount="indefinite" />
    </circle>
    <circle cx="720" cy="60" r="1" fill="white">
      <animate attributeName="opacity" values="0.2;1;0.2" dur="2.8s" repeatCount="indefinite" />
    </circle>
    <circle cx="150" cy="200" r="0.7" fill="white">
      <animate attributeName="opacity" values="1;0.6;1" dur="5s" repeatCount="indefinite" />
    </circle>
    <circle cx="400" cy="250" r="1.2" fill="white">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="580" cy="210" r="0.8" fill="white">
      <animate attributeName="opacity" values="1;0.3;1" dur="2.2s" repeatCount="indefinite" />
    </circle>
    <circle cx="780" cy="300" r="1" fill="white">
      <animate attributeName="opacity" values="0.8;0.2;0.8" dur="3.5s" repeatCount="indefinite" />
    </circle>
  </g>

  <!-- Shooting Star -->
  <g>
    <line x1="0" y1="0" x2="40" y2="0" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0">
      <animate attributeName="x1" values="800;200" dur="4s" repeatCount="indefinite" />
      <animate attributeName="y1" values="-50;200" dur="4s" repeatCount="indefinite" />
      <animate attributeName="x2" values="840;240" dur="4s" repeatCount="indefinite" />
      <animate attributeName="y2" values="-50;200" dur="4s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0;1;0" keyTimes="0;0.2;1" dur="4s" repeatCount="indefinite" />
    </animate>
  </g>

  <!-- Moon -->
  <circle cx="650" cy="100" r="40" fill="url(#moonGlow)" />
  <circle cx="650" cy="100" r="30" fill="#fffbe0" />

  <!-- Distant Hills -->
  <path d="M-100 600 Q 200 350 400 500 Q 600 400 900 600 Z" fill="#142a14" opacity="0.6" />

  <!-- Main Hill -->
  <path d="M-100 600 Q 300 300 800 600 Z" fill="url(#hillGradient)" />

  <!-- Background Trees (Silhouettes) -->
  <g fill="#0a1a0a">
    <path d="M200 420 L210 380 L220 420 Z" />
    <path d="M210 420 L220 370 L230 420 Z" />
    <path d="M180 430 L190 390 L200 430 Z" />
    
    <path d="M500 380 L510 340 L520 380 Z" />
    <path d="M510 380 L520 330 L530 380 Z" />
  </g>

  <!-- The Fox -->
  <g transform="translate(350, 360)">
    <!-- Tail (Animated) -->
    <g>
      <animateTransform attributeName="transform" type="rotate" values="-5 0 40; 5 0 40; -5 0 40" dur="3s" repeatCount="indefinite" />
      <path d="M20 40 Q 60 20 70 60 Q 80 100 50 100 Q 20 100 20 70 Z" fill="#d35400" />
      <path d="M60 50 Q 75 60 70 80 Q 60 100 50 95" fill="white" />
    </g>

    <!-- Body -->
    <path d="M10 40 Q 30 30 50 60 L 50 100 L 10 100 Z" fill="#e67e22" />
    <path d="M10 100 Q 30 110 50 100" fill="#d35400" />

    <!-- Head -->
    <g transform="translate(0, -10)">
      <!-- Neck/Chest -->
      <path d="M10 40 Q 15 20 30 20 L 40 40 Z" fill="#e67e22" />
      <!-- Main Head -->
      <path d="M5 20 Q 10 0 25 15 Q 35 20 35 30 L 15 35 Z" fill="#e67e22" />
      <!-- Ears -->
      <path d="M10 15 L 5 0 L 18 12 Z" fill="#d35400" />
      <path d="M25 15 L 32 0 L 35 12 Z" fill="#d35400" />
      <!-- Snout -->
      <path d="M20 25 L 15 32 L 25 32 Z" fill="#f39c12" />
      <circle cx="20" cy="32" r="1.5" fill="black" />
      <!-- Eye -->
      <circle cx="18" cy="22" r="1.5" fill="black" />
    </g>

    <!-- Legs -->
    <path d="M15 100 L 15 110 L 22 110 L 22 100 Z" fill="#d35400" />
    <path d="M40 100 L 40 110 L 47 110 L 47 100 Z" fill="#d35400" />
  </g>
</svg>