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 7 s
Cost: $0.0036
Output tokens: 7,140
Spent thinking: 2,457 tokens
Speed: 113.2 tok/s
Console errors: 0

First token after: 3.6 s
First visible text after: 29.8 s
Prompt tokens: 522
Code size: 11.3 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"medium"}
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 · 186 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 watching the moon</title>
  <desc id="desc">A sitting fox on a quiet hill beneath a glowing moon and twinkling stars.</desc>

  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#111c3b"/>
      <stop offset=".65" stop-color="#26365b"/>
      <stop offset="1" stop-color="#465477"/>
    </linearGradient>
    <radialGradient id="moonGlow">
      <stop offset="0" stop-color="#fff4c7" stop-opacity=".38"/>
      <stop offset=".46" stop-color="#e9dba7" stop-opacity=".16"/>
      <stop offset="1" stop-color="#e9dba7" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="moonFace" x1=".15" y1="0" x2=".85" y2="1">
      <stop stop-color="#fff8db"/>
      <stop offset="1" stop-color="#e8dba9"/>
    </linearGradient>
    <linearGradient id="farHill" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#38496a"/>
      <stop offset="1" stop-color="#263651"/>
    </linearGradient>
    <linearGradient id="nearHill" x1="0" y1="0" x2=".5" y2="1">
      <stop stop-color="#263e4b"/>
      <stop offset="1" stop-color="#172d39"/>
    </linearGradient>
    <linearGradient id="shootTrail" x1="0" y1="0" x2="1" y2="0">
      <stop stop-color="#fff5ca" stop-opacity="0"/>
      <stop offset="1" stop-color="#fff5ca"/>
    </linearGradient>
    <filter id="softGlow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="12"/>
    </filter>
    <filter id="starGlow" x="-200%" y="-200%" width="500%" height="500%">
      <feGaussianBlur stdDeviation="2.5"/>
    </filter>
    <style>
      .twinkle {
        transform-box: fill-box;
        transform-origin: center;
        animation: twinkle 3.2s ease-in-out infinite;
      }
      @keyframes twinkle {
        0%, 100% { opacity: .48; transform: scale(.82); }
        50% { opacity: 1; transform: scale(1.18); }
      }
      .grass {
        fill: none;
        stroke: #71836f;
        stroke-width: 1.5;
        stroke-linecap: round;
        opacity: .46;
      }
    </style>
  </defs>

  <!-- Night sky -->
  <rect width="800" height="600" fill="url(#sky)"/>
  <path d="M0 322 Q164 271 317 317 T800 296 V430 H0Z" fill="#ffffff" opacity=".018"/>

  <!-- Moon and its halo -->
  <circle cx="630" cy="147" r="100" fill="#f2e4b6" opacity=".42" filter="url(#softGlow)"/>
  <circle cx="630" cy="147" r="91" fill="url(#moonGlow)"/>
  <circle cx="630" cy="147" r="48" fill="url(#moonFace)"/>
  <circle cx="615" cy="132" r="6" fill="#d7ca9f" opacity=".27"/>
  <circle cx="646" cy="159" r="9" fill="#d7ca9f" opacity=".2"/>
  <circle cx="621" cy="171" r="3.5" fill="#c9bd98" opacity=".25"/>
  <path d="M611 109 Q630 97 649 110" fill="none" stroke="#fffdf0" stroke-width="2" opacity=".52"/>

  <!-- Stars -->
  <g fill="#fff3d0">
    <g class="twinkle" style="animation-delay:-.4s"><circle cx="54" cy="69" r="2.1"/><path d="M54 63v12M48 69h12" stroke="#fff3d0" stroke-width=".8"/></g>
    <g class="twinkle" style="animation-delay:-1.7s"><circle cx="124" cy="130" r="1.8"/><path d="M124 125v10M119 130h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-.9s"><circle cx="207" cy="59" r="2.3"/><path d="M207 52v14M200 59h14" stroke="#fff3d0" stroke-width=".8"/></g>
    <g class="twinkle" style="animation-delay:-2.1s"><circle cx="282" cy="113" r="1.7"/><path d="M282 108v10M277 113h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-1.1s"><circle cx="348" cy="47" r="1.9"/><path d="M348 41v12M342 47h12" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-2.7s"><circle cx="419" cy="106" r="2.2"/><path d="M419 99v14M412 106h14" stroke="#fff3d0" stroke-width=".8"/></g>
    <g class="twinkle" style="animation-delay:-.6s"><circle cx="485" cy="62" r="1.6"/><path d="M485 57v10M480 62h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-1.3s"><circle cx="539" cy="208" r="2"/><path d="M539 202v12M533 208h12" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-2.4s"><circle cx="706" cy="70" r="2.1"/><path d="M706 64v12M700 70h12" stroke="#fff3d0" stroke-width=".8"/></g>
    <g class="twinkle" style="animation-delay:-.2s"><circle cx="759" cy="158" r="1.8"/><path d="M759 153v10M754 158h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-1.9s"><circle cx="77" cy="220" r="1.7"/><path d="M77 215v10M72 220h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-2.8s"><circle cx="171" cy="191" r="2.2"/><path d="M171 185v12M165 191h12" stroke="#fff3d0" stroke-width=".8"/></g>
    <g class="twinkle" style="animation-delay:-.8s"><circle cx="245" cy="235" r="1.6"/><path d="M245 230v10M240 235h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-1.4s"><circle cx="310" cy="175" r="2"/><path d="M310 169v12M304 175h12" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-2.2s"><circle cx="390" cy="223" r="1.8"/><path d="M390 218v10M385 223h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-.5s"><circle cx="465" cy="159" r="1.8"/><path d="M465 154v10M460 159h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-1.6s"><circle cx="520" cy="112" r="1.5"/><path d="M520 108v8M516 112h8" stroke="#fff3d0" stroke-width=".6"/></g>
    <g class="twinkle" style="animation-delay:-2.5s"><circle cx="740" cy="248" r="2"/><path d="M740 242v12M734 248h12" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-1s"><circle cx="101" cy="297" r="1.6"/><path d="M101 292v10M96 297h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-2s"><circle cx="211" cy="287" r="1.9"/><path d="M211 281v12M205 287h12" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-.7s"><circle cx="339" cy="267" r="1.5"/><path d="M339 263v8M335 267h8" stroke="#fff3d0" stroke-width=".6"/></g>
    <g class="twinkle" style="animation-delay:-1.2s"><circle cx="443" cy="286" r="1.8"/><path d="M443 281v10M438 286h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <g class="twinkle" style="animation-delay:-2.6s"><circle cx="690" cy="298" r="1.7"/><path d="M690 293v10M685 298h10" stroke="#fff3d0" stroke-width=".7"/></g>
    <circle cx="29" cy="156" r="1.2" opacity=".8"/>
    <circle cx="155" cy="45" r="1.2" opacity=".8"/>
    <circle cx="271" cy="45" r="1.2" opacity=".8"/>
    <circle cx="379" cy="149" r="1.1" opacity=".8"/>
    <circle cx="570" cy="66" r="1.2" opacity=".8"/>
    <circle cx="776" cy="109" r="1.1" opacity=".8"/>
    <circle cx="57" cy="267" r="1.1" opacity=".8"/>
    <circle cx="294" cy="218" r="1.1" opacity=".8"/>
    <circle cx="485" cy="244" r="1.2" opacity=".8"/>
    <circle cx="770" cy="203" r="1.2" opacity=".8"/>
  </g>

  <!-- Shooting star: one pass every four seconds, beginning immediately -->
  <g opacity="0">
    <path d="M-78 -38 L0 0" fill="none" stroke="url(#shootTrail)" stroke-width="2.5" stroke-linecap="round"/>
    <circle cx="0" cy="0" r="3" fill="#fff8dd" filter="url(#starGlow)"/>
    <circle cx="0" cy="0" r="1.8" fill="#fffdf1"/>
    <animateMotion dur="4s" repeatCount="indefinite" path="M 135 36 L 495 213"/>
    <animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0;1;0;0" keyTimes="0;.08;.68;1"/>
  </g>

  <!-- Layered distant hills -->
  <path d="M0 393 Q87 361 166 383 Q253 345 335 382 Q423 349 502 379 Q585 344 664 380 Q731 355 800 378 V500 H0Z" fill="url(#farHill)"/>
  <path d="M0 429 Q101 397 186 415 Q263 383 345 412 Q433 385 515 414 Q604 380 694 411 Q750 394 800 408 V520 H0Z" fill="#30435d"/>

  <!-- Distant pine silhouettes -->
  <g fill="#20344a" opacity=".86">
    <path d="M86 419l23-51 23 51h-14l19 29H82l18-29z"/>
    <path d="M127 426l17-39 18 39h-11l15 24h-44l15-24z"/>
    <path d="M690 418l25-56 25 56h-15l20 31h-60l20-31z"/>
    <path d="M739 430l18-41 19 41h-12l16 24h-45l16-24z"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0 493 Q128 476 224 458 Q316 440 402 450 Q492 462 573 455 Q687 445 800 454 V600 H0Z" fill="url(#nearHill)"/>
  <path d="M0 493 Q128 476 224 458 Q316 440 402 450 Q492 462 573 455 Q687 445 800 454" fill="none" stroke="#718074" stroke-opacity=".34" stroke-width="2"/>

  <!-- Foreground trees -->
  <g fill="#142b35">
    <path d="M74 487l25-58 25 58h-15l20 31H69l20-31z"/>
    <path d="M123 482l19-44 19 44h-11l15 24h-46l15-24z"/>
    <path d="M714 464l26-61 27 61h-16l21 34h-63l21-34z"/>
    <path d="M758 470l18-42 18 42h-11l15 24h-45l15-24z"/>
  </g>

  <!-- Fox, seated and gazing toward the moon -->
  <g transform="translate(382 456)">
    <!-- Swaying bushy tail -->
    <g>
      <path d="M-23-5 C-53 0-77 25-111 24 C-142 23-157 1-149-25 C-141-54-110-70-85-53 C-63-38-66-14-87-8 C-101-4-110-15-102-27 C-120-20-126-1-110 12 C-91 27-59 13-35-10Z" fill="#d96b37"/>
      <path d="M-148-12 C-153-30-140-51-122-59 C-132-42-127-23-112-11 C-123-7-137-7-148-12Z" fill="#f5edda"/>
      <path d="M-120-48 Q-104-59-91-51" fill="none" stroke="#ef9657" stroke-width="3" opacity=".65"/>
      <animateTransform attributeName="transform" type="rotate" values="-2 -24 -6;3 -24 -6;-2 -24 -6" dur="4s" repeatCount="indefinite"/>
    </g>

    <!-- Body and seated legs -->
    <path d="M-34 1 C-41-21-34-45-17-58 C-3-69 19-65 32-49 C44-34 44-13 35 3Z" fill="#c95e30"/>
    <path d="M-23-1 C-22-17-12-27 1-29 C15-31 23-19 24-2 L16 7H-17Z" fill="#f3e7d0"/>
    <path d="M-29-4 C-35 3-32 12-21 13 L-3 12 L1 2Z" fill="#a9442a"/>
    <path d="M12-3 C18-13 29-13 34-4 L37 9 L17 10Z" fill="#a9442a"/>
    <path d="M-30 8 Q-20 3-7 8 L-6 15H-29Q-35 13-30 8Z" fill="#202a37"/>
    <path d="M12 7 Q24 2 36 7 L40 14H13Q8 12 12 7Z" fill="#202a37"/>

    <!-- Chest and neck -->
    <path d="M5-49 C16-54 30-44 31-28 C31-18 26-8 20-1 L9-3 C18-17 14-30 2-37Z" fill="#f5ebd6"/>
    <path d="M-15-52 Q-4-62 8-58 Q17-54 21-44 L6-37 Q-3-43-15-41Z" fill="#e2763e"/>

    <!-- Head with distinct pointed ears and long muzzle -->
    <path d="M-9-69 L-19-105 L9-87 Q19-94 31-85 L43-72 Q51-65 65-59 L81-54 L61-47 Q56-37 42-39 Q27-40 17-49 L2-48 L-9-56Z" fill="#df7138"/>
    <path d="M-14-91 L-17-101 L-1-90Z" fill="#b84e31"/>
    <path d="M25-83 L30-101 L39-80Z" fill="#b84e31"/>
    <!-- Cream muzzle -->
    <path d="M47-59 Q61-57 81-54 L62-47 Q52-42 41-48 L32-54Z" fill="#f5ead4"/>
    <path d="M53-53 Q64-52 75-53" fill="none" stroke="#d9c9ad" stroke-width="1.2" opacity=".8"/>
    <circle cx="80" cy="-54" r="3.2" fill="#202a37"/>
    <!-- Eye and brow -->
    <ellipse cx="40" cy="-67" rx="2.4" ry="3.1" fill="#20232d"/>
    <path d="M35-73 Q40-76 45-72" fill="none" stroke="#9f482f" stroke-width="1.6" stroke-linecap="round"/>
    <path d="M-29-39 Q-18-53-7-56" fill="none" stroke="#f29a58" stroke-width="2" opacity=".7"/>
  </g>

  <!-- Small grasses and night flowers on the slope -->
  <g class="grass">
    <path d="M184 486l-4-12m4 12 4-16m-4 16-10-9m-50 15-2-10m2 10 7-13m-7 13-8-7"/>
    <path d="M540 474l-3-13m3 13 6-15m-6 15-9-8m131-3-3-12m3 12 7-15m-7 15-8-7"/>
  </g>
  <g fill="#d8c69b" opacity=".7">
    <circle cx="179" cy="471" r="1.7"/><circle cx="545" cy="459" r="1.6"/>
    <circle cx="655" cy="452" r="1.5"/><circle cx="237" cy="469" r="1.4"/>
  </g>
</svg>

Reasoning trace (2,457 tokens)

**Designing an animated SVG**

I need to create an SVG design that's polished at 800x600, featuring an animation using SMIL or CSS. The scene will include a fox facing the moon, which is positioned likely in the upper right, with the fox sitting on a hill looking right. I want to add twinkling stars, a swaying tail, and thoughtful paths with gradients for the sky and moon glow. The fox silhouette will be detailed, with distinctive shapes and colors. It's crucial that the SVG is valid and standalone with appropriate gradients and filters.**Creating a detailed fox scene**

I’m working on a canvas of 800x600, positioning the moon at coordinates around (625, 145). The hill line will rise from the left bottom, with a foreground hill stretching from (y470) left to (410) center to (445) right. The fox will be set at (x360) on the hill and ground line, in a sitting posture. I’ll focus on making the tail extend left and creating a swirling path to shape it beautifully, ending with a recognizable white tip at the tail's far end. The transformation for the tail will be animated for a dynamic look.**Designing the fox tail**

I think I need to create a bigger, more sweeping tail that extends left, with a distinct white tip at the end. To shape this tail, I'm using a path with coordinates starting from (M -15, 14) and incorporating curves to bring out its dynamic form. The control points will create a flowing appearance, giving it a nice curvature while ensuring it looks recognizable and attractive. This way, the tail will have an elegant, sweeping look overall!**Exploring star animation details**

I'm working on a star animation starting at coordinates (0,0) with a motion path described by "M170 50 L490 220." I need to check if the header passes behind the sky, which seems fine. The shooting star will have a downward angle, and its tail will go in the opposite direction towards the top left. I'm considering gradient strokes for the effect and an opacity animation using `<animate attributeName="opacity"...>`. Finally, I'll synchronize the animations to repeat every 4 seconds and add details for the hill foliage.