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 36 s
Cost: $0.039
Output tokens: 7,656
Spent thinking: 2,388 tokens
Speed: 83.9 tok/s
Console errors: 0

First token after: 4.9 s
First visible text after: 41.2 s
Prompt tokens: 522
Code size: 12.7 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: {"effort":"high"}
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 · 216 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 fox beneath the moon</title>
  <desc id="desc">A fox sits on a grassy hill beneath a glowing moon and a sky of twinkling stars. A shooting star passes overhead.</desc>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#10172f"/>
      <stop offset=".54" stop-color="#233c55"/>
      <stop offset="1" stop-color="#536d69"/>
    </linearGradient>
    <radialGradient id="moonGlow">
      <stop offset="0" stop-color="#ffeac0" stop-opacity=".42"/>
      <stop offset=".4" stop-color="#f8dfad" stop-opacity=".15"/>
      <stop offset="1" stop-color="#f8dfad" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moon" cx=".35" cy=".3">
      <stop offset="0" stop-color="#fff5d8"/>
      <stop offset=".72" stop-color="#f8e7bd"/>
      <stop offset="1" stop-color="#e6cda0"/>
    </radialGradient>
    <linearGradient id="farHills" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#3d5d68"/>
      <stop offset="1" stop-color="#263f4c"/>
    </linearGradient>
    <linearGradient id="hill" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#344e4d"/>
      <stop offset="1" stop-color="#152d36"/>
    </linearGradient>
    <linearGradient id="fox" x1=".1" y1="0" x2=".8" y2="1">
      <stop stop-color="#e99458"/>
      <stop offset=".55" stop-color="#d36d3f"/>
      <stop offset="1" stop-color="#a94932"/>
    </linearGradient>
    <linearGradient id="tail" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#ed9b5d"/>
      <stop offset="1" stop-color="#b85438"/>
    </linearGradient>
    <linearGradient id="comet" x1="0" y1="0" x2="1" y2="0">
      <stop stop-color="#fff4d0" stop-opacity="0"/>
      <stop offset="1" stop-color="#fff4d0" stop-opacity=".95"/>
    </linearGradient>
    <g id="pine">
      <path d="M-4 143V114L-35 121L-20 94L-29 96L-15 69L-22 71L-10 44L-15 46L0 0L15 46L10 44L22 71L15 69L29 96L20 94L35 121L4 114V143Z"/>
    </g>
    <g id="smallStar">
      <path d="M0-5.5C.6-2.1 1.8-.6 5.5 0C1.8.6.6 2.1 0 5.5C-.6 2.1-1.8.6-5.5 0C-1.8-.6-.6-2.1 0-5.5Z"/>
    </g>
    <style>
      .twinkle { animation: twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
      .twinkle.b { animation-duration: 4.1s; animation-delay: -1.4s; }
      .twinkle.c { animation-duration: 2.6s; animation-delay: -2s; }
      @keyframes twinkle {
        0%, 100% { opacity: .3; }
        50% { opacity: 1; }
      }
    </style>
  </defs>

  <!-- The night sky -->
  <path fill="url(#sky)" d="M0 0H800V600H0Z"/>
  <circle cx="616" cy="135" r="140" fill="url(#moonGlow)"/>
  <circle cx="616" cy="135" r="51" fill="url(#moon)"/>
  <circle cx="616" cy="135" r="57" fill="none" stroke="#fce8c1" stroke-opacity=".13"/>
  <g fill="#d9c398" opacity=".24">
    <ellipse cx="595" cy="120" rx="9" ry="5"/>
    <ellipse cx="627" cy="105" rx="6" ry="3"/>
    <ellipse cx="639" cy="144" rx="10" ry="6"/>
    <ellipse cx="603" cy="155" rx="7" ry="4"/>
    <ellipse cx="622" cy="166" rx="4" ry="2"/>
  </g>
  <path d="M583 138c3 15 14 27 28 31M622 94c13 1 25 9 32 20" fill="none" stroke="#fff9df" stroke-opacity=".35" stroke-width="2" stroke-linecap="round"/>

  <!-- Stars, in several independently twinkling constellations -->
  <g fill="#fff0ce">
    <g class="twinkle">
      <circle cx="57" cy="64" r="1.5"/><circle cx="147" cy="110" r="1.4"/>
      <circle cx="224" cy="51" r="1.7"/><circle cx="302" cy="125" r="1.4"/>
      <circle cx="375" cy="68" r="1.5"/><circle cx="455" cy="141" r="1.3"/>
      <circle cx="515" cy="49" r="1.6"/><circle cx="712" cy="66" r="1.4"/>
      <circle cx="754" cy="174" r="1.6"/><circle cx="94" cy="232" r="1.4"/>
      <circle cx="252" cy="221" r="1.3"/><circle cx="350" cy="244" r="1.6"/>
      <circle cx="475" cy="245" r="1.2"/><circle cx="699" cy="250" r="1.4"/>
    </g>
    <g class="twinkle b">
      <circle cx="99" cy="128" r="1"/><circle cx="188" cy="76" r="1"/>
      <circle cx="267" cy="144" r="1.1"/><circle cx="340" cy="38" r="1"/>
      <circle cx="416" cy="104" r="1.2"/><circle cx="487" cy="80" r="1"/>
      <circle cx="555" cy="202" r="1"/><circle cx="684" cy="119" r="1.1"/>
      <circle cx="739" cy="224" r="1"/><circle cx="42" cy="177" r="1"/>
      <circle cx="177" cy="190" r="1.2"/><circle cx="307" cy="195" r="1"/>
      <circle cx="403" cy="205" r="1"/><circle cx="641" cy="242" r="1.1"/>
      <circle cx="783" cy="102" r="1"/>
    </g>
    <g class="twinkle c">
      <circle cx="128" cy="37" r=".9"/><circle cx="207" cy="153" r=".9"/>
      <circle cx="285" cy="83" r=".9"/><circle cx="361" cy="159" r="1"/>
      <circle cx="446" cy="39" r="1"/><circle cx="533" cy="118" r=".9"/>
      <circle cx="693" cy="39" r=".9"/><circle cx="764" cy="45" r=".9"/>
      <circle cx="61" cy="276" r=".9"/><circle cx="145" cy="262" r="1"/>
      <circle cx="223" cy="282" r=".9"/><circle cx="388" cy="286" r="1"/>
      <circle cx="508" cy="283" r="1"/><circle cx="748" cy="284" r="1"/>
    </g>
    <use href="#smallStar" x="127" y="165" class="twinkle b"/>
    <use href="#smallStar" x="328" y="92" class="twinkle c" transform="translate(328 92) scale(.75) translate(-328 -92)"/>
    <use href="#smallStar" x="475" y="185" class="twinkle"/>
    <use href="#smallStar" x="737" y="128" class="twinkle b" transform="translate(737 128) scale(.75) translate(-737 -128)"/>
    <use href="#smallStar" x="237" y="255" class="twinkle c" transform="translate(237 255) scale(.65) translate(-237 -255)"/>
  </g>

  <!-- A shooting star crosses once every four seconds -->
  <g>
    <animateTransform attributeName="transform" type="translate"
      values="0 0;300 105;300 105" keyTimes="0;.82;1" dur="4s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="0;1;1;0;0"
      keyTimes="0;.04;.70;.86;1" dur="4s" repeatCount="indefinite"/>
    <path d="M78 48L151 67L151 70Z" fill="url(#comet)"/>
    <circle cx="151" cy="68" r="2.2" fill="#fff7da"/>
    <path d="M151 63V73M146 68H156" stroke="#fff7da" stroke-width=".8" opacity=".7"/>
  </g>

  <!-- Distant ridges -->
  <path d="M0 340C64 304 110 301 163 319C205 334 231 326 276 298C317 272 351 281 397 309C443 337 474 334 520 305C569 274 611 286 661 315C708 342 753 318 800 296V470H0Z" fill="#52717a" opacity=".48"/>
  <path d="M0 362C53 340 92 339 147 354C195 366 232 351 273 331C317 309 347 320 388 339C437 362 482 355 529 333C582 307 623 317 669 342C718 366 759 347 800 335V479H0Z" fill="url(#farHills)"/>
  <path d="M0 382C93 353 141 387 214 372C284 356 307 342 374 364C441 386 496 367 552 351C631 328 689 386 800 359V475H0Z" fill="#263f4a" opacity=".75"/>

  <!-- Pine forest -->
  <g fill="#213e46" opacity=".75">
    <use href="#pine" transform="translate(25 281) scale(.68)"/>
    <use href="#pine" transform="translate(64 301) scale(.57)"/>
    <use href="#pine" transform="translate(111 294) scale(.7)"/>
    <use href="#pine" transform="translate(153 316) scale(.53)"/>
    <use href="#pine" transform="translate(195 329) scale(.49)"/>
    <use href="#pine" transform="translate(557 324) scale(.48)"/>
    <use href="#pine" transform="translate(594 308) scale(.62)"/>
    <use href="#pine" transform="translate(632 321) scale(.55)"/>
    <use href="#pine" transform="translate(681 295) scale(.72)"/>
    <use href="#pine" transform="translate(730 303) scale(.65)"/>
    <use href="#pine" transform="translate(779 279) scale(.8)"/>
  </g>
  <g fill="#19343b">
    <use href="#pine" transform="translate(8 300) scale(1.15)"/>
    <use href="#pine" transform="translate(67 329) scale(.9)"/>
    <use href="#pine" transform="translate(132 345) scale(.75)"/>
    <use href="#pine" transform="translate(665 346) scale(.77)"/>
    <use href="#pine" transform="translate(723 317) scale(1.03)"/>
    <use href="#pine" transform="translate(788 294) scale(1.23)"/>
  </g>

  <!-- The hill in the foreground -->
  <path d="M0 435C105 405 178 426 250 451C317 474 380 486 460 470C551 451 608 420 687 425C732 427 767 437 800 446V600H0Z" fill="url(#hill)"/>
  <path d="M0 464C97 438 168 446 230 465M516 477C589 456 646 442 707 447" fill="none" stroke="#8eaa8a" stroke-opacity=".17" stroke-width="2" stroke-linecap="round"/>
  <ellipse cx="366" cy="526" rx="150" ry="17" fill="#0f2830" opacity=".35"/>

  <!-- The fox's gently swaying tail -->
  <g>
    <animateTransform attributeName="transform" type="rotate"
      values="0 365 491;3 365 491;0 365 491;-3 365 491;0 365 491"
      dur="5s" repeatCount="indefinite"/>
    <path d="M371 485C350 471 333 476 310 472C277 466 256 449 250 423C239 439 238 457 246 475C228 466 220 451 220 433C203 449 207 477 226 496C251 522 301 532 348 518C365 513 374 503 371 485Z" fill="url(#tail)"/>
    <path d="M250 423C239 439 238 457 246 475C228 466 220 451 220 433C203 449 207 477 226 496C237 507 250 514 266 518C255 505 250 492 251 481C258 487 265 490 272 491C259 476 254 453 250 423Z" fill="#f5e8cf"/>
    <path d="M224 477C236 500 265 515 299 517" fill="none" stroke="#fff8e5" stroke-opacity=".42" stroke-width="2" stroke-linecap="round"/>
    <path d="M281 481C299 494 319 499 340 499" fill="none" stroke="#f7b77a" stroke-opacity=".36" stroke-width="2" stroke-linecap="round"/>
  </g>

  <!-- Body -->
  <path d="M350 518C331 506 327 479 339 451C347 430 366 419 389 420C408 420 420 433 423 454L428 505C430 517 415 523 395 523L358 523Z" fill="url(#fox)"/>
  <path d="M394 425C409 429 421 445 423 464L428 502C429 512 421 518 409 519C416 504 415 489 409 478C400 462 395 444 394 425Z" fill="#f3dfc3"/>
  <path d="M363 463C348 471 347 493 357 503C366 512 380 513 393 508" fill="none" stroke="#a94d35" stroke-opacity=".6" stroke-width="2.5" stroke-linecap="round"/>
  <path d="M400 489C401 502 402 511 398 517C394 522 383 523 379 519C376 516 379 511 385 510" fill="#c2633e"/>
  <path d="M404 513C410 509 419 509 424 513C427 516 425 521 418 522H404C399 522 399 516 404 513Z" fill="#f4e2ca"/>

  <!-- Head and pointed ears -->
  <path d="M382 407L374 345C373 339 375 337 379 342L397 363C401 361 405 361 409 362L413 333C414 328 417 328 420 333L433 365C437 369 441 372 447 374L467 379C474 381 477 384 472 389C468 393 462 396 454 400L443 406C436 410 429 411 423 410L417 428C412 435 401 438 391 433C382 428 379 420 382 407Z" fill="url(#fox)"/>
  <path d="M379 350L384 377L394 366Z" fill="#743f38"/>
  <path d="M416 340L414 364L427 367Z" fill="#743f38"/>
  <path d="M381 355L385 373L391 366Z" fill="#e7a38b" opacity=".7"/>
  <path d="M417 346L416 362L423 364Z" fill="#e7a38b" opacity=".7"/>
  <!-- Cream cheek and upturned muzzle -->
  <path d="M386 394C392 401 400 405 410 404C416 403 420 397 424 392C432 396 443 395 454 391L469 386C470 390 461 396 453 400L443 406C436 410 429 411 423 410L417 428C410 434 401 436 392 431C385 426 381 417 382 407Z" fill="#f6e8d1"/>
  <path d="M391 405C397 412 405 414 412 412" fill="none" stroke="#dfc6a9" stroke-width="1.4" stroke-linecap="round"/>
  <path d="M464 379C469 379 474 382 474 385C472 388 468 388 465 386C463 384 463 381 464 379Z" fill="#352e31"/>
  <path d="M432 379C434 377 437 377 439 379" fill="none" stroke="#633c35" stroke-width="1.3" stroke-linecap="round"/>
  <ellipse cx="435" cy="382" rx="2.1" ry="2.7" fill="#292d30"/>
  <circle cx="435.6" cy="381.2" r=".6" fill="#fff5de"/>
  <path d="M450 396C454 397 458 395 460 393" fill="none" stroke="#9c7665" stroke-width="1" stroke-linecap="round"/>

  <!-- Grasses, flowers, and small woodland details -->
  <g fill="none" stroke-linecap="round">
    <g stroke="#79947e" stroke-width="1.5" opacity=".7">
      <path d="M65 514q-4-13-12-17m12 17q1-14 8-22m-8 22q-10-5-16-4"/>
      <path d="M157 548q-3-11-10-15m10 15q2-14 8-19m-8 19q7-6 13-5"/>
      <path d="M512 521q-2-15-9-21m9 21q3-16 10-24m-10 24q9-7 15-7"/>
      <path d="M672 504q-3-15-10-20m10 20q3-14 11-21m-11 21q9-6 15-5"/>
      <path d="M743 553q-2-12-8-17m8 17q3-13 9-17"/>
      <path d="M277 563q-2-10-8-14m8 14q3-11 9-15"/>
    </g>
    <g stroke="#b5b69a" stroke-width="1" opacity=".45">
      <path d="M93 559h16m18-42h10m92 28h13m326 11h19m20-52h11m79 40h14"/>
      <path d="M32 535h8m318 33h17m124 8h11m239-91h10"/>
    </g>
  </g>
  <g fill="#e8c58f" opacity=".8">
    <circle cx="53" cy="497" r="1.7"/><circle cx="73" cy="492" r="1.6"/>
    <circle cx="503" cy="500" r="1.6"/><circle cx="522" cy="497" r="1.7"/>
    <circle cx="662" cy="484" r="1.6"/><circle cx="683" cy="483" r="1.7"/>
    <circle cx="165" cy="529" r="1.5"/><circle cx="286" cy="548" r="1.4"/>
  </g>
  <g fill="#f6d59d" opacity=".65">
    <circle class="twinkle b" cx="190" cy="454" r="1.8"/>
    <circle class="twinkle c" cx="535" cy="446" r="1.6"/>
    <circle class="twinkle" cx="582" cy="468" r="1.4"/>
  </g>

  <!-- A quiet frame around the scene -->
  <path d="M20 38V20H38M762 20H780V38M780 562V580H762M38 580H20V562" fill="none" stroke="#e8d9b5" stroke-opacity=".38" stroke-width="1"/>
  <path d="M47 20H753M780 47V553M753 580H47M20 553V47" fill="none" stroke="#e8d9b5" stroke-opacity=".12" stroke-width=".7"/>
</svg>

Reasoning trace (2,388 tokens)

**Designing SVG Animation**

I need to create a polished SVG illustration that's sophisticated, with dimensions of 800x600. The first shooting star should appear within 2 seconds, and then every 4 seconds in a seamless loop. I’m considering using SMIL for animateMotion, fading the shooter with opacity changes. The stars will twinkle through individual CSS animations. I want to depict a coherent, beautifully illustrated story with a scenic night featuring a sitting fox looking at the moon. I’ll ensure everything is properly positioned for a whimsical effect.**Creating Fox Illustration in SVG**

I need to draw a fox positioned at the center bottom, with its body extending from coordinates 345,430 to 424,527. The head will be at 412,394, and the snout tilts upward at 469,390. The ears have pointy tips, and I’ll color the head vermilion with a cream patch on the muzzle. The fox's gaze is directed towards the moon, which will have a soft gradient glow and subtle crater shapes. I plan to include a starry background with pine silhouettes and ensure everything is properly sized in the SVG viewport.**Creating SVG Artwork**

I’m thinking about rendering the SVG directly with a background that fills the screen without needing CSS. The full artwork will stretch from top to bottom, and I’d like to add a decorative frame with an inset border. As for the title, the user requested just the illustration, but including a small, unobtrusive label like “UNDER THE SAME SKY” in the upper left corner could enhance it. However, I’ll make sure to keep the text minimal to avoid distractions.