GPT-6 Luna

by OpenAIReasoningClean

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

How it went

Total time: 1 min 13 s
Cost: $0.0054
Output tokens: 10,650
Spent thinking: 5,240 tokens
Speed: 156.3 tok/s
Console errors: 0

First token after: 5.3 s
First visible text after: 48.1 s
Prompt tokens: 522
Code size: 11.7 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"high"}
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 · 213 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-labelledby="title description">
  <title id="title">Fox watching the moon</title>
  <desc id="description">A russet fox sits on a midnight-blue hill beneath a glowing moon, with twinkling stars, distant hills, and pine trees.</desc>

  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#10172f"/>
      <stop offset=".55" stop-color="#1b2b4a"/>
      <stop offset="1" stop-color="#304c66"/>
    </linearGradient>
    <linearGradient id="hillsFar" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#293e58"/>
      <stop offset="1" stop-color="#1d3449"/>
    </linearGradient>
    <linearGradient id="hillFront" x1="0" y1="0" x2=".3" y2="1">
      <stop stop-color="#244752"/>
      <stop offset=".55" stop-color="#193b49"/>
      <stop offset="1" stop-color="#142d3d"/>
    </linearGradient>
    <radialGradient id="moonFill" cx=".34" cy=".3" r=".8">
      <stop stop-color="#fff9df"/>
      <stop offset=".72" stop-color="#f3e8c8"/>
      <stop offset="1" stop-color="#dfd4b5"/>
    </radialGradient>
    <linearGradient id="shootTrail" x1="-70" y1="18" x2="0" y2="0" gradientUnits="userSpaceOnUse">
      <stop stop-color="#fff5d9" stop-opacity="0"/>
      <stop offset=".72" stop-color="#fff5d9" stop-opacity=".55"/>
      <stop offset="1" stop-color="#fffdf1"/>
    </linearGradient>
    <filter id="moonGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="12" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="starGlow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="2" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Night sky -->
  <rect width="800" height="600" fill="url(#sky)"/>
  <path d="M0 0h800v270c-145-24-267-18-402 0S137 283 0 254z" fill="#11182e" opacity=".19"/>

  <!-- Distant moonlight -->
  <circle cx="632" cy="145" r="76" fill="#f6e6bd" opacity=".1">
    <animate attributeName="opacity" values=".07;.13;.07" dur="5s" repeatCount="indefinite"/>
  </circle>
  <circle cx="632" cy="145" r="51" fill="#fff0cb" filter="url(#moonGlow)"/>
  <circle cx="632" cy="145" r="48" fill="url(#moonFill)"/>
  <circle cx="618" cy="128" r="5" fill="#d7c9a9" opacity=".32"/>
  <circle cx="647" cy="155" r="7" fill="#d7c9a9" opacity=".25"/>
  <circle cx="623" cy="166" r="3.5" fill="#d7c9a9" opacity=".3"/>
  <circle cx="649" cy="122" r="2.5" fill="#d7c9a9" opacity=".23"/>

  <!-- Stars -->
  <g fill="#f6eddb">
    <circle cx="49" cy="55" r="1.8" opacity=".8"/>
    <circle cx="112" cy="103" r="1.4" opacity=".7"/>
    <circle cx="157" cy="47" r="1.5" opacity=".78"/>
    <circle cx="215" cy="86" r="1.8" opacity=".7"/>
    <circle cx="264" cy="39" r="1.3" opacity=".78"/>
    <circle cx="321" cy="99" r="1.6" opacity=".72"/>
    <circle cx="373" cy="53" r="1.5" opacity=".85"/>
    <circle cx="429" cy="119" r="1.4" opacity=".68"/>
    <circle cx="482" cy="61" r="1.8" opacity=".76"/>
    <circle cx="537" cy="95" r="1.3" opacity=".74"/>
    <circle cx="700" cy="53" r="1.6" opacity=".76"/>
    <circle cx="753" cy="99" r="1.5" opacity=".8"/>
    <circle cx="75" cy="150" r="1.4" opacity=".76"/>
    <circle cx="135" cy="190" r="1.7" opacity=".72"/>
    <circle cx="193" cy="147" r="1.3" opacity=".75"/>
    <circle cx="245" cy="177" r="1.7" opacity=".8"/>
    <circle cx="302" cy="149" r="1.3" opacity=".75"/>
    <circle cx="357" cy="205" r="1.6" opacity=".7"/>
    <circle cx="414" cy="167" r="1.3" opacity=".77"/>
    <circle cx="468" cy="207" r="1.8" opacity=".7"/>
    <circle cx="522" cy="165" r="1.5" opacity=".73"/>
    <circle cx="727" cy="184" r="1.5" opacity=".78"/>
    <circle cx="775" cy="148" r="1.7" opacity=".7"/>
    <circle cx="44" cy="238" r="1.5" opacity=".7"/>
    <circle cx="174" cy="245" r="1.6" opacity=".74"/>
    <circle cx="283" cy="233" r="1.4" opacity=".76"/>
    <circle cx="392" cy="265" r="1.6" opacity=".7"/>
    <circle cx="505" cy="243" r="1.4" opacity=".8"/>
    <circle cx="705" cy="238" r="1.5" opacity=".7"/>
  </g>

  <g fill="#fff2d5" filter="url(#starGlow)">
    <path d="M91 77l2.5 7.1 7.2 2.5-7.2 2.4-2.5 7.2-2.4-7.2-7.2-2.4 7.2-2.5z">
      <animate attributeName="opacity" values=".35;1;.45;.35" dur="2.8s" begin="-.7s" repeatCount="indefinite"/>
    </path>
    <path d="M240 119l2 5.7 5.7 2-5.7 2-2 5.7-2-5.7-5.7-2 5.7-2z">
      <animate attributeName="opacity" values="1;.35;.9;1" dur="3.3s" begin="-1.4s" repeatCount="indefinite"/>
    </path>
    <path d="M344 36l2 5.5 5.5 2-5.5 2-2 5.5-2-5.5-5.5-2 5.5-2z">
      <animate attributeName="opacity" values=".35;1;.4;.35" dur="2.5s" begin="-.3s" repeatCount="indefinite"/>
    </path>
    <path d="M462 115l2.3 6.3 6.3 2.2-6.3 2.2-2.3 6.3-2.2-6.3-6.3-2.2 6.3-2.2z">
      <animate attributeName="opacity" values=".45;1;.35;.45" dur="3.1s" begin="-2s" repeatCount="indefinite"/>
    </path>
    <path d="M745 44l2 5.8 5.8 2-5.8 2-2 5.8-2-5.8-5.8-2 5.8-2z">
      <animate attributeName="opacity" values="1;.4;.8;1" dur="2.7s" begin="-1s" repeatCount="indefinite"/>
    </path>
    <path d="M566 224l1.8 5.1 5.1 1.8-5.1 1.8-1.8 5.1-1.8-5.1-5.1-1.8 5.1-1.8z">
      <animate attributeName="opacity" values=".3;1;.4;.3" dur="3.5s" begin="-2.4s" repeatCount="indefinite"/>
    </path>
  </g>
  <g fill="#fff5df">
    <circle cx="183" cy="80" r="1.7"><animate attributeName="opacity" values=".3;1;.3" dur="2.2s" begin="-.9s" repeatCount="indefinite"/></circle>
    <circle cx="397" cy="83" r="1.8"><animate attributeName="opacity" values=".35;1;.35" dur="3s" begin="-1.7s" repeatCount="indefinite"/></circle>
    <circle cx="582" cy="66" r="1.7"><animate attributeName="opacity" values=".3;1;.3" dur="2.6s" begin="-.4s" repeatCount="indefinite"/></circle>
    <circle cx="684" cy="212" r="1.8"><animate attributeName="opacity" values=".3;1;.3" dur="3.2s" begin="-1.2s" repeatCount="indefinite"/></circle>
    <circle cx="321" cy="190" r="1.6"><animate attributeName="opacity" values=".3;1;.3" dur="2.4s" begin="-1.5s" repeatCount="indefinite"/></circle>
    <circle cx="117" cy="218" r="1.7"><animate attributeName="opacity" values=".3;1;.3" dur="3.1s" begin="-.5s" repeatCount="indefinite"/></circle>
  </g>

  <!-- Shooting star, making a brief pass once every four seconds -->
  <g opacity="0">
    <path d="M-70 18L0 0" fill="none" stroke="url(#shootTrail)" stroke-width="2.5" stroke-linecap="round"/>
    <circle cx="0" cy="0" r="2.4" fill="#fff8df"/>
    <animateMotion dur="4s" repeatCount="indefinite" calcMode="linear"
      path="M -120 210 L 900 -80"
      keyTimes="0;.025;.22;1" keyPoints="0;0;1;1"/>
    <animate attributeName="opacity" dur="4s" repeatCount="indefinite"
      values="0;0;1;0;0" keyTimes="0;.025;.055;.24;1"/>
  </g>

  <!-- Layers of distant hills -->
  <path d="M0 359c80-36 136-40 212-7 61-47 126-49 201-10 71-46 151-47 218-9 57-33 106-26 169 6v151H0z" fill="url(#hillsFar)"/>
  <path d="M0 400c98-48 176-39 256-5 77-57 160-48 245-16 83-42 187-40 299 8v117H0z" fill="#203a50" opacity=".9"/>

  <!-- Distant pine silhouettes -->
  <g fill="#162f42">
    <path d="M50 417l17-40 12 0-17 40h18l-23-51-24 51h17l-17 22h49l-17-22z"/>
    <path d="M113 414l21-54 15 0-21 54h23l-29-67-31 67h23l-21 24h62l-21-24z"/>
    <path d="M188 424l16-39 12 0-16 39h18l-23-52-24 52h18l-17 22h50l-17-22z"/>
    <path d="M684 408l18-46 13 0-18 46h21l-26-58-27 58h20l-19 24h57l-19-24z"/>
    <path d="M746 421l15-38 11 0-15 38h17l-22-49-23 49h17l-16 20h47l-16-20z"/>
  </g>
  <g fill="#1b3a4b" opacity=".85">
    <path d="M26 438l12-31 9 0-12 31h14l-18-40-19 40h14l-13 18h40l-13-18z"/>
    <path d="M161 440l13-34 10 0-13 34h15l-19-43-20 43h15l-14 18h43l-14-18z"/>
    <path d="M712 438l13-34 10 0-13 34h15l-19-43-20 43h15l-14 18h43l-14-18z"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0 471c87-18 163-19 234-1 64 16 115-30 184-32 82-3 121 18 190 4 71-15 125-47 192-50v208H0z" fill="url(#hillFront)"/>
  <path d="M0 471c87-18 163-19 234-1 64 16 115-30 184-32 82-3 121 18 190 4 71-15 125-47 192-50" fill="none" stroke="#547069" stroke-opacity=".4" stroke-width="2"/>

  <!-- Small hilltop trees -->
  <g fill="#153642">
    <path d="M74 468l17-43 13 0-17 43h19l-24-54-25 54h18l-18 21h54l-18-21z"/>
    <path d="M136 464l13-32 10 0-13 32h15l-19-42-20 42h15l-14 18h43l-14-18z"/>
    <path d="M635 434l20-50 14 0-20 50h22l-28-62-29 62h22l-20 24h64l-20-24z"/>
    <path d="M704 424l15-38 11 0-15 38h17l-22-49-23 49h17l-16 19h47l-16-19z"/>
    <path d="M758 415l14-35 10 0-14 35h16l-20-45-21 45h16l-15 18h45l-15-18z"/>
  </g>

  <!-- Fox's sweeping tail -->
  <g>
    <path d="M420 401c-17-23-45-35-75-30-35 6-66 31-85 60-8 12-11 23-4 33 11 15 31 14 49 3 28-18 54-32 90-18l36-24z" fill="#db7040"/>
    <path d="M345 372c-35 6-66 31-85 60-8 12-11 23-4 33 11 15 31 14 49 3-7-17-2-43 12-63 8-12 17-23 28-33z" fill="#f4e8d0"/>
    <path d="M337 379c-28 11-55 35-68 57" fill="none" stroke="#f7c18a" stroke-width="2" stroke-linecap="round" opacity=".55"/>
    <animateTransform attributeName="transform" type="rotate" values="0 390 418;-3 390 418;0 390 418" dur="3.6s" repeatCount="indefinite"/>
  </g>

  <!-- Seated fox -->
  <path d="M414 357c19 0 43 7 59 23 18 18 23 47 13 70-8 19-25 30-49 32l-39-3c-19-8-29-25-27-47 2-29 19-57 43-75z" fill="#d96d3d"/>
  <path d="M426 365c15 8 25 25 26 46 1 17 5 34 19 45-11 15-32 21-51 12-6-16-13-27-13-43 0-24 5-46 19-60z" fill="#f3e5cf"/>
  <path d="M398 405c-11 17-15 40-7 57 6 12 19 17 34 18 7-13 8-29 3-43-5-17-15-27-30-32z" fill="#c96439"/>
  <path d="M427 410c8 15 12 37 9 62l-26 1c-5-7-2-19-4-30-3-15-1-25 5-37z" fill="#dd7543"/>
  <path d="M454 410c10 16 13 37 10 62l-26 1c-2-8 1-19-1-31-2-14-4-24-8-34z" fill="#cf683a"/>
  <path d="M405 472c10 2 21 2 31 0 4 4 3 9-2 11h-34c-5-2-4-8 5-11z" fill="#f1dfc4"/>
  <path d="M440 472c9 2 19 2 28 0 5 4 4 9-2 11h-33c-4-2-3-8 7-11z" fill="#f3e3cb"/>

  <!-- Fox head, ears, and profile -->
  <path d="M411 323l-13-39c-2-6 2-9 7-5l24 23 18-24c4-5 8-2 8 4l1 20c20-2 36 9 42 25 3 8 3 14 15 18l12 5c5 2 4 6-1 8l-22 8c-12 14-29 19-48 13l-31-12z" fill="#e17a43"/>
  <path d="M402 286l20 19-11-1z" fill="#a74c35"/>
  <path d="M447 284l-2 24 14-8z" fill="#a74c35"/>
  <path d="M454 306c14-2 27 5 31 17-10-5-17-4-26 2-6 4-12 7-20 7 2-12 6-20 15-26z" fill="#bd5838" opacity=".9"/>
  <path d="M463 329c13-5 24-1 40 8 4 2 10 3 14 3l-19 8c-12 6-25 4-35-4z" fill="#f5e4cd"/>
  <path d="M473 317c4-4 9-3 12 1-2 5-7 7-12 4-2-1-2-3 0-5z" fill="#211c25"/>
  <circle cx="480" cy="317" r="1.3" fill="#fff4dd"/>
  <path d="M516 337c4 0 8 2 8 4-1 3-5 4-10 3l-3-3z" fill="#24212a"/>
  <path d="M496 348c5 3 11 2 15-1" fill="none" stroke="#8d4737" stroke-width="1.7" stroke-linecap="round"/>
  <path d="M497 350c6 5 11 6 16 5" fill="none" stroke="#f0d8bd" stroke-width="1.2" stroke-linecap="round"/>
  <path d="M500 343l14-2M500 347l13 2" fill="none" stroke="#f4ddc5" stroke-width="1" stroke-linecap="round" opacity=".8"/>
  <path d="M452 357c-9 5-17 5-25 1" fill="none" stroke="#bd5938" stroke-width="2" stroke-linecap="round" opacity=".65"/>

  <!-- Grasses and little night flowers -->
  <g fill="none" stroke="#78917a" stroke-linecap="round" opacity=".78">
    <path d="M182 487q-8-14-5-25M183 487q3-17 13-24M181 487q-1-10-10-15" stroke-width="2"/>
    <path d="M310 490q-5-13-1-23M311 490q5-12 13-16" stroke-width="1.8"/>
    <path d="M548 465q-8-15-5-25M549 465q4-14 14-19M548 465q-2-9-11-13" stroke-width="2"/>
    <path d="M740 447q-7-13-4-21M741 447q4-13 13-17" stroke-width="1.8"/>
  </g>
  <g fill="#e9c98f">
    <circle cx="179" cy="461" r="2"/>
    <circle cx="546" cy="438" r="2"/>
    <circle cx="742" cy="425" r="1.8"/>
  </g>
  <g fill="#d7c7a3" opacity=".65">
    <circle cx="226" cy="493" r="1.5"/>
    <circle cx="578" cy="476" r="1.4"/>
    <circle cx="681" cy="457" r="1.5"/>
  </g>
</svg>

Reasoning trace (5,240 tokens)

**Considering animation techniques**

I’m working on the SMIL event schedule, and it’s getting a bit complex. The animateMotion details imply that the path transitions over four seconds, but it should always remain visible, perhaps with some opacity animation. The timing values suggest a fleeting visible segment. I’m pondering if using an animateTransform translate might be better for a more effective animation that visually crosses the entire width while fitting the user’s idea of a shooting star moving quickly followed by a pause.**Visualizing the scene**

I’m picturing a foreground with a dark teal and deep blue-green palette. There’s a hill with a path starting from coordinates M0 505 and then down to the bottom. It seems like a serene setting where a fox is relaxing on the front hill, placed at coordinates x410 and y450. I’m getting a sense of tranquil nature here, and I want to capture that feeling in the overall visualization.**Designing moon imagery**

I'm thinking about creating an image of a full moon but with a lightly shaded crescent overlay. It might be interesting to add a dark circle that’s partially shifted to the right, emphasizing the crescent's shape. This adjustment could enhance the overall composition, making it visually appealing. It’s all about finding the right balance in the design. I wonder how this will look once I apply these ideas!**Designing moon imagery**

I'm working on creating a moon overlay with a soft glow. I think for the moon, I’ll use a crescent facing left, and I might blend in a light color while ensuring it's visible. I should consider adding a darker background circle to enhance the crescent. A full moon with gradients and subtle craters could look better. I also want to include clouds, trees, hills, and a starry background. Overall, I need the silhouette of a fox to be distinct without being too dark.**Creating fox illustration**

I'm designing a fox sitting at position x420. The tail has an intricate curve starting from M 419 400, creating a leaf-like shape pointed to the left. I’m thinking of adding a white tip for contrast, starting from x330 with the tip at x258. The shape of the tail needs to be broad near the base. Lastly, I’ll finalize the body silhouette, ensuring the feet are positioned at y482 for balance.**Sketching fox body**

I'm working on the fox's body, starting at the hilltop position y460 and x400, moving down. The main body will curve gracefully, beginning from coordinates 390,389 and going through 375,425 to 384,456. I’ll outline the shape, using curves for a smooth silhouette. For the hind legs, I’m thinking of an ovoid shape starting from 390,414 and then detailing the foot at 402,479. I want to ensure it looks natural and cohesive throughout!**Designing tree silhouettes**

I'm creating tree silhouettes in the landscape, focusing on the foreground hill that hides the lower trunk. The left side features pine trees, adding depth. I want to incorporate specific shades like #14283b and #1c3448. There's a need to ensure the trees are positioned correctly around certain coordinates, like x110 y382 to 460 and x208. I'll also include a title, description, and definitions for gradients in the SVG output to make it standalone.**Designing an SVG scene**

I’m working on a moon collision scene, focusing on coordinates and attributes for the shooting star path using animateMotion. The sky should have a gradient, and I want to include a vignette effect. I’ll add stars in a scattered pattern while avoiding the moon zone. Small stylized flowers and glowing fireflies will enhance the scene, alongside a hill silhouette with grass strokes. I need to ensure the SVG is valid, with all tags closed and no CSS except perhaps for inline star styles.**Creating a fox composition**

I’m planning to design distant trees using reusable `<g>` groups but without using `<use>`. Instead, I’ll focus on hand-drawn shapes and paths, which I can duplicate as needed. The trees will have a pine-like shape with layered paths. In the foreground, I'll create hills, and the composition will feature a fox head gazing at the moon, with its eye aimed up and to the right at coordinates 478, 318, and an ear shown in profile.