GPT-5 Nano

by OpenAIReasoningClean

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

How it went

Total time: 20.1 s
Cost: $0.0013
Output tokens: 3,123
Spent thinking: 0 tokens
Speed: 162.9 tok/s
Console errors: 0

First token after: 924 ms
First visible text after: 924 ms
Prompt tokens: 522
Code size: 8.4 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-5-nano
Reasoning sent: {"effort":"minimal"}
Max output: 128,000 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 · 208 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" aria-label="A serene night scene with a fox on a hill, moon, stars, and subtle animations">
  <defs>
    <!-- Gradients -->
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0b1020"/>
      <stop offset="60%" stop-color="#1a2a58"/>
      <stop offset="100%" stop-color="#0b1a3a"/>
    </linearGradient>

    <linearGradient id="hillG" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#2a3e2a"/>
      <stop offset="100%" stop-color="#1a2e1b"/>
    </linearGradient>

    <linearGradient id="foxMain" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ff9d4a"/>
      <stop offset="60%" stop-color="#e36d2b"/>
      <stop offset="100%" stop-color="#d85a1f"/>
    </linearGradient>

    <linearGradient id="foxFur" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffd9b3"/>
      <stop offset="60%" stop-color="#f6b37a"/>
      <stop offset="100%" stop-color="#f08a38"/>
    </linearGradient>

    <linearGradient id="moonGlow" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="60%" stop-color="#d8e6ff"/>
      <stop offset="100%" stop-color="#a4c7ff"/>
    </linearGradient>

    <!-- Subtle glow blur for moon -->
    <filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="8" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- Star twinkle animation via SMIL -->
    <radialGradient id="starCore" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff"/>
      <stop offset="70%" stop-color="#fff"/>
      <stop offset="100%" stop-color="#cfe3ff"/>
    </radialGradient>

    <!-- Tree gradient -->
    <linearGradient id="treeG" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#234e2a"/>
      <stop offset="100%" stop-color="#0b2a14"/>
    </linearGradient>
  </defs>

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

  <!-- Moon with glow -->
  <g transform="translate(560,90)">
    <circle cx="0" cy="0" r="40" fill="url(#moonGlow)" filter="url(#softGlow)"/>
    <circle cx="0" cy="0" r="28" fill="#f7f7ff" opacity="0.95"/>
    <circle cx="6" cy="-6" r="8" fill="white" opacity="0.25"/>
    <circle cx="-8" cy="4" r="4" fill="white" opacity="0.2"/>
  </g>

  <!-- Distant hills -->
  <path d="M0,420 C120,380 210,420 320,395 C420,380 560,420 800,400 L800,600 L0,600Z" fill="url(#hillG)" opacity="0.8"/>
  <path d="M0,460 C120,430 260,470 380,450 C520,430 700,470 800,450 L800,600 L0,600Z" fill="#2b4b2b" opacity="0.5"/>

  <!-- Foreground hill where the fox sits -->
  <path d="M0,420 C180,440 360,465 520,430 C600,415 760,420 800,440 L800,600 L0,600Z" fill="url(#hillG)"/>

  <!-- Stars group with twinkling (SMIL) -->
  <g id="stars" fill="white" opacity="0.95">
    <!-- many stars as small circles with varying radii and positions -->
    <circle cx="60" cy="90" r="1.2">
      <animate attributeName="opacity" values="0.8;1;0.8" dur="4s" repeatCount="indefinite"/>
      <animate attributeName="r" values="1.2;1.6;1.2" dur="4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="120" cy="60" r="1" >
      <animate attributeName="opacity" values="0.6;1;0.6" dur="5s" begin="0.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="210" cy="120" r="1.4">
      <animate attributeName="opacity" values="0.7;0.95;0.7" dur="6s" repeatCount="indefinite"/>
    </circle>
    <circle cx="260" cy="70" r="0.8" >
      <animate attributeName="opacity" values="0.4;1;0.4" dur="5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="320" cy="110" r="1.1" >
      <animate attributeName="opacity" values="0.9;1;0.9" dur="4.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="380" cy="60" r="0.9">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="3.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="420" cy="100" r="1.3" >
      <animate attributeName="opacity" values="0.7;1;0.7" dur="4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="480" cy="70" r="0.7" >
      <animate attributeName="opacity" values="0.6;1;0.6" dur="5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="540" cy="90" r="1.2" >
      <animate attributeName="opacity" values="0.8;1;0.8" dur="4.2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="590" cy="130" r="0.9" >
      <animate attributeName="opacity" values="0.6;1;0.6" dur="5.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="650" cy="60" r="1.1" >
      <animate attributeName="opacity" values="0.9;1;0.9" dur="3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="710" cy="100" r="0.8" >
      <animate attributeName="opacity" values="0.5;1;0.5" dur="4.8s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Shooting star (4s cycle, first within 2s) using SMIL -->
  <g id="shootingStar" opacity="0">
    <polyline points="0,0 180,60" fill="none" stroke="#d8f5ff" stroke-width="2" stroke-linecap="round">
      <animate attributeName="opacity" values="0;1;0" keyTimes="0;0.05;1" dur="4s" begin="2s" repeatCount="indefinite"/>
      <animate attributeName="points" values="
        0,0 180,60;
        40,12 220,72;
        240,0 400,40;
        0,0 180,60" dur="4s" begin="2s" repeatCount="indefinite"/>
    </polyline>
    <circle cx="0" cy="0" r="2" fill="#fff" opacity="0">
      <animate attributeName="opacity" values="0;1;0" keyTimes="0;0.05;1" dur="4s" begin="2s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Fox sitting on hill (a simple yet recognizable fox) -->
  <g id="fox" transform="translate(260,370)">
    <!-- Tail - main fluffy tail with white tip -->
    <path d="M0,60
             C60,40 120,20 170,40
             C210,52 200,92 170,110
             C150,120 110,120 90,110
             C60,94 40,86 20,80
             Z"
          fill="url(#foxMain)" opacity="0.95" transform="rotate(-8 60 80)">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-6 60 80" to="6 60 80" dur="2.5s" repeatCount="indefinite"/>
    </path>
    <path d="M160,76 C190,60 210,40 230,20
             C240,14 250,18 258,26
             C270,42 260,70 232,88
             Z" fill="#ffcdb0" opacity="0.95" transform="translate(-10,-6) scale(0.95)"/>

    <!-- Tail tip white -->
    <path d="M180,100 C210,90 230,82 250,84
             C268,86 276,98 270,110
             C260,124 230,132 210,120
             C196,112 184,106 180,100Z" fill="#ffffff" opacity="0.95">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-6 210 100" to="6 210 100" dur="2.5s" repeatCount="indefinite"/>
    </path>

    <!-- Body -->
    <path d="M60,90 C40,70 20,60 10,40
             C2,24 18,8 42,12
             C66,16 78,28 86,38
             C92,46 100,60 108,74
             C120,100 140,120 170,120
             C170,120 150,100 120,92
             C88,82 72,86 60,90Z"
          fill="url(#foxFur)" opacity="0.95"/>

    <!-- Head -->
    <path d="M120,70
             C125,60 140,54 150,58
             C160,62 168,74 164,86
             C160,98 146,106 132,108
             C118,110 110,100 110,90
             C110,82 112,76 120,70Z"
          fill="#ffb07a"/>

    <!-- Ear left -->
    <path d="M132,54 L118,34 L136,40 Z" fill="#ff9a4d"/>
    <!-- Ear right -->
    <path d="M152,54 L170,38 L144,44 Z" fill="#ff9a4d"/>

    <!-- Eye -->
    <circle cx="140" cy="78" r="2.6" fill="#1a1a1a"/>
    <!-- Nose -->
    <circle cx="148" cy="92" r="3" fill="#1a1a1a"/>

    <!-- Front leg -->
    <path d="M100,118 L110,118 L112,144 L102,144 Z" fill="#e58a45"/>
    <!-- Back leg -->
    <path d="M40,120 C50,118 64,124 72,132 L78,144 L66,146 L48,136 Z" fill="#e58a45"/>

  </g>

  <!-- Ground shading behind fox for depth -->
  <ellipse cx="320" cy="480" rx="180" ry="40" fill="rgba(0,0,0,0.05)"/>

  <!-- Foreground subtle stars twinkling via group opacity (pure SVG animation) -->
  <g opacity="0.6" fill="white" stroke="none">
    <circle cx="210" cy="170" r="2">
      <animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="260" cy="150" r="1.6">
      <animate attributeName="opacity" values="0.7;1;0.7" dur="4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="310" cy="190" r="1.2">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="5s" repeatCount="indefinite"/>
    </circle>
  </g>

</svg>