gpt-oss-120b

by OpenAIReasoningClean

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

How it went

Total time: 27.1 s
Cost: $0.0004
Output tokens: 2,746
Spent thinking: 1,207 tokens
Speed: 103.5 tok/s
Console errors: 0

First token after: 614 ms
First visible text after: 12.1 s
Prompt tokens: 586
Code size: 4.5 KB
Finish reason: stop
Served by: PrimeIntellect
Model id: openai/gpt-oss-120b
Reasoning sent: {"effort":"medium"}
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 · 123 lines

Download

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 800 600"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- ---------- Definitions ---------- -->
  <defs>
    <!-- Moon glow gradient -->
    <radialGradient id="moonGlow" cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5">
      <stop offset="0%" stop-color="rgba(255,255,200,0.8)"/>
      <stop offset="100%" stop-color="rgba(255,255,200,0)"/>
    </radialGradient>

    <!-- Sky gradient (background) -->
    <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0b1d38"/>
      <stop offset="100%" stop-color="#274060"/>
    </linearGradient>

    <!-- Path for shooting star motion -->
    <path id="shootPath" d="M200,120 L660,80"/>
  </defs>

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

  <!-- Stars -->
  <g id="stars" fill="white">
    <!-- generate a few stars with staggered twinkle -->
    <circle cx="120" cy="80" r="2">
      <animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" begin="0s"/>
    </circle>
    <circle cx="260" cy="50" r="1.5">
      <animate attributeName="opacity" values="0;1;0" dur="2.2s" repeatCount="indefinite" begin="0.4s"/>
    </circle>
    <circle cx="380" cy="120" r="2.2">
      <animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite" begin="0.8s"/>
    </circle>
    <circle cx="540" cy="40" r="1.8">
      <animate attributeName="opacity" values="0;1;0" dur="2.4s" repeatCount="indefinite" begin="1.2s"/>
    </circle>
    <circle cx="680" cy="100" r="2">
      <animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" begin="1.6s"/>
    </circle>
    <circle cx="720" cy="60" r="1.3">
      <animate attributeName="opacity" values="0;1;0" dur="1.5s" repeatCount="indefinite" begin="2s"/>
    </circle>
    <circle cx="440" cy="20" r="1.6">
      <animate attributeName="opacity" values="0;1;0" dur="2.1s" repeatCount="indefinite" begin="2.3s"/>
    </circle>
    <circle cx="300" cy="140" r="1.9">
      <animate attributeName="opacity" values="0;1;0" dur="1.9s" repeatCount="indefinite" begin="2.6s"/>
    </circle>
    <!-- add more stars as needed -->
  </g>

  <!-- Moon -->
  <g id="moon">
    <circle cx="650" cy="100" r="50" fill="#fdf5e6"/>
    <circle cx="650" cy="100" r="70" fill="url(#moonGlow)"/>
  </g>

  <!-- Distant hills -->
  <path d="M0,400 Q200,300 400,350 T800,380 L800,600 L0,600 Z"
        fill="#2c452d"/>

  <!-- Trees (simple silhouettes) -->
  <g fill="#1b2e1d">
    <polygon points="150,380 130,440 170,440"/>
    <polygon points="170,380 150,440 190,440"/>
    <polygon points="650,380 630,440 670,440"/>
    <polygon points="670,380 650,440 690,440"/>
  </g>

  <!-- ---------- Fox ---------- -->
  <g id="fox" transform="translate(350,350)">
    <!-- Body -->
    <ellipse cx="0" cy="30" rx="40" ry="25" fill="#d96d2c"/>
    <!-- Head -->
    <circle cx="0" cy="-10" r="20" fill="#d96d2c"/>
    <!-- Ears -->
    <polygon points="-12,-30 -5,-55 2,-30" fill="#d96d2c"/>
    <polygon points="12,-30 5,-55 -2,-30" fill="#d96d2c"/>
    <!-- Snout -->
    <ellipse cx="0" cy="-25" rx="10" ry="7" fill="#c75c27"/>
    <circle cx="-4" cy="-26" r="1.5" fill="black"/>
    <circle cx="4" cy="-26" r="1.5" fill="black"/>
    <!-- Tail (group for animation) -->
    <g id="tail" transform="translate(-45,35)">
      <path d="M0,0 C-30,-20 -30,20 0,0"
            fill="#d96d2c"/>
      <ellipse cx="-30" cy="0" rx="12" ry="10" fill="#fff"/>
      <animateTransform attributeName="transform"
                        type="rotate"
                        values="-10;10;-10"
                        dur="3s"
                        repeatCount="indefinite"
                        additive="sum"
                        origin="0 0"/>
    </g>
    <!-- Legs -->
    <rect x="-20" y="50" width="10" height="20" fill="#c75c27"/>
    <rect x="10" y="50" width="10" height="20" fill="#c75c27"/>
  </g>

  <!-- ---------- Shooting Star ---------- -->
  <g id="shootingStar" opacity="0">
    <polygon points="0,0 4,2 0,4 -2,2"
             fill="white"/>
    <animate attributeName="opacity"
             values="1;0"
             dur="0.6s"
             repeatCount="indefinite"
             begin="0s;4s"/>
    <animateMotion dur="0.6s"
                   repeatCount="indefinite"
                   begin="0s;4s"
                   rotate="auto">
      <mpath xlink:href="#shootPath"/>
    </animateMotion>
  </g>

</svg>

Reasoning trace (1,207 tokens)

We need to output a single SVG code block with viewBox 0 0 800 600. Include shapes and paths, no external images, no JS. Use SMIL or CSS animations inside the SVG. Provide subtle animations: stars twinkling, fox tail sway, shooting star crossing every 4 seconds, first within 2 seconds.

We need gradient, coherent colors.

Implement using <defs> gradient for sky maybe radial gradient for moon glow.

Use <circle> for stars with small animate on opacity.

Tail: maybe a path that rotates slightly using SMIL animateTransform.

Shooting star: a line or small shape moving across with animate.

Make sure to set width/height.

Need to ensure loops, use repeatCount="indefinite". For shooting star: we can use animateMotion with a path.

All must be inline.

Let's craft.

Fox shape: we can use a combination of polygons/paths. Simplify.

Hill: a path for ground.

Stars: maybe 30 randomly placed small circles with small animation: <animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" begin="random? Use stagger by begin attribute with offset.

We can't random; assign different begin times.

Tail: path shape attached to fox body; apply animateTransform rotate between -5 and 5 degrees about pivot near base.

Shooting star: use a small polygon (like a star shape) or circle with tail.

Implement animateMotion with path from top-left to bottom-right across sky.

Time: first shooting star start = 0s? It says first within 2 seconds. So we can set begin="0s" for first, then repeatEvery 4 seconds using keyTimes? easier: use <animateMotion repeatCount="indefinite" dur="1s" begin="0s;4s"> but repeated pattern: we can set begin="0s; 4s" for two instances only; indefinite we need to set repeatCount indefinite and keyTimes for each cycle?

Simpler: Use <animate attributeName="visibility" values="visible;hidden" dur="4s" repeatCount="indefinite" begin="0s"/> But moving: we can have <animateMotion ... dur="2s" repeatCount="indefinite" begin="0s" keyTimes something? Actually we can set <animateMotion dur="1s" repeatCount="indefinite" begin="0s" keyPoints? but need to pause for 3 seconds.

Better: Use <animateMotion dur="1s" repeatCount="indefinite" begin="0s;4s"> This defines two begin times: each cycle from each begin time, repeated indefinite? Actually if you specify multiple begin values separated by ';', each defines a new animation instance when the previous ends? Not indefinite.

We could use <animateMotion dur="1s" repeatCount="indefinite" begin="0s" keyTimes="0;1" keySplines but then it will restart immediately each 1s. Want pause. Can use <animate attributeName="display" values="inline;none;inline" keyTimes="0;0.25;0.26" dur="4s" repeatCount="indefinite" /> and animateMotion with same dur, but motion only first part then hidden. This is simpler: create group for shooting star; animateMotion with dur="4s" repeatCount="indefinite" path for whole but with values maybe? Could use path that moves from start to end in first 25% then stay at end (no visible). That's fine.

So create <g id="shootingStar"> <polygon points="0,0 4,2 0,4 -2,2" fill="white"/> and set animateMotion dur="4s" repeatCount="indefinite" path="M200,100 L600,200" keyTimes? Actually we can use <animateMotion> with <mpath> referencing a path? Simpler: <animateMotion dur="4s" repeatCount="indefinite"> <mpath href="#starPath"/> But we can embed path element.

We'll create a <path id="shootPath" d="M200,120 L660,80"/> as path for star.

But need star to start moving at t=0, finish moving at say 0.5s, then stay invisible. We'll also animate opacity: from 1 to 0 after movement.

Let's implement group with both animateMotion and animate attribute opacity with keyTimes.

For simplicity: we can use <animate attributeName="opacity" values="1;0" dur="0.6s" begin="0s;4s" repeatCount="indefinite"/>

And same for motion: <animateMotion dur="0.6s" repeatCount="indefinite" begin="0s;4s" path="M200,120 L660,80"/> That will create star moving each 4 seconds, first at 0s (within 2 seconds). Good.

Now stars: create many small circles with animate on opacity.

Tail sway: path of tail with animateTransform type="rotate" values="-10;10;-10" dur="3s" repeatCount="indefinite" additive="sum" from? Use attributeName transform.

We need pivot point: maybe around (400,350). Use animateTransform attributeName="transform" type="rotate" from="-5" to="5" dur="2s" repeatCount="indefinite" additive="sum".

Ok.

Now ensure gradient: maybe radial gradient for moon glow.

Let's craft actual SVG.

Will include <style> for CSS animations? Not needed; we can use SMIL.

Make sure all tags properly closed.

All shapes within first view.

Let's code.