GPT-6 Luna

by OpenAIReasoningClean

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

How it went

Total time: 40.2 s
Cost: $0.0020
Output tokens: 3,901
Spent thinking: 190 tokens
Speed: 132.7 tok/s
Console errors: 0

First token after: 10.8 s
First visible text after: 12.5 s
Prompt tokens: 522
Code size: 8.2 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"low"}
Max output: 64,000 tokens
Generated: Nov 10, 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 · 153 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-labelledby="title desc">
  <title id="title">Fox beneath a starry moon</title>
  <desc id="desc">A russet fox sits on a grassy hill, gazing up at a glowing full moon in a star-filled night sky.</desc>

  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#101936"/>
      <stop offset=".58" stop-color="#25345a"/>
      <stop offset="1" stop-color="#51617a"/>
    </linearGradient>
    <linearGradient id="hill" x1="0" y1="0" x2=".65" y2="1">
      <stop offset="0" stop-color="#344b55"/>
      <stop offset="1" stop-color="#172b38"/>
    </linearGradient>
    <linearGradient id="foxFur" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#f5a45d"/>
      <stop offset=".55" stop-color="#d96f3c"/>
      <stop offset="1" stop-color="#a94c36"/>
    </linearGradient>
    <radialGradient id="moonGlow">
      <stop offset="0" stop-color="#fff3c8" stop-opacity=".34"/>
      <stop offset=".55" stop-color="#e9dba8" stop-opacity=".12"/>
      <stop offset="1" stop-color="#e9dba8" stop-opacity="0"/>
    </radialGradient>
    <filter id="softGlow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="8"/>
    </filter>
  </defs>

  <!-- Night sky -->
  <rect width="800" height="600" fill="url(#sky)"/>
  <circle cx="618" cy="150" r="105" fill="url(#moonGlow)"/>
  <circle cx="618" cy="150" r="49" fill="#f5e9bf" opacity=".22" filter="url(#softGlow)"/>
  <circle cx="618" cy="150" r="38" fill="#f4e9c7"/>
  <path d="M600 125c10-9 19-7 25-1 7 7 7 16 1 22-7 7-17 5-22 13-4 6-2 13 3 17-13-3-22-16-22-28 0-10 5-18 15-23z" fill="#e5d8b3" opacity=".38"/>
  <circle cx="639" cy="164" r="5" fill="#dfd2ad" opacity=".58"/>
  <circle cx="606" cy="165" r="3" fill="#dfd2ad" opacity=".5"/>

  <!-- Distant stars -->
  <g fill="#fff4d4">
    <circle cx="63" cy="78" r="1.8"/><circle cx="127" cy="150" r="1.4"/>
    <circle cx="180" cy="54" r="1.6"/><circle cx="236" cy="117" r="1.5"/>
    <circle cx="290" cy="66" r="1.8"/><circle cx="354" cy="144" r="1.4"/>
    <circle cx="396" cy="48" r="1.5"/><circle cx="465" cy="92" r="1.8"/>
    <circle cx="519" cy="55" r="1.3"/><circle cx="704" cy="68" r="1.6"/>
    <circle cx="756" cy="128" r="1.4"/><circle cx="74" cy="202" r="1.5"/>
    <circle cx="166" cy="215" r="1.3"/><circle cx="275" cy="186" r="1.6"/>
    <circle cx="346" cy="221" r="1.5"/><circle cx="470" cy="190" r="1.3"/>
    <circle cx="735" cy="222" r="1.8"/><circle cx="548" cy="227" r="1.4"/>
    <circle cx="94" cy="127" r="1"/><circle cx="423" cy="175" r="1"/>
    <circle cx="683" cy="199" r="1.1"/><circle cx="218" cy="235" r="1"/>
  </g>
  <g fill="#f6dfaa">
    <path d="M96 100v8m-4-4h8" stroke="#f6dfaa" stroke-width="1.4"/>
    <path d="M323 91v9m-4.5-4.5h9" stroke="#f6dfaa" stroke-width="1.3"/>
    <path d="M514 157v8m-4-4h8" stroke="#f6dfaa" stroke-width="1.3"/>
    <path d="M749 95v8m-4-4h8" stroke="#f6dfaa" stroke-width="1.3"/>
    <path d="M196 174v7m-3.5-3.5h7" stroke="#f6dfaa" stroke-width="1.2"/>
  </g>

  <!-- Twinkling stars -->
  <g fill="#fff8de">
    <circle cx="145" cy="95" r="2">
      <animate attributeName="opacity" values=".35;1;.35" dur="2.7s" repeatCount="indefinite"/>
    </circle>
    <circle cx="382" cy="103" r="2.1">
      <animate attributeName="opacity" values="1;.3;1" dur="3.2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="564" cy="105" r="1.8">
      <animate attributeName="opacity" values=".25;1;.25" dur="2.3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="679" cy="112" r="2">
      <animate attributeName="opacity" values=".4;1;.4" dur="3.6s" repeatCount="indefinite"/>
    </circle>
    <circle cx="307" cy="156" r="1.8">
      <animate attributeName="opacity" values="1;.25;1" dur="2.9s" repeatCount="indefinite"/>
    </circle>
    <circle cx="80" cy="165" r="1.8">
      <animate attributeName="opacity" values=".3;1;.3" dur="3.4s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Shooting star; one pass begins immediately, then repeats every four seconds -->
  <g opacity="0">
    <path d="M0 0l-76 39" fill="none" stroke="#fff2cc" stroke-width="2" stroke-linecap="round" opacity=".42"/>
    <path d="M0 0l-27 14" fill="none" stroke="#fff9e7" stroke-width="2.4" stroke-linecap="round"/>
    <circle r="2.6" fill="#fff9e7"/>
    <animateTransform attributeName="transform" type="translate" values="755 57;390 247" dur="4s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.04;.15;.28;1" dur="4s" repeatCount="indefinite"/>
  </g>

  <!-- Layered distant hills -->
  <path d="M0 345Q95 290 188 334t183-4q84-49 171 5t150-6q55-40 108-14v147H0z" fill="#36465e"/>
  <path d="M0 386q110-58 205-21t179-9q93-43 180 13t126-1q60-38 110-4v118H0z" fill="#293b50"/>
  <path d="M0 421q116-38 236-10t204-8q97-41 194 0t166-7v105H0z" fill="#243846"/>

  <!-- Far trees -->
  <g fill="#1d3040" opacity=".9">
    <path d="M43 383l16-48 16 48h-10l18 27H34l18-27z"/>
    <path d="M92 384l13-39 14 39h-8l15 24H84l15-24z"/>
    <path d="M699 365l17-52 17 52h-10l19 29h-52l18-29z"/>
    <path d="M749 385l14-43 14 43h-9l16 25h-46l16-25z"/>
    <path d="M665 393l11-34 12 34h-7l13 21h-37l13-21z"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0 464Q146 422 277 444q85 14 158-5 138-37 365 8v153H0z" fill="url(#hill)"/>
  <path d="M0 473q167-42 293-17 109 20 193-6 155-47 314 3" fill="none" stroke="#65736b" stroke-width="2" opacity=".4"/>
  <g stroke="#819078" stroke-width="2" stroke-linecap="round" opacity=".55">
    <path d="M69 487l-5-12m5 12 7-9M136 470l-2-11m2 11 7-8M716 476l-5-11m5 11 7-8"/>
    <path d="M683 489l-1-9m1 9 6-6M224 478l-4-8m4 8 6-6"/>
  </g>

  <!-- Fox shadow -->
  <ellipse cx="425" cy="492" rx="95" ry="16" fill="#142633" opacity=".55"/>

  <!-- Bushy tail, behind the body -->
  <g>
    <path d="M432 454c-24 20-52 27-78 11-29-18-29-49-8-68 20-19 51-16 66 4 13 17 8 32-2 43 15-2 29-1 42 3z" fill="url(#foxFur)"/>
    <path d="M363 403c-17 7-24 23-17 38 7 15 22 22 39 24-11-11-16-23-12-37 3-11 8-19 18-25-9-4-19-4-28 0z" fill="#f8e7c8"/>
    <path d="M355 412c-7 9-7 20-1 29 4 6 9 10 17 13-7-13-6-28 2-39-7-3-13-4-18-3z" fill="#fff3da"/>
    <path d="M388 402c13 12 18 28 10 42" fill="none" stroke="#f8bd78" stroke-width="3" opacity=".55"/>
    <animateTransform attributeName="transform" type="rotate" values="-2 423 449;2 423 449;-2 423 449" dur="3.2s" repeatCount="indefinite"/>
  </g>

  <!-- Sitting fox -->
  <path d="M394 476c-8-26-4-59 4-79 10-25 36-39 61-32 25 7 38 31 34 58l-5 47c-1 13-8 22-21 22h-52c-11 0-18-5-21-16z" fill="url(#foxFur)"/>
  <!-- Chest and belly -->
  <path d="M433 390c-10 13-14 32-12 52 2 20 12 35 27 43h18c-8-18-5-39-3-57 2-17-6-33-19-40z" fill="#f8e7c8"/>
  <path d="M440 415c-4 16-3 43 5 60" fill="none" stroke="#e6cba8" stroke-width="2" opacity=".7"/>
  <!-- Forepaws -->
  <path d="M407 463c-2 11-2 22 0 28h25c2-8 1-18-2-27z" fill="#e9844a"/>
  <path d="M445 462c-2 11-2 21 0 29h25c2-9 1-19-2-28z" fill="#da7543"/>
  <path d="M407 487h25m13 0h25" stroke="#f4d7b5" stroke-width="2" stroke-linecap="round"/>

  <!-- Head and ears -->
  <path d="M397 341l-9-61 44 35c12-4 25-3 36 2l42-37-6 68c-2 28-24 46-53 46-31 0-53-21-54-53z" fill="url(#foxFur)"/>
  <path d="M395 327l-3-35 25 26z" fill="#432c37"/>
  <path d="M495 320l9-32-25 26z" fill="#432c37"/>
  <path d="M395 319l-1-20 17 19z" fill="#e99569"/>
  <path d="M493 316l5-18-17 18z" fill="#e99569"/>

  <!-- Face markings and snout, looking toward the moon -->
  <path d="M397 339c10 8 23 9 35 3 8 9 18 13 30 12 10-1 18-5 25-12-1 27-20 46-47 46-27 0-44-19-43-49z" fill="#f8e9cf"/>
  <path d="M427 354c13 6 28 5 41-2 9 4 18 4 27 1-7 13-22 21-38 21-14 0-26-7-30-20z" fill="#fff2dc"/>
  <path d="M478 345c13 2 24-2 33-10 5-5 11-6 15-2 4 4 1 10-5 14-12 8-27 12-43 10z" fill="#f8e7c8"/>
  <path d="M515 330c5-3 11-2 13 2 2 4-2 8-8 9-5 1-9-1-9-4 0-3 1-5 4-7z" fill="#292632"/>
  <circle cx="447" cy="336" r="3.4" fill="#282936"/>
  <circle cx="448" cy="335" r="1" fill="#fff"/>
  <path d="M462 353q8 7 17 3" fill="none" stroke="#9e5743" stroke-width="1.8" stroke-linecap="round"/>
  <path d="M486 324q8-6 15-4" fill="none" stroke="#f8c58d" stroke-width="3" stroke-linecap="round"/>
  <path d="M407 347q-7 2-12-2" fill="none" stroke="#b9583a" stroke-width="2" opacity=".7"/>
</svg>

Reasoning trace (190 tokens)

**Creating SVG Animations**

I need to make sure we're outputting SVG only, polishing it up for clarity. The tricky part is getting the shooting star effect down within 2 seconds, repeating it four times using animation motion. I’m thinking I’ll animate the path with opacity changes over 4 seconds, applying transformations to the group. Using animateTransform, I can set the movement from starting at (0,0) to a specific point. I want the stars varied for an overall rich illustration. Let’s focus on the SVG code.