gpt-oss-120b

by OpenAIReasoningClean

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

How it went

Total time: 11.4 s
Cost: $0.0007
Output tokens: 1,564
Spent thinking: 22 tokens
Speed: 147.8 tok/s
Console errors: 0

First token after: 839 ms
First visible text after: 1.0 s
Prompt tokens: 586
Code size: 3.9 KB
Finish reason: stop
Served by: Sail Research
Model id: openai/gpt-oss-120b
Reasoning sent: {"effort":"low"}
Max output: 64,000 tokens
Generated: Nov 11, 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 · 95 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <!-- Background gradient -->
  <defs>
    <radialGradient id="nightSky" cx="0.5" cy="0.2" r="0.8">
      <stop offset="0%" stop-color="#0a043c"/>
      <stop offset="100%" stop-color="#02010a"/>
    </radialGradient>
    <!-- Moon glow -->
    <radialGradient id="moonGlow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0%" stop-color="rgba(255,255,210,0.8)"/>
      <stop offset="100%" stop-color="rgba(255,255,210,0)"/>
    </radialGradient>
    <!-- Fox body gradient -->
    <linearGradient id="foxBody" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#d35400"/>
      <stop offset="100%" stop-color="#b84300"/>
    </linearGradient>
    <!-- Shooting star -->
    <linearGradient id="starTail" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="white"/>
      <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
    </linearGradient>
  </defs>

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

  <!-- Stars -->
  <g id="stars">
    <circle cx="100" cy="80" r="1.5" fill="white">
      <animate attributeName="r" values="1.5;2.5;1.5" dur="2s" repeatCount="indefinite" begin="0s"/>
      <animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite" begin="0s"/>
    </circle>
    <circle cx="250" cy="120" r="1.2" fill="white">
      <animate attributeName="r" values="1.2;2;1.2" dur="2.5s" repeatCount="indefinite" begin="0.5s"/>
    </circle>
    <circle cx="400" cy="60" r="1.8" fill="white">
      <animate attributeName="r" values="1.8;2.8;1.8" dur="1.8s" repeatCount="indefinite" begin="0.3s"/>
    </circle>
    <circle cx="560" cy="100" r="1.4" fill="white">
      <animate attributeName="r" values="1.4;2.2;1.4" dur="2.2s" repeatCount="indefinite" begin="0.7s"/>
    </circle>
    <circle cx="720" cy="70" r="1.6" fill="white">
      <animate attributeName="r" values="1.6;2.4;1.6" dur="2.4s" repeatCount="indefinite" begin="0.2s"/>
    </circle>
  </g>

  <!-- Moon -->
  <g transform="translate(600,120)">
    <circle r="50" fill="#fdf7c3"/>
    <circle r="70" fill="url(#moonGlow)" opacity="0.6"/>
  </g>

  <!-- Distant hills -->
  <path d="M0,500 C200,450 300,470 500,440 C700,410 800,460 800,600 L0,600 Z" fill="#1b0e2a" opacity="0.7"/>
  <path d="M0,530 C150,500 250,520 450,500 C650,480 800,520 800,600 L0,600 Z" fill="#2c1735" opacity="0.5"/>

  <!-- Foreground hill -->
  <path d="M0,460 C150,420 300,440 450,410 C600,380 800,420 800,600 L0,600 Z" fill="#3b2249"/>

  <!-- Fox -->
  <g id="fox" transform="translate(380,380)">
    <!-- Body -->
    <path d="M0,0 C-30,20 -30,70 0,80 C30,70 30,20 0,0 Z" fill="url(#foxBody)"/>
    <!-- Head -->
    <circle cx="0" cy="-30" r="20" fill="url(#foxBody)"/>
    <!-- Ears -->
    <polygon points="-12,-50 -8,-70 -4,-50" fill="url(#foxBody)"/>
    <polygon points="12,-50 8,-70 4,-50" fill="url(#foxBody)"/>
    <!-- Snout -->
    <ellipse cx="0" cy="-20" rx="8" ry="5" fill="#e67e22"/>
    <circle cx="-3" cy="-22" r="1.5" fill="black"/>
    <circle cx="3" cy="-22" r="1.5" fill="black"/>
    <!-- Tail -->
    <path id="tailPath" d="M30,30 C70,20 90,0 70,-30 C50,-60 30,-40 30,30 Z" fill="url(#foxBody)"/>
    <path d="M70,-30 C80,-35 85,-30 80,-20 C75,-10 70,-15 70,-30 Z" fill="white"/>
  </g>

  <!-- Tail sway animation -->
  <animateTransform xlink:href="#fox"
    attributeName="transform"
    type="rotate"
    values="0 380 380; -2 380 380; 0 380 380"
    dur="3s"
    repeatCount="indefinite"
    additive="sum"
    begin="0s"/>

  <!-- Shooting star -->
  <line x1="0" y1="0" x2="30" y2="0" stroke="url(#starTail)" stroke-width="3" opacity="0">
    <animate attributeName="x1" from="-100" to="900" dur="1s" repeatCount="indefinite" begin="0s; 4s"/>
    <animate attributeName="y1" from="50" to="150" dur="1s" repeatCount="indefinite" begin="0s; 4s"/>
    <animate attributeName="opacity" values="0;1;0" keyTimes="0;0.1;1" dur="1s" repeatCount="indefinite" begin="0s; 4s"/>
  </line>
</svg>

Reasoning trace (22 tokens)

We need to output SVG only. Include SMIL animations. Provide shapes. Let's craft.