GPT-6.1 Terra

by OpenAIReasoningClean

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

How it went

Total time: 1 min 10 s
Cost: $0.027
Output tokens: 5,370
Spent thinking: 977 tokens
Speed: 83 tok/s
Console errors: 0

First token after: 5.5 s
First visible text after: 21.3 s
Prompt tokens: 522
Code size: 10.8 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: model default
Max output: 128,000 tokens
Generated: Nov 12, 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 · 184 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-labelledby="title desc">
  <title id="title">A quiet night under the moon</title>
  <desc id="desc">A fox sits on a grassy hill, watching the moon in a starry sky. Stars twinkle, its tail sways, and a shooting star crosses overhead.</desc>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#101b39"/>
      <stop offset=".55" stop-color="#263c59"/>
      <stop offset="1" stop-color="#66807d"/>
    </linearGradient>
    <radialGradient id="moonGlow">
      <stop offset="0" stop-color="#fff4cb" stop-opacity=".35"/>
      <stop offset=".42" stop-color="#fce9bc" stop-opacity=".14"/>
      <stop offset="1" stop-color="#fce9bc" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="moon" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#fff8dc"/>
      <stop offset="1" stop-color="#e5d4aa"/>
    </linearGradient>
    <linearGradient id="hill" x1="0" y1="0" x2=".8" y2="1">
      <stop stop-color="#314e4b"/>
      <stop offset="1" stop-color="#172f35"/>
    </linearGradient>
    <linearGradient id="fox" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#e8924e"/>
      <stop offset="1" stop-color="#b85636"/>
    </linearGradient>
    <linearGradient id="shootingTrail" x1="0" y1="0" x2="1" y2="0">
      <stop stop-color="#fff7dc" stop-opacity="0"/>
      <stop offset="1" stop-color="#fff7dc" stop-opacity=".9"/>
    </linearGradient>
    <clipPath id="moonClip"><circle cx="627" cy="139" r="49"/></clipPath>
    <g id="pine">
      <path d="M0 0 L-17 25 H-10 L-25 46 H-15 L-32 68 H-4 V80 H4 V68 H32 L15 46 H25 L10 25 H17 Z"/>
    </g>
    <g id="spark">
      <path d="M0-5 C.5-1.4 1.4-.5 5 0 C1.4.5 .5 1.4 0 5 C-.5 1.4-1.4.5-5 0 C-1.4-.5-.5-1.4 0-5Z"/>
    </g>
  </defs>

  <path fill="url(#sky)" d="M0 0H800V600H0z"/>

  <!-- Moonlight and the moon -->
  <circle cx="627" cy="139" r="142" fill="url(#moonGlow)"/>
  <circle cx="627" cy="139" r="60" fill="none" stroke="#f8eac9" stroke-opacity=".12"/>
  <circle cx="627" cy="139" r="49" fill="url(#moon)"/>
  <g clip-path="url(#moonClip)" fill="#c7b994" opacity=".22">
    <circle cx="608" cy="118" r="9"/>
    <circle cx="646" cy="153" r="12"/>
    <circle cx="612" cy="156" r="5"/>
    <circle cx="642" cy="112" r="4"/>
    <circle cx="628" cy="133" r="6"/>
  </g>
  <path d="M602 103a49 49 0 0 1 64 18" fill="none" stroke="#fffbea" stroke-opacity=".7" stroke-width="2" stroke-linecap="round"/>

  <!-- Stars in gently alternating constellations -->
  <g fill="#fff2d0">
    <g opacity=".8">
      <animate attributeName="opacity" values=".4;1;.4" dur="3.2s" repeatCount="indefinite"/>
      <circle cx="48" cy="63" r="1.5"/><circle cx="113" cy="116" r="1"/>
      <circle cx="177" cy="50" r="1.4"/><circle cx="248" cy="112" r="1.2"/>
      <circle cx="309" cy="43" r="1.1"/><circle cx="371" cy="91" r="1.5"/>
      <circle cx="436" cy="39" r="1.1"/><circle cx="501" cy="127" r="1.2"/>
      <circle cx="548" cy="55" r="1.2"/><circle cx="709" cy="55" r="1.4"/>
      <circle cx="767" cy="121" r="1.1"/><circle cx="726" cy="220" r="1"/>
      <circle cx="451" cy="220" r="1.3"/><circle cx="325" cy="180" r="1"/>
      <circle cx="198" cy="215" r="1.3"/><circle cx="80" cy="229" r="1.2"/>
      <circle cx="24" cy="162" r="1"/><circle cx="271" cy="260" r="1"/>
      <circle cx="551" cy="246" r="1"/><circle cx="776" cy="286" r="1.2"/>
    </g>
    <g opacity=".7">
      <animate attributeName="opacity" values="1;.35;1" dur="4s" repeatCount="indefinite"/>
      <circle cx="79" cy="35" r=".9"/><circle cx="145" cy="76" r="1.2"/>
      <circle cx="214" cy="147" r="1"/><circle cx="282" cy="72" r="1.4"/>
      <circle cx="349" cy="137" r="1"/><circle cx="405" cy="156" r="1.2"/>
      <circle cx="473" cy="77" r="1"/><circle cx="522" cy="180" r="1.1"/>
      <circle cx="693" cy="161" r="1"/><circle cx="748" cy="83" r="1"/>
      <circle cx="789" cy="200" r="1.2"/><circle cx="687" cy="278" r="1"/>
      <circle cx="598" cy="244" r=".9"/><circle cx="367" cy="244" r="1.2"/>
      <circle cx="128" cy="186" r="1.2"/><circle cx="43" cy="286" r="1"/>
      <circle cx="155" cy="274" r=".9"/><circle cx="292" cy="306" r="1"/>
    </g>
    <g fill="#fff3ce">
      <animate attributeName="opacity" values=".45;1;.45" dur="2.6s" repeatCount="indefinite"/>
      <use href="#spark" x="107" y="154" transform="translate(107 154) scale(.65) translate(-107 -154)"/>
      <use href="#spark" x="236" y="57"/>
      <use href="#spark" x="397" y="194" transform="translate(397 194) scale(.7) translate(-397 -194)"/>
      <use href="#spark" x="523" y="93" transform="translate(523 93) scale(.7) translate(-523 -93)"/>
      <use href="#spark" x="744" y="181"/>
      <use href="#spark" x="165" y="322" transform="translate(165 322) scale(.6) translate(-165 -322)"/>
    </g>
  </g>

  <!-- A shooting star makes a crossing every four seconds -->
  <g opacity="0">
    <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;.2;.23;.37;.4;1" dur="4s" repeatCount="indefinite"/>
    <animateTransform attributeName="transform" type="translate" values="0 0;0 0;-175 100;-175 100" keyTimes="0;.2;.4;1" dur="4s" repeatCount="indefinite"/>
    <g transform="translate(485 86) rotate(150)">
      <path d="M-55 -2 L0 -1 L0 1 L-55 2Z" fill="url(#shootingTrail)"/>
      <circle r="2.3" fill="#fff9df"/>
      <circle r="5" fill="#fff9df" opacity=".15"/>
    </g>
  </g>

  <!-- Distant hills and a quiet forest -->
  <path d="M0 364 Q72 310 149 356 T304 347 Q376 303 462 354 Q550 293 640 342 Q725 299 800 345 V600 H0Z" fill="#516b70" opacity=".42"/>
  <path d="M0 406 Q84 355 160 392 Q240 336 328 389 Q403 345 490 386 Q568 333 664 378 Q737 348 800 380 V600 H0Z" fill="#344f59" opacity=".8"/>
  <g fill="#263f49" opacity=".75">
    <use href="#pine" transform="translate(25 343) scale(.7)"/>
    <use href="#pine" transform="translate(65 326) scale(.9)"/>
    <use href="#pine" transform="translate(103 354) scale(.65)"/>
    <use href="#pine" transform="translate(146 344) scale(.8)"/>
    <use href="#pine" transform="translate(205 360) scale(.58)"/>
    <use href="#pine" transform="translate(575 358) scale(.65)"/>
    <use href="#pine" transform="translate(621 337) scale(.9)"/>
    <use href="#pine" transform="translate(669 350) scale(.75)"/>
    <use href="#pine" transform="translate(716 320) scale(1.05)"/>
    <use href="#pine" transform="translate(765 342) scale(.82)"/>
  </g>
  <path d="M0 461 Q103 410 202 443 Q302 405 404 449 Q530 406 629 443 Q726 413 800 445 V600 H0Z" fill="#2b484c"/>
  <g fill="#203b40">
    <use href="#pine" transform="translate(8 365) scale(1.15)"/>
    <use href="#pine" transform="translate(54 386) scale(.9)"/>
    <use href="#pine" transform="translate(97 367) scale(1.1)"/>
    <use href="#pine" transform="translate(151 395) scale(.75)"/>
    <use href="#pine" transform="translate(697 390) scale(.85)"/>
    <use href="#pine" transform="translate(748 363) scale(1.15)"/>
    <use href="#pine" transform="translate(795 382) scale(.95)"/>
  </g>

  <!-- The hill -->
  <path d="M0 549 Q139 474 257 483 Q333 485 398 510 Q508 475 614 491 Q717 500 800 462 V600 H0Z" fill="url(#hill)"/>
  <path d="M0 549 Q139 474 257 483 Q333 485 398 510 Q508 475 614 491 Q717 500 800 462" fill="none" stroke="#88a08a" stroke-opacity=".35" stroke-width="2"/>
  <path d="M0 582 Q165 526 279 551 T515 546 Q659 518 800 543 V600 H0Z" fill="#172e34" opacity=".38"/>

  <!-- Ground shadow -->
  <ellipse cx="383" cy="507" rx="100" ry="10" fill="#132b30" opacity=".35"/>

  <!-- Swaying bushy tail -->
  <g>
    <animateTransform attributeName="transform" type="rotate" values="-3 389 490;3 389 490;-3 389 490" dur="4.5s" repeatCount="indefinite"/>
    <path d="M397 484 C367 458 340 462 308 447 C278 433 260 413 249 386 C231 412 225 449 241 476 C261 510 314 519 363 510 C380 507 392 501 402 495Z" fill="#bd5c39"/>
    <path d="M249 386 C231 412 225 449 241 476 C247 486 256 494 267 500 C264 486 268 473 279 464 C267 449 255 425 249 386Z" fill="#f1e5cf"/>
    <path d="M260 483 C284 502 321 509 359 500" fill="none" stroke="#e6965c" stroke-opacity=".65" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- Fox body, ears, and face -->
  <path d="M365 496 C356 478 358 452 368 430 C376 411 392 399 409 402 C428 405 439 425 443 449 L449 493 C450 502 445 507 432 507 H385 C376 506 369 502 365 496Z" fill="url(#fox)"/>
  <path d="M379 495 C373 483 372 469 378 457 C383 447 393 443 402 447 C414 452 417 467 412 480 C408 490 399 497 389 499Z" fill="#c56940"/>
  <path d="M416 406 C425 410 433 421 438 435 C443 450 447 473 448 492 C449 501 445 505 438 505 H424 C430 494 428 481 425 468 C420 449 413 431 406 418Z" fill="#f2dfc6"/>
  <path d="M420 461 C422 475 426 491 424 501 C423 505 426 507 435 507 H448 C451 507 451 504 448 501 L441 498 L440 468" fill="#d87946"/>
  <path d="M425 505 Q434 502 442 505 M379 503 Q387 500 396 503" fill="none" stroke="#9e4f36" stroke-width="2" stroke-linecap="round"/>

  <!-- Ears behind the head -->
  <path d="M401 365 L399 321 Q399 317 403 320 L426 344 L437 347 L445 316 Q446 313 449 317 L456 351 L458 369Z" fill="#a64e35"/>
  <path d="M405 326 L407 351 L420 346Z M445 326 L439 346 L451 349Z" fill="#e8ad87"/>
  <!-- Head and upward-pointing muzzle -->
  <path d="M400 357 Q407 345 423 344 Q443 341 453 351 Q462 359 481 359 Q488 359 489 365 Q488 373 478 379 L457 391 Q445 401 430 397 Q411 395 400 383 Q392 373 400 357Z" fill="#e58b4c"/>
  <path d="M400 376 Q410 382 421 379 Q427 389 442 385 Q452 383 460 375 Q473 376 487 367 Q485 375 477 380 L457 391 Q445 400 430 397 Q411 395 400 383Z" fill="#f5e6d0"/>
  <path d="M482 359 Q487 358 489 362 Q489 366 484 367 Q480 365 482 359Z" fill="#26383a"/>
  <ellipse cx="451" cy="358" rx="2.5" ry="3.1" fill="#23353a"/>
  <circle cx="451.6" cy="357.2" r=".7" fill="#fff8e4"/>
  <path d="M441 353 Q447 350 453 352" fill="none" stroke="#a95739" stroke-width="1.5" stroke-linecap="round"/>
  <path d="M468 380 Q471 381 474 379" fill="none" stroke="#ad7964" stroke-width="1.2" stroke-linecap="round"/>

  <!-- Little grasses and flowers -->
  <g fill="none" stroke="#8ba58c" stroke-width="1.5" stroke-linecap="round" opacity=".7">
    <path d="M89 525q-4-9-9-11 M89 525q1-10 5-15 M89 525q5-7 9-8"/>
    <path d="M183 505q-2-8-7-11 M183 505q1-10 5-13 M183 505q4-6 8-7"/>
    <path d="M542 499q-2-8-6-11 M542 499q2-9 5-13 M542 499q4-6 8-7"/>
    <path d="M672 507q-3-9-8-12 M672 507q1-9 4-13 M672 507q4-7 9-8"/>
    <path d="M735 492q-2-8-6-11 M735 492q2-9 5-12"/>
    <path d="M301 532q-2-7-6-9 M301 532q2-8 5-11"/>
  </g>
  <g fill="#e7d7ad" opacity=".75">
    <circle cx="79" cy="513" r="2"/><circle cx="188" cy="491" r="2"/>
    <circle cx="550" cy="491" r="2"/><circle cx="676" cy="493" r="2"/>
    <circle cx="305" cy="520" r="1.8"/>
  </g>
  <g fill="#dfd5a9" opacity=".35">
    <circle cx="128" cy="543" r="1.5"/><circle cx="221" cy="527" r="1"/>
    <circle cx="494" cy="525" r="1.3"/><circle cx="592" cy="518" r="1"/>
    <circle cx="714" cy="526" r="1.4"/><circle cx="337" cy="555" r="1"/>
  </g>
</svg>

Reasoning trace (977 tokens)

**Designing an SVG Illustration**

I need to create a polished SVG illustration, sized at 800x600. It will feature a fox on a hill, facing the moon in the upper right. The composition includes tree silhouettes, and the fox will have its body positioned at coordinates 350-? The tail will have a dynamic animation, swaying with specific path coordinates. The details will cover the fox's body structure, colors, and moon alignment, ensuring a cohesive and visually pleasing design.**Creating the Fox Illustration Details**

I'm detailing the fox's ears and snout, ensuring they’re accurately positioned. The ears will be defined by specific coordinates, and I need to ensure the face has a readable aesthetic. Adding a caption like "UNDER THE SAME SKY" or a more minimalistic "THE QUIET OF NIGHT" in the top left could enhance the elegance. I'll also work on a starry sky gradient with a shooting star animation, making sure the movement and opacity are well-defined for a dreamy effect.**Animating the Shooting Star**

I’m considering creating an animation for the shooting star that starts at 0 seconds and lasts for a 4-second loop, with an initial crossing at 1 second. For the animateMotion path, I’ll set the opacity values at different time intervals like 0, .15, .2, .35, .4, and 1. The star will move down and to the left, incorporating a gradient trail and starting from coordinates 580, 90. I’ll refine the animateTransform values to ensure smooth movement and consistent transitions.**Implementing facial features**

Alright, I'm working on creating a design for an image. I need to add eye black positioned at coordinates (450, 357) and position the nose at (486, 366). The face shape should be white, and the ears are set to be separate behind the head. It seems like I've covered the basics here, and it looks good to me! Now it's time to implement these features into the design.