GPT-6.1 Terra

by OpenAIReasoningClean

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

How it went

Total time: 57.8 s
Cost: $0.024
Output tokens: 4,729
Spent thinking: 0 tokens
Speed: 83.4 tok/s
Console errors: 0

First token after: 1.0 s
First visible text after: 1.0 s
Prompt tokens: 522
Code size: 11.5 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: {"effort":"none"}
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 · 211 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 little fox under the moon</title>
  <desc id="desc">A fox sits on a grassy hill beneath a glowing moon and a sky of twinkling stars. Its tail sways as a shooting star passes overhead.</desc>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#10172e"/>
      <stop offset=".58" stop-color="#253453"/>
      <stop offset="1" stop-color="#536069"/>
    </linearGradient>
    <linearGradient id="ground" x1="0" y1="0" x2=".25" y2="1">
      <stop offset="0" stop-color="#344c48"/>
      <stop offset="1" stop-color="#142b30"/>
    </linearGradient>
    <linearGradient id="fox" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#e69a55"/>
      <stop offset=".58" stop-color="#c66c39"/>
      <stop offset="1" stop-color="#8e482f"/>
    </linearGradient>
    <linearGradient id="tail" x1="0" y1="0" x2="1" y2=".6">
      <stop offset="0" stop-color="#e3a05e"/>
      <stop offset=".65" stop-color="#c66c3c"/>
      <stop offset="1" stop-color="#9c4e31"/>
    </linearGradient>
    <radialGradient id="moonGlow">
      <stop offset="0" stop-color="#f9e9b7" stop-opacity=".36"/>
      <stop offset=".42" stop-color="#f5dba0" stop-opacity=".14"/>
      <stop offset="1" stop-color="#f5dba0" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="meteor" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#fff3cb" stop-opacity="0"/>
      <stop offset=".7" stop-color="#fff3cb" stop-opacity=".4"/>
      <stop offset="1" stop-color="#fff8dc"/>
    </linearGradient>
    <style>
      .star { fill:#f7e9c7; animation:twinkle 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
      .s2 { animation-delay:-1.2s; animation-duration:4.2s; }
      .s3 { animation-delay:-2.3s; animation-duration:3s; }
      .s4 { animation-delay:-.7s; animation-duration:5s; }
      @keyframes twinkle {
        0%,100% { opacity:.35; transform:scale(.75); }
        50% { opacity:1; transform:scale(1.18); }
      }
      .tail-sway { transform-box:view-box; transform-origin:355px 453px; animation:sway 4.8s ease-in-out infinite; }
      @keyframes sway {
        0%,100% { transform:rotate(-2deg); }
        50% { transform:rotate(4deg); }
      }
      .shooting { animation:shoot 4s linear infinite; }
      @keyframes shoot {
        0%, 20% { opacity:0; transform:translate(0,0); }
        23% { opacity:1; }
        38% { opacity:1; }
        42%,100% { opacity:0; transform:translate(235px,105px); }
      }
      @media (prefers-reduced-motion:reduce) {
        .star,.tail-sway,.shooting { animation:none; }
        .shooting { opacity:0; }
      }
    </style>
  </defs>

  <!-- Night sky and moonlight -->
  <rect width="800" height="600" fill="url(#sky)"/>
  <circle cx="595" cy="145" r="158" fill="url(#moonGlow)"/>
  <circle cx="595" cy="145" r="51" fill="#f4e5bb"/>
  <circle cx="595" cy="145" r="47" fill="#f8edce"/>
  <g fill="#d9cda9" opacity=".35">
    <circle cx="578" cy="128" r="7"/>
    <circle cx="610" cy="126" r="4"/>
    <circle cx="610" cy="157" r="9"/>
    <circle cx="582" cy="163" r="4"/>
    <circle cx="594" cy="141" r="3"/>
  </g>

  <!-- Stars -->
  <g>
    <circle class="star" cx="43" cy="49" r="1.7"/>
    <circle class="star s2" cx="93" cy="93" r="1.5"/>
    <circle class="star s3" cx="137" cy="38" r="2"/>
    <circle class="star s4" cx="190" cy="80" r="1.2"/>
    <circle class="star" cx="230" cy="45" r="1.5"/>
    <circle class="star s2" cx="279" cy="117" r="1.8"/>
    <circle class="star s3" cx="324" cy="55" r="1.3"/>
    <circle class="star s4" cx="366" cy="95" r="1.5"/>
    <circle class="star" cx="415" cy="37" r="1.8"/>
    <circle class="star s2" cx="461" cy="77" r="1.2"/>
    <circle class="star s3" cx="503" cy="36" r="1.5"/>
    <circle class="star s4" cx="556" cy="54" r="1.2"/>
    <circle class="star s2" cx="661" cy="52" r="1.7"/>
    <circle class="star s3" cx="718" cy="83" r="1.4"/>
    <circle class="star s4" cx="766" cy="39" r="1.8"/>
    <circle class="star s2" cx="56" cy="165" r="1.3"/>
    <circle class="star s3" cx="117" cy="200" r="1.8"/>
    <circle class="star s4" cx="173" cy="155" r="1.3"/>
    <circle class="star" cx="224" cy="204" r="1.3"/>
    <circle class="star s2" cx="315" cy="178" r="1.6"/>
    <circle class="star s3" cx="379" cy="149" r="1.1"/>
    <circle class="star s4" cx="435" cy="196" r="1.7"/>
    <circle class="star" cx="479" cy="142" r="1.2"/>
    <circle class="star s2" cx="512" cy="217" r="1.5"/>
    <circle class="star s3" cx="682" cy="171" r="1.3"/>
    <circle class="star s4" cx="741" cy="152" r="1.8"/>
    <circle class="star" cx="782" cy="220" r="1.2"/>
    <circle class="star s2" cx="28" cy="239" r="1.4"/>
    <circle class="star s3" cx="83" cy="268" r="1.1"/>
    <circle class="star s4" cx="154" cy="252" r="1.4"/>
    <circle class="star" cx="250" cy="275" r="1.1"/>
    <circle class="star s2" cx="345" cy="247" r="1.4"/>
    <circle class="star s3" cx="408" cy="271" r="1.1"/>
    <circle class="star s4" cx="562" cy="245" r="1.2"/>
    <circle class="star" cx="648" cy="258" r="1.4"/>
    <circle class="star s2" cx="713" cy="235" r="1.1"/>
    <path class="star s3" d="M91 115 L93 121 L99 123 L93 125 L91 131 L89 125 L83 123 L89 121Z"/>
    <path class="star s2" d="M391 109 L393 114 L398 116 L393 118 L391 123 L389 118 L384 116 L389 114Z"/>
    <path class="star s4" d="M697 113 L699 118 L704 120 L699 122 L697 127 L695 122 L690 120 L695 118Z"/>
    <path class="star" d="M274 218 L275.5 222 L280 223.5 L275.5 225 L274 229 L272.5 225 L268 223.5 L272.5 222Z"/>
  </g>

  <!-- A meteor appears first at 0.8 seconds and repeats every four seconds -->
  <g class="shooting" opacity="0">
    <path d="M220 78 L299 110 L220 83 Z" fill="url(#meteor)"/>
    <circle cx="299" cy="110" r="2.6" fill="#fff8de"/>
  </g>

  <!-- Distant hills -->
  <path d="M0 363 Q85 303 166 346 Q222 377 294 326 Q356 284 423 334 Q490 374 559 325 Q628 276 695 323 Q749 359 800 329 L800 600 L0 600Z" fill="#405266"/>
  <path d="M0 409 Q97 343 188 389 Q276 435 367 374 Q459 322 548 382 Q630 421 710 366 Q758 337 800 365 L800 600 L0 600Z" fill="#304a50"/>
  <path d="M0 432 Q97 400 181 425 Q283 456 385 410 Q500 365 604 410 Q706 456 800 402 L800 600 L0 600Z" fill="#243e40"/>

  <!-- Pine silhouettes -->
  <g fill="#1c363a">
    <path d="M34 427 L34 354 L13 354 L29 333 L18 333 L34 311 L26 311 L39 289 L52 311 L44 311 L60 333 L49 333 L65 354 L44 354 L44 427Z"/>
    <path d="M84 433 L84 378 L68 378 L79 363 L72 363 L88 339 L103 363 L97 363 L109 378 L93 378 L93 433Z"/>
    <path d="M125 430 L125 372 L107 372 L121 354 L112 354 L129 329 L146 354 L137 354 L151 372 L134 372 L134 430Z"/>
    <path d="M673 425 L673 363 L653 363 L668 343 L659 343 L678 315 L697 343 L688 343 L703 363 L683 363 L683 425Z"/>
    <path d="M730 431 L730 349 L706 349 L724 326 L713 326 L735 293 L757 326 L746 326 L764 349 L740 349 L740 431Z"/>
    <path d="M780 433 L780 375 L764 375 L775 359 L768 359 L784 336 L800 359 L793 359 L800 369 L800 433Z"/>
  </g>
  <g fill="#77918a" opacity=".18">
    <path d="M35 345 L39 319 L41 345Z"/>
    <path d="M731 338 L735 311 L738 338Z"/>
    <path d="M675 353 L678 332 L681 353Z"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0 493 Q100 464 190 477 Q278 490 348 470 Q440 445 527 463 Q642 490 800 450 L800 600 L0 600Z" fill="url(#ground)"/>
  <path d="M0 493 Q100 464 190 477 Q278 490 348 470 Q440 445 527 463 Q642 490 800 450" fill="none" stroke="#8b9d7d" stroke-opacity=".3" stroke-width="2"/>

  <!-- Fox shadow -->
  <ellipse cx="348" cy="481" rx="91" ry="12" fill="#102a2d" opacity=".55"/>

  <!-- Bushy moving tail, behind the body -->
  <g class="tail-sway">
    <path d="M350 444 C328 427 305 416 287 414 C258 411 236 424 215 445 C221 462 239 478 265 483 C293 489 330 481 357 463 Z" fill="url(#tail)"/>
    <path d="M215 445 C224 435 234 427 246 422 C249 429 253 433 261 435 L255 440 L266 444 L257 448 L267 454 L260 458 C266 466 273 474 283 483 C253 485 226 473 215 445Z" fill="#f4e4c7"/>
    <path d="M225 452 C233 463 246 472 258 475" fill="none" stroke="#d2c4ab" stroke-width="2" opacity=".55" stroke-linecap="round"/>
    <path d="M290 424 C312 426 329 437 340 449" fill="none" stroke="#f0b477" stroke-width="2" opacity=".45" stroke-linecap="round"/>
  </g>

  <!-- Fox body and chest -->
  <path d="M350 469 C335 454 330 428 333 407 C336 389 346 373 360 363 C375 354 390 362 398 379 C407 397 408 421 408 445 L410 469 C398 480 365 481 350 469Z" fill="url(#fox)"/>
  <path d="M390 374 C402 390 407 408 408 430 L408 466 C401 471 391 472 382 470 C386 455 384 441 378 429 C371 415 375 391 390 374Z" fill="#f0ddc0"/>
  <path d="M337 437 C338 455 343 468 355 474 C361 477 367 477 373 474" fill="none" stroke="#9f4e30" stroke-width="2.5" opacity=".7"/>
  <!-- Front legs and paws -->
  <path d="M384 435 C383 446 384 459 383 470 C382 475 385 478 393 478 L403 478 C406 478 407 475 405 472 L401 468 L402 441Z" fill="#b45c36"/>
  <path d="M383 467 L383 472 C382 476 385 478 393 478 L403 478 C406 478 407 475 405 472 L401 469Z" fill="#493b35"/>
  <path d="M394 474 L394 478 M400 474 L400 478" stroke="#7c6251" stroke-width="1" opacity=".7"/>

  <!-- Head looking up toward moon -->
  <path d="M351 367 C344 357 343 346 346 334 L341 306 Q340 302 344 304 L365 321 C373 318 382 317 390 319 L403 299 Q406 295 407 301 L409 326 C414 331 419 334 427 336 L441 338 Q445 339 443 343 C439 351 433 356 423 357 C419 367 408 375 395 377 C378 381 361 378 351 367Z" fill="url(#fox)"/>
  <!-- Ears -->
  <path d="M345 308 L350 335 Q355 328 363 324Z" fill="#4c3c3b"/>
  <path d="M399 322 L405 305 L406 327Z" fill="#4c3c3b"/>
  <path d="M348 312 L351 329 L359 324Z" fill="#d88a73" opacity=".75"/>
  <path d="M402 320 L405 310 L405 323Z" fill="#d88a73" opacity=".65"/>
  <!-- Cheek and muzzle -->
  <path d="M350 353 C357 359 365 361 372 359 C377 365 387 367 397 364 C405 362 410 356 414 350 C420 351 428 351 437 346 C433 353 428 356 423 357 C419 367 408 375 395 377 C377 381 360 377 351 367Z" fill="#f4e3c8"/>
  <path d="M436 338 Q441 337 443 340 Q442 343 438 344 L433 342Z" fill="#342f30"/>
  <path d="M407 343 Q411 339 415 341" fill="none" stroke="#422f2d" stroke-width="2.5" stroke-linecap="round"/>
  <circle cx="414" cy="340" r="1" fill="#fff4dc"/>
  <path d="M417 351 Q423 353 429 350" fill="none" stroke="#b8977e" stroke-width="1.3" stroke-linecap="round"/>
  <path d="M359 349 Q365 345 371 349" fill="none" stroke="#edaa70" stroke-width="2" opacity=".55" stroke-linecap="round"/>

  <!-- Foreground grasses and flowers -->
  <g fill="none" stroke="#8da388" stroke-width="2" stroke-linecap="round" opacity=".7">
    <path d="M62 535 q-3-12-10-17 M62 535 q3-12 10-19 M62 535 q0-9-1-15"/>
    <path d="M151 509 q-3-10-9-14 M151 509 q3-11 9-16"/>
    <path d="M230 550 q-2-12-9-17 M230 550 q4-10 10-14"/>
    <path d="M493 510 q-2-11-8-15 M493 510 q4-11 10-15"/>
    <path d="M603 530 q-4-13-10-18 M603 530 q3-12 9-17"/>
    <path d="M714 489 q-3-9-8-13 M714 489 q3-10 9-14"/>
    <path d="M757 555 q-2-12-8-17 M757 555 q4-10 10-14"/>
  </g>
  <g fill="#e3cba0" opacity=".8">
    <circle cx="124" cy="529" r="2"/>
    <circle cx="131" cy="526" r="1.5"/>
    <circle cx="472" cy="487" r="1.6"/>
    <circle cx="480" cy="490" r="2"/>
    <circle cx="653" cy="503" r="1.7"/>
    <circle cx="661" cy="499" r="1.4"/>
    <circle cx="323" cy="530" r="1.5"/>
  </g>
  <g fill="#d0a783" opacity=".65">
    <circle cx="124" cy="524" r="1.5"/>
    <circle cx="477" cy="485" r="1.5"/>
    <circle cx="656" cy="497" r="1.5"/>
  </g>

  <!-- Quiet decorative foreground contours -->
  <path d="M0 571 Q110 544 213 564 M530 568 Q652 539 800 563" fill="none" stroke="#7d977f" stroke-opacity=".13" stroke-width="2"/>
</svg>