GPT-6 Luna

by OpenAIReasoningClean

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

How it went

Total time: 25.3 s
Cost: $0.0016
Output tokens: 3,140
Spent thinking: 0 tokens
Speed: 136.6 tok/s
Console errors: 0

First token after: 2.3 s
First visible text after: 2.3 s
Prompt tokens: 522
Code size: 7.2 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"none"}
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 · 145 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 the moon</title>
  <desc id="desc">A red fox sits on a grassy hill beneath a glowing moon and a starry night sky.</desc>

  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#101a3e"/>
      <stop offset="1" stop-color="#253660"/>
    </linearGradient>
    <linearGradient id="hill" x1="0" y1="0" x2="0.4" y2="1">
      <stop offset="0" stop-color="#35576a"/>
      <stop offset="1" stop-color="#172f43"/>
    </linearGradient>
    <linearGradient id="fur" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ffb15f"/>
      <stop offset="1" stop-color="#d95e3e"/>
    </linearGradient>
    <radialGradient id="moonGlow">
      <stop offset="0" stop-color="#fff3c3" stop-opacity=".32"/>
      <stop offset="1" stop-color="#fff3c3" stop-opacity="0"/>
    </radialGradient>
    <filter id="softGlow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="12"/>
    </filter>
  </defs>

  <!-- Night sky -->
  <rect width="800" height="600" fill="url(#sky)"/>
  <circle cx="625" cy="132" r="90" fill="url(#moonGlow)"/>
  <circle cx="625" cy="132" r="43" fill="#fff0b7"/>
  <circle cx="638" cy="121" r="39" fill="#192448" opacity=".18"/>
  <circle cx="625" cy="132" r="43" fill="none" stroke="#fff7d9" stroke-opacity=".55"/>

  <!-- Distant stars -->
  <g fill="#f8edc8">
    <circle cx="70" cy="87" r="1.7"/><circle cx="147" cy="140" r="1.5"/>
    <circle cx="225" cy="65" r="1.8"/><circle cx="300" cy="122" r="1.4"/>
    <circle cx="380" cy="76" r="1.7"/><circle cx="458" cy="154" r="1.5"/>
    <circle cx="522" cy="55" r="1.4"/><circle cx="710" cy="73" r="1.6"/>
    <circle cx="752" cy="185" r="1.4"/><circle cx="89" cy="208" r="1.3"/>
    <circle cx="260" cy="187" r="1.6"/><circle cx="367" cy="211" r="1.3"/>
    <circle cx="553" cy="220" r="1.4"/><circle cx="720" cy="250" r="1.6"/>
    <circle cx="174" cy="246" r="1.2"/><circle cx="431" cy="46" r="1.3"/>
    <circle cx="34" cy="160" r="1.5"/><circle cx="324" cy="35" r="1.3"/>
    <circle cx="678" cy="200" r="1.2"/><circle cx="500" cy="184" r="1.2"/>
  </g>
  <g fill="#fff7d9">
    <path d="M115 53l2.2 6.2 6.3 2.2-6.3 2.1-2.2 6.3-2.1-6.3-6.3-2.1 6.3-2.2z">
      <animate attributeName="opacity" values=".35;1;.35" dur="2.8s" repeatCount="indefinite"/>
    </path>
    <path d="M347 158l1.6 4.5 4.6 1.6-4.6 1.5-1.6 4.6-1.5-4.6-4.6-1.5 4.6-1.6z">
      <animate attributeName="opacity" values="1;.25;1" dur="3.4s" repeatCount="indefinite"/>
    </path>
    <path d="M744 117l1.8 5.1 5.1 1.8-5.1 1.7-1.8 5.2-1.7-5.2-5.2-1.7 5.2-1.8z">
      <animate attributeName="opacity" values=".3;1;.3" dur="2.3s" repeatCount="indefinite"/>
    </path>
    <path d="M194 96l1.4 3.8 3.9 1.4-3.9 1.3-1.4 4-1.3-4-3.9-1.3 3.9-1.4z">
      <animate attributeName="opacity" values=".25;1;.25" dur="3s" repeatCount="indefinite"/>
    </path>
  </g>
  <g fill="#dbe4f5">
    <circle cx="205" cy="151" r="1"/><circle cx="408" cy="119" r="1"/>
    <circle cx="479" cy="91" r="1"/><circle cx="61" cy="127" r="1"/>
    <circle cx="574" cy="78" r="1"/><circle cx="286" cy="220" r="1"/>
    <circle cx="766" cy="47" r="1"/><circle cx="133" cy="183" r="1"/>
    <circle cx="392" cy="181" r="1"/>
  </g>

  <!-- Shooting star: one pass every four seconds, first pass starts immediately -->
  <g opacity="0">
    <path d="M0 0L-74 30" stroke="#fff4d0" stroke-width="2" stroke-linecap="round"
          opacity=".8"/>
    <circle r="2.3" fill="#fffbe8"/>
    <animateMotion path="M570 67 L260 198" dur="1.15s" begin="0s;4s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.08;.78;1"
             dur="1.15s" begin="0s;4s" repeatCount="indefinite"/>
  </g>

  <!-- Distant layered hills -->
  <path d="M0 345Q105 269 213 334T425 326Q520 269 615 327T800 302V600H0Z"
        fill="#283b5a"/>
  <path d="M0 383Q128 309 251 365T479 348Q612 292 800 359V600H0Z"
        fill="#304963"/>
  <!-- Distant pines -->
  <g fill="#1b3045" opacity=".95">
    <path d="M69 335l20-56 20 56h-12l18 32H63l18-32z"/>
    <path d="M129 346l15-43 16 43h-9l14 26h-41l14-26z"/>
    <path d="M693 343l21-61 22 61h-12l18 33h-55l18-33z"/>
    <path d="M748 353l15-45 16 45h-9l14 27h-42l14-27z"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0 443Q141 392 265 428Q370 458 466 424Q599 377 800 433V600H0Z"
        fill="url(#hill)"/>
  <path d="M0 476Q181 421 316 458T582 447Q697 420 800 451" fill="none"
        stroke="#52727a" stroke-opacity=".45" stroke-width="2"/>
  <g fill="#8ba58d" opacity=".62">
    <path d="M40 480q-7-17-2-24 9 11 8 23z"/><path d="M58 474q2-19 11-25 2 16-6 28z"/>
    <path d="M723 461q-2-16 5-22 6 13 1 24z"/><path d="M746 462q8-18 18-19-5 16-15 24z"/>
    <path d="M178 460q-1-12 5-16 4 10 0 18z"/><path d="M640 461q2-14 9-18 3 12-4 20z"/>
  </g>

  <!-- Fox tail, animated gently around its base -->
  <g>
    <animateTransform attributeName="transform" type="rotate"
      values="-3 398 481;3 398 481;-3 398 481" dur="3.6s" repeatCount="indefinite"/>
    <path d="M400 475Q354 433 303 449Q269 460 278 492Q285 518 328 512Q366 507 402 490Z"
          fill="url(#fur)" stroke="#b84e3b" stroke-width="2"/>
    <path d="M286 469Q273 487 289 505Q302 513 319 507Q301 493 312 456Q297 457 286 469Z"
          fill="#fff0d9"/>
    <path d="M302 466Q294 480 302 493" fill="none" stroke="#ffd1a1" stroke-width="3"
          stroke-linecap="round" opacity=".8"/>
  </g>

  <!-- Seated fox body -->
  <path d="M391 491Q378 458 394 431Q410 407 443 414Q474 420 481 457L470 499Z"
        fill="url(#fur)" stroke="#b84e3b" stroke-width="2"/>
  <path d="M407 481Q416 454 443 448Q463 454 466 490L450 500Z" fill="#f8dfbf"/>
  <path d="M397 493Q423 482 465 492L468 507H393Z" fill="#e66b43"/>
  <path d="M400 501Q410 495 423 500L421 510H397Z" fill="#f6dfc4"/>
  <path d="M442 500Q455 494 468 499L470 510H442Z" fill="#f6dfc4"/>

  <!-- Fox head and ears -->
  <path d="M392 430L383 372Q382 359 394 365L421 389Q440 378 458 390L482 366Q492 358 493 373L490 431Q479 454 444 457Q412 454 392 430Z"
        fill="url(#fur)" stroke="#b84e3b" stroke-width="2"/>
  <path d="M390 379L393 369L414 393L404 404Z" fill="#f7dfc1"/>
  <path d="M470 394L490 371L488 403L480 408Z" fill="#f7dfc1"/>
  <!-- Cheeks and snout -->
  <path d="M396 414Q410 411 425 423Q436 430 443 425Q457 411 480 414Q475 438 444 444Q413 442 396 414Z"
        fill="#fff0d9"/>
  <path d="M427 419Q440 425 454 418Q454 432 442 436Q431 433 427 419Z" fill="#fff8e8"/>
  <path d="M435 422Q441 418 447 422Q444 427 440 427Q436 426 435 422Z" fill="#35283a"/>
  <path d="M416 409q5-4 10 0" fill="none" stroke="#3b2c3c" stroke-width="2.4" stroke-linecap="round"/>
  <path d="M462 408q5-4 10 0" fill="none" stroke="#3b2c3c" stroke-width="2.4" stroke-linecap="round"/>
  <circle cx="414" cy="405" r="2.2" fill="#fff4d9"/>
  <circle cx="460" cy="404" r="2.2" fill="#fff4d9"/>
  <path d="M441 428q-2 5-7 6" fill="none" stroke="#7e4140" stroke-width="1.5" stroke-linecap="round"/>

  <!-- Subtle foreground stars/grass lights -->
  <g fill="#d6d8b3" opacity=".75">
    <circle cx="115" cy="521" r="1.2"/><circle cx="202" cy="548" r="1"/>
    <circle cx="555" cy="518" r="1.2"/><circle cx="675" cy="539" r="1"/>
    <circle cx="751" cy="493" r="1.2"/>
  </g>
</svg>