GPT-6 Luna Pro

by OpenAIreasoning defaultClean

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

How it went

Total time: 1 min 26 s
Cost: $0.0076
Output tokens: 12,710
Spent thinking: 4,334 tokens
Speed: 1130.1 tok/s
Console errors: 0

First token after: 1 min 15 s
First visible text after: 1 min 26 s
Prompt tokens: 14,208
Code size: 9.5 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna-pro
Reasoning sent: model default
Max output: 128,000 tokens
Generated: Nov 13, 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 · 196 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 toward a glowing moon among stars and distant pine trees.</desc>

  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#101b3b"/>
      <stop offset=".58" stop-color="#243b61"/>
      <stop offset="1" stop-color="#556278"/>
    </linearGradient>
    <linearGradient id="farHill" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#344662"/>
      <stop offset="1" stop-color="#22334d"/>
    </linearGradient>
    <linearGradient id="ground" x1=".2" y1="0" x2=".8" y2="1">
      <stop stop-color="#304b4d"/>
      <stop offset=".48" stop-color="#1e3c40"/>
      <stop offset="1" stop-color="#142c35"/>
    </linearGradient>
    <linearGradient id="orange" x1=".1" y1="0" x2=".9" y2="1">
      <stop stop-color="#ffb45f"/>
      <stop offset=".48" stop-color="#ee7838"/>
      <stop offset="1" stop-color="#bd4e32"/>
    </linearGradient>
    <linearGradient id="tailOrange" x1="0" y1="0" x2="1" y2=".4">
      <stop stop-color="#a94732"/>
      <stop offset=".55" stop-color="#ee7840"/>
      <stop offset="1" stop-color="#ffad58"/>
    </linearGradient>
    <radialGradient id="moonFill" cx=".35" cy=".28" r=".8">
      <stop stop-color="#fffbe5"/>
      <stop offset=".65" stop-color="#f4eac2"/>
      <stop offset="1" stop-color="#d8d7bd"/>
    </radialGradient>
    <radialGradient id="moonGlow">
      <stop stop-color="#fff4c7" stop-opacity=".34"/>
      <stop offset=".55" stop-color="#e6e8d3" stop-opacity=".12"/>
      <stop offset="1" stop-color="#dfe8e7" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="streak" x1="0" y1="0" x2="1" y2="0">
      <stop stop-color="#fff1c5" stop-opacity="0"/>
      <stop offset=".72" stop-color="#fff1c5" stop-opacity=".5"/>
      <stop offset="1" stop-color="#fff9df"/>
    </linearGradient>
    <filter id="softGlow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="17"/>
    </filter>
    <style>
      .twinkle { animation: twinkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
      .twinkle.a { animation-delay: -.7s; }
      .twinkle.b { animation-delay: -1.6s; }
      .twinkle.c { animation-delay: -2.2s; }
      @keyframes twinkle { 0%,100% { opacity:.35; transform:scale(.8); } 50% { opacity:1; transform:scale(1.25); } }
      .tail { transform-box: view-box; transform-origin: 354px 426px; animation: tailSway 3.4s ease-in-out infinite; }
      @keyframes tailSway { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); } }
      .shoot { animation: shoot 4s linear infinite; }
      @keyframes shoot {
        0% { transform:translate(-105px,-45px); opacity:0; }
        5% { opacity:0; }
        9% { opacity:1; }
        31% { opacity:1; }
        36% { opacity:0; }
        100% { transform:translate(800px,300px); opacity:0; }
      }
    </style>
  </defs>

  <!-- Night sky -->
  <rect width="800" height="600" fill="url(#sky)"/>
  <path d="M0 280 Q116 235 228 278 T455 267 T800 245 V430 H0Z" fill="#2c4260" opacity=".25"/>

  <!-- Moon glow and moon -->
  <circle cx="616" cy="148" r="105" fill="url(#moonGlow)"/>
  <circle cx="616" cy="148" r="47" fill="#fff4c9" opacity=".28" filter="url(#softGlow)"/>
  <circle cx="616" cy="148" r="36" fill="url(#moonFill)"/>
  <g fill="#d6d8c4" opacity=".42">
    <circle cx="603" cy="135" r="4"/>
    <circle cx="629" cy="158" r="6"/>
    <circle cx="611" cy="166" r="2.7"/>
    <circle cx="632" cy="133" r="2.2"/>
  </g>

  <!-- Stars -->
  <g fill="#f6edcf">
    <circle class="twinkle a" cx="72" cy="89" r="2.1"/>
    <circle class="twinkle b" cx="132" cy="156" r="1.6"/>
    <circle class="twinkle c" cx="183" cy="71" r="2"/>
    <circle class="twinkle" cx="246" cy="123" r="1.7"/>
    <circle class="twinkle a" cx="300" cy="58" r="1.8"/>
    <circle class="twinkle b" cx="354" cy="167" r="2.2"/>
    <circle class="twinkle c" cx="397" cy="91" r="1.4"/>
    <circle class="twinkle a" cx="454" cy="57" r="2"/>
    <circle class="twinkle b" cx="492" cy="177" r="1.6"/>
    <circle class="twinkle c" cx="543" cy="82" r="1.8"/>
    <circle class="twinkle" cx="701" cy="77" r="2.2"/>
    <circle class="twinkle a" cx="755" cy="151" r="1.6"/>
    <circle class="twinkle b" cx="75" cy="217" r="1.5"/>
    <circle class="twinkle c" cx="211" cy="208" r="1.8"/>
    <circle class="twinkle a" cx="284" cy="204" r="1.4"/>
    <circle class="twinkle b" cx="740" cy="232" r="1.7"/>
    <circle class="twinkle c" cx="526" cy="230" r="1.4"/>
    <circle class="twinkle a" cx="118" cy="45" r="1.1"/>
    <circle class="twinkle b" cx="329" cy="224" r="1.2"/>
    <circle class="twinkle c" cx="681" cy="199" r="1.2"/>
    <circle class="twinkle" cx="21" cy="148" r="1.3"/>
    <circle class="twinkle a" cx="779" cy="46" r="1.3"/>
    <circle class="twinkle b" cx="435" cy="207" r="1.1"/>
    <circle class="twinkle c" cx="161" cy="249" r="1.2"/>
  </g>
  <g fill="#f6edcf" opacity=".8">
    <path d="M105 119v8m-4-4h8" stroke="#f6edcf" stroke-width="1.1"/>
    <path d="M279 82v7m-3.5-3.5h7" stroke="#f6edcf" stroke-width="1"/>
    <path d="M720 111v8m-4-4h8" stroke="#f6edcf" stroke-width="1"/>
    <path d="M381 46v6m-3-3h6" stroke="#f6edcf" stroke-width="1"/>
  </g>

  <!-- Shooting star: one pass, then a quiet interval -->
  <g class="shoot">
    <path d="M0 0 L-86 -34" fill="none" stroke="url(#streak)" stroke-width="2.4" stroke-linecap="round"/>
    <circle cx="0" cy="0" r="2.4" fill="#fff7dc"/>
  </g>

  <!-- Distant layered hills -->
  <path d="M0 365 Q105 310 208 351 Q292 382 395 330 Q505 278 600 339 Q702 398 800 328 V475 H0Z" fill="url(#farHill)"/>
  <path d="M0 398 Q123 344 245 389 Q357 426 480 362 Q604 302 800 380 V486 H0Z" fill="#293b51" opacity=".84"/>

  <!-- Distant pines -->
  <g fill="#182d3b" opacity=".82">
    <path d="M43 399l20-53 20 53h-12l20 39H35l20-39z"/>
    <path d="M94 402l17-45 17 45h-10l17 33H87l17-33z"/>
    <path d="M686 385l21-57 21 57h-13l22 42h-61l22-42z"/>
    <path d="M745 391l17-46 17 46h-10l18 35h-50l18-35z"/>
    <path d="M647 395l14-38 14 38h-8l15 30h-42l15-30z"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0 472 Q106 442 207 458 Q308 475 394 439 Q512 389 603 415 Q705 443 800 397 V600 H0Z" fill="url(#ground)"/>
  <path d="M0 493 Q142 455 255 481 Q382 510 493 452 Q634 399 800 428" fill="none" stroke="#53705f" stroke-width="2" opacity=".36"/>
  <ellipse cx="396" cy="472" rx="116" ry="12" fill="#10282f" opacity=".35"/>

  <!-- Small grasses and stones -->
  <g fill="none" stroke="#769078" stroke-width="2" stroke-linecap="round" opacity=".58">
    <path d="M151 484q-5-13-1-22m1 22q6-12 11-15m-11 15q-9-8-14-9"/>
    <path d="M574 453q-4-13 0-20m0 20q6-10 12-13m-12 13q-8-7-13-8"/>
    <path d="M708 462q-3-10 1-17m-1 17q6-8 11-10"/>
    <path d="M247 510q-3-11 1-16m-1 16q6-8 10-9"/>
  </g>
  <g fill="#718078" opacity=".35">
    <ellipse cx="217" cy="481" rx="8" ry="3"/>
    <ellipse cx="557" cy="447" rx="7" ry="2.5"/>
    <ellipse cx="661" cy="464" rx="10" ry="3"/>
  </g>

  <!-- Fox tail, gently swaying -->
  <g class="tail">
    <path d="M364 434 C337 416 321 381 292 375 C264 369 246 391 252 417 C259 448 295 463 329 454 C346 450 358 444 370 444Z" fill="url(#tailOrange)"/>
    <path d="M263 406 C266 386 282 378 297 381 C283 395 284 414 292 431 C298 445 310 452 324 456 C292 461 268 443 263 424Z" fill="#fff0d8"/>
    <path d="M269 403 Q281 394 293 397" fill="none" stroke="#f8d8b5" stroke-width="2" opacity=".6"/>
  </g>

  <!-- Fox body -->
  <path d="M337 442 C328 422 333 391 349 375 C367 357 397 354 418 369 C438 383 444 413 433 442 L422 463 H348Z" fill="url(#orange)"/>
  <path d="M396 372 C414 378 427 395 428 416 C428 434 419 449 411 457 L382 456 C396 438 400 421 395 402 C391 389 385 379 377 373Z" fill="#ffe2bc"/>
  <path d="M346 443 Q356 435 370 439 L377 462 H340Z" fill="#b94e34"/>
  <path d="M402 448 Q415 438 428 444 L430 463 H395Z" fill="#b94e34"/>
  <path d="M341 461 Q358 455 378 462 L379 469 H339Z" fill="#f7c995"/>
  <path d="M394 462 Q413 454 431 460 L433 469 H393Z" fill="#f7c995"/>

  <!-- Fox ears behind the head -->
  <path d="M374 316 L369 259 Q370 250 378 258 L407 294Z" fill="#d96039"/>
  <path d="M377 286 L376 265 L390 291Z" fill="#653849"/>
  <path d="M408 299 L427 248 Q431 240 436 250 L442 307Z" fill="#e36b3c"/>
  <path d="M427 281 L433 258 L436 294Z" fill="#653849"/>

  <!-- Fox head, turned toward the moon -->
  <path d="M370 319 C371 292 393 277 418 281 C440 284 453 302 451 321
           C449 341 433 356 411 358 L388 349 C376 342 370 332 370 319Z" fill="url(#orange)"/>
  <!-- pale cheek and muzzle -->
  <path d="M407 331 C421 325 437 326 450 330 L467 338 L450 346
           C437 353 418 351 405 344Z" fill="#fff0d8"/>
  <path d="M417 340 Q435 342 453 338 Q441 351 421 349Z" fill="#f6d9b6"/>
  <path d="M461 334 Q468 334 471 339 Q468 344 461 342 L455 339Z" fill="#402b3a"/>
  <!-- eye and brow -->
  <path d="M426 312 Q435 306 443 311" fill="none" stroke="#a94a38" stroke-width="2" stroke-linecap="round"/>
  <ellipse cx="436" cy="317" rx="2.7" ry="3.4" fill="#251f30"/>
  <circle cx="437" cy="316" r=".8" fill="#fff3d9"/>
  <!-- cheek marking -->
  <path d="M405 326 Q413 330 419 330" fill="none" stroke="#f8c17e" stroke-width="2" stroke-linecap="round"/>

  <!-- A few foreground blades -->
  <g fill="none" stroke="#8ba082" stroke-width="1.5" stroke-linecap="round" opacity=".62">
    <path d="M317 477q-3-10 0-16m0 16q5-8 9-9"/>
    <path d="M473 471q-2-12 2-17m-2 17q6-8 10-9"/>
    <path d="M365 485q-2-8 1-13m-1 13q4-6 8-7"/>
  </g>
</svg>

Reasoning trace (4,334 tokens)

**Designing SVG Animations**

I need to output an SVG that's visually rich and incorporates seamless animations. The star should cross the sky every four seconds, with the animation starting within the first two seconds. I'll use animateMotion for the star’s path and animate opacity for visibility adjustments. The star's motion duration will be four seconds, with specific keyTimes set to control visibility and opacity. Making sure the transitions are smooth will be crucial!**Creating Motion Paths for Animation**

I’m planning to build a shooting group with motion paths using animateMotion for smooth transitions. I want the group to start at (0,0) and animate a transform with specific x and y translation values over four seconds. I'll implement opacity keyframes for transitions, ensuring visibility for about 1.08 seconds. To make it interesting, I'll consider diagonal paths using coordinate values and rotation as well. The landscape will be designed at 800x600, with a sitting fox facing right looking at the moon.**Designing Night Sky Animation**

I'm creating a night scene with a background gradient in navy and teal. The moon will be placed at coordinates (606, 148) in the upper-right corner. To add some sparkle, I'll animate numerous star circles that twinkle with varying opacity and durations to give a dynamic feel. The hill will slope from y=445 on the left to y=360 at x=800. It’s important that everything feels seamless and cohesive within this composition!**Creating an SVG composition**

I'm thinking about crafting an SVG design featuring a fox face silhouette with a pointed muzzle and distinct eyes. I'll focus on using composition shadows and SVG gradients, including handmade shapes with glow effects. The moon will have a radial gradient and halo, while I might use a blur filter. For a bit of whimsy, I'll add twinkling stars animated with CSS, along with a shooting streak, grasses, flowers, and rocks to enhance the foreground. I need to ensure that all elements are valid SVG.