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 12 s
Cost: $0.029
Output tokens: 5,686
Spent thinking: 1,142 tokens
Speed: 85.8 tok/s
Console errors: 0

First token after: 5.9 s
First visible text after: 27.4 s
Prompt tokens: 522
Code size: 11.3 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: {"effort":"medium"}
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 · 180 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <title>Moonlit fox</title>
  <desc>A fox sits on a grassy hill beneath a glowing moon, twinkling stars, and a passing shooting star.</desc>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#101c39"/>
      <stop offset=".55" stop-color="#253b55"/>
      <stop offset="1" stop-color="#506474"/>
    </linearGradient>
    <radialGradient id="moonGlow">
      <stop stop-color="#f5e8c4" stop-opacity=".34"/>
      <stop offset=".42" stop-color="#f4e5bd" stop-opacity=".13"/>
      <stop offset="1" stop-color="#f4e5bd" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="moon" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#fff4d4"/>
      <stop offset="1" stop-color="#dfdfcb"/>
    </linearGradient>
    <linearGradient id="hill" x1="0" y1="0" x2=".6" y2="1">
      <stop stop-color="#344c49"/>
      <stop offset="1" stop-color="#182e32"/>
    </linearGradient>
    <linearGradient id="fox" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#e99a55"/>
      <stop offset=".6" stop-color="#c96e3e"/>
      <stop offset="1" stop-color="#a74e35"/>
    </linearGradient>
    <linearGradient id="tail" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#edaa65"/>
      <stop offset="1" stop-color="#bb6039"/>
    </linearGradient>
    <linearGradient id="streak" x1="0" y1="0" x2="1" y2="0">
      <stop stop-color="#fff8df" stop-opacity=".95"/>
      <stop offset="1" stop-color="#fff8df" stop-opacity="0"/>
    </linearGradient>
    <g id="pine">
      <path d="M0 0 7 14 4 14 12 25 8 25 17 39 10 38 20 52 3 49 3 59-3 59-3 49-20 52-10 38-17 39-8 25-12 25-4 14-7 14Z"/>
    </g>
    <g id="spark">
      <path d="M0-5 Q.7-.7 5 0 Q.7.7 0 5 Q-.7.7-5 0 Q-.7-.7 0-5Z"/>
    </g>
  </defs>

  <rect width="800" height="600" fill="url(#sky)"/>
  <circle cx="620" cy="133" r="137" fill="url(#moonGlow)"/>

  <!-- Small, steady stars -->
  <g fill="#f7edcf" opacity=".7">
    <circle cx="38" cy="50" r="1.2"/><circle cx="81" cy="113" r="1"/>
    <circle cx="115" cy="36" r="1.4"/><circle cx="151" cy="94" r="1"/>
    <circle cx="193" cy="49" r="1.1"/><circle cx="228" cy="140" r="1.1"/>
    <circle cx="260" cy="72" r="1"/><circle cx="304" cy="28" r="1.3"/>
    <circle cx="338" cy="111" r="1"/><circle cx="378" cy="46" r="1.2"/>
    <circle cx="424" cy="132" r="1"/><circle cx="460" cy="37" r="1.2"/>
    <circle cx="509" cy="102" r="1"/><circle cx="544" cy="40" r="1.1"/>
    <circle cx="701" cy="54" r="1.2"/><circle cx="747" cy="109" r="1"/>
    <circle cx="774" cy="35" r="1.1"/><circle cx="726" cy="189" r="1.2"/>
    <circle cx="778" cy="239" r="1"/><circle cx="682" cy="248" r="1"/>
    <circle cx="550" cy="250" r="1.2"/><circle cx="480" cy="210" r="1"/>
    <circle cx="388" cy="206" r="1.1"/><circle cx="295" cy="182" r="1"/>
    <circle cx="180" cy="202" r="1.2"/><circle cx="93" cy="215" r="1"/>
    <circle cx="45" cy="276" r="1.1"/><circle cx="248" cy="249" r="1"/>
    <circle cx="352" cy="264" r="1"/><circle cx="601" cy="291" r="1"/>
    <circle cx="745" cy="295" r="1.2"/><circle cx="120" cy="280" r="1"/>
  </g>

  <!-- Slowly twinkling stars -->
  <g fill="#fff3d2">
    <g transform="translate(78 67)"><use href="#spark"><animate attributeName="opacity" values=".3;1;.3" dur="3s" repeatCount="indefinite"/></use></g>
    <g transform="translate(205 121) scale(.7)"><use href="#spark"><animate attributeName="opacity" values="1;.25;1" dur="2.8s" repeatCount="indefinite"/></use></g>
    <g transform="translate(321 65) scale(.8)"><use href="#spark"><animate attributeName="opacity" values=".25;1;.25" dur="3.4s" repeatCount="indefinite"/></use></g>
    <g transform="translate(442 96) scale(.65)"><use href="#spark"><animate attributeName="opacity" values="1;.3;1" dur="2.5s" repeatCount="indefinite"/></use></g>
    <g transform="translate(536 180) scale(.8)"><use href="#spark"><animate attributeName="opacity" values=".3;1;.3" dur="3.1s" repeatCount="indefinite"/></use></g>
    <g transform="translate(738 70) scale(.8)"><use href="#spark"><animate attributeName="opacity" values="1;.3;1" dur="3.7s" repeatCount="indefinite"/></use></g>
    <g transform="translate(700 281) scale(.6)"><use href="#spark"><animate attributeName="opacity" values=".2;1;.2" dur="2.9s" repeatCount="indefinite"/></use></g>
    <g transform="translate(145 165) scale(.65)"><use href="#spark"><animate attributeName="opacity" values=".3;1;.3" dur="3.5s" repeatCount="indefinite"/></use></g>
    <g transform="translate(397 167) scale(.55)"><use href="#spark"><animate attributeName="opacity" values="1;.2;1" dur="3s" repeatCount="indefinite"/></use></g>
  </g>

  <!-- The moon -->
  <circle cx="620" cy="133" r="49" fill="url(#moon)"/>
  <g fill="#c7cbbd" opacity=".3">
    <ellipse cx="601" cy="115" rx="11" ry="7" transform="rotate(-30 601 115)"/>
    <ellipse cx="638" cy="150" rx="12" ry="8" transform="rotate(25 638 150)"/>
    <ellipse cx="611" cy="151" rx="6" ry="4"/>
    <ellipse cx="635" cy="106" rx="5" ry="7" transform="rotate(35 635 106)"/>
    <circle cx="650" cy="128" r="3"/>
  </g>
  <circle cx="620" cy="133" r="49" fill="none" stroke="#fff7df" stroke-opacity=".6"/>

  <!-- A shooting star travels across the sky once every four seconds -->
  <g>
    <animateTransform attributeName="transform" type="translate" values="0 0;-190 90;-190 90" keyTimes="0;.22;1" dur="4s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.025;.17;.22;1" dur="4s" repeatCount="indefinite"/>
    <path d="M445 69 511 38 451 72Z" fill="url(#streak)"/>
    <circle cx="445" cy="69" r="2.3" fill="#fff8df"/>
  </g>

  <!-- Layers of distant mountains -->
  <path d="M0 365 Q84 307 164 346 Q213 315 278 350 Q340 302 413 345 Q466 313 526 339 Q592 291 660 328 Q728 299 800 335 L800 485 H0Z" fill="#42586a" opacity=".67"/>
  <path d="M0 405 Q73 365 151 388 Q210 359 281 384 Q346 357 412 386 Q475 350 552 380 Q628 346 695 369 Q751 349 800 363 L800 500 H0Z" fill="#304a55"/>
  <path d="M0 421 Q77 397 145 413 Q213 392 270 410 Q335 393 400 417 Q490 384 563 407 Q644 379 710 392 Q763 382 800 392 L800 501 H0Z" fill="#293f49"/>

  <!-- Forest silhouettes -->
  <g fill="#263d43">
    <use href="#pine" transform="translate(31 350) scale(.83)"/>
    <use href="#pine" transform="translate(65 360) scale(.65)"/>
    <use href="#pine" transform="translate(95 342) scale(1.1)"/>
    <use href="#pine" transform="translate(130 370) scale(.66)"/>
    <use href="#pine" transform="translate(165 367) scale(.75)"/>
    <use href="#pine" transform="translate(526 362) scale(.65)"/>
    <use href="#pine" transform="translate(558 340) scale(1.05)"/>
    <use href="#pine" transform="translate(593 352) scale(.86)"/>
    <use href="#pine" transform="translate(628 324) scale(1.25)"/>
    <use href="#pine" transform="translate(671 350) scale(.9)"/>
    <use href="#pine" transform="translate(708 320) scale(1.3)"/>
    <use href="#pine" transform="translate(750 342) scale(1.05)"/>
    <use href="#pine" transform="translate(790 322) scale(1.34)"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0 486 Q110 438 205 443 Q275 445 347 466 Q442 490 534 477 Q670 461 800 421 L800 600 H0Z" fill="url(#hill)"/>
  <path d="M0 486 Q110 438 205 443 Q275 445 347 466 Q442 490 534 477 Q670 461 800 421" fill="none" stroke="#91a38c" stroke-opacity=".3" stroke-width="2"/>
  <path d="M0 557 Q138 520 253 549 T493 553 T800 506 V600 H0Z" fill="#1c3335" opacity=".55"/>

  <!-- Fox -->
  <g transform="translate(-40 -42) scale(1.15)">
    <!-- Tail pivots gently at the body -->
    <g>
      <animateTransform attributeName="transform" type="rotate" values="-3 322 423;3 322 423;-3 322 423" dur="4.5s" repeatCount="indefinite"/>
      <path d="M327 416 C300 420 280 406 259 386 C234 362 203 370 185 389 C186 420 212 448 253 457 C281 463 311 453 329 440Z" fill="url(#tail)"/>
      <path d="M185 389 C193 380 204 373 217 373 Q210 383 215 389 L205 391 Q211 398 204 403 L214 407 Q216 418 227 426 C205 421 189 408 185 389Z" fill="#f3e9d6"/>
      <path d="M219 440 Q250 457 282 447" fill="none" stroke="#f4b476" stroke-opacity=".45" stroke-width="2" stroke-linecap="round"/>
    </g>

    <!-- Body and haunch -->
    <path d="M330 345 C308 348 294 365 290 390 C285 414 290 439 305 449 Q312 456 328 456 L362 456 Q372 454 370 448 Q368 444 358 443 L351 413 Q360 391 356 370 Q353 353 341 347Z" fill="url(#fox)"/>
    <path d="M305 421 Q295 404 301 382 Q292 396 294 416 Q295 435 307 445" fill="none" stroke="#f4ad69" stroke-opacity=".6" stroke-width="2" stroke-linecap="round"/>
    <path d="M343 342 Q356 346 362 358 Q357 374 358 390 L365 440 Q367 449 357 452 L342 452 Q349 445 348 433 L343 403 Q333 381 332 361Z" fill="#f1e4d0"/>
    <path d="M348 393 Q347 413 352 433 L354 446 Q353 451 346 452 L332 452 Q329 454 330 457 L356 457 Q364 456 365 451 L359 410" fill="#bc693f"/>
    <path d="M330 454 Q335 451 346 452 Q350 453 349 457 L326 457 Q325 455 330 454Z" fill="#503d38"/>
    <path d="M354 452 Q359 450 365 452 Q370 453 370 457 L349 457 Q348 454 354 452Z" fill="#503d38"/>

    <!-- Head, pointed ears, muzzle -->
    <path d="M320 326 L322 278 Q322 276 325 279 L343 300 Q350 297 357 300 L367 280 Q369 277 370 281 L372 307 Q379 313 389 316 L402 317 Q408 318 405 324 Q402 330 390 335 Q379 341 364 341 Q348 347 334 342 Q324 339 320 326Z" fill="url(#fox)"/>
    <path d="M325 289 L326 314 Q330 306 337 303Z" fill="#713f3a"/>
    <path d="M366 289 L361 303 Q366 304 369 307Z" fill="#713f3a"/>
    <path d="M338 326 Q347 329 353 337 Q368 342 382 335 Q392 332 400 326 Q391 328 383 325 Q377 329 372 325 Q367 334 357 332 Q348 329 338 326Z" fill="#f4e9d7"/>
    <path d="M398 317 Q403 316 405 319 Q407 322 403 324 Q399 324 397 321Z" fill="#382f31"/>
    <path d="M369 317 Q373 314 377 316" fill="none" stroke="#463538" stroke-width="2.4" stroke-linecap="round"/>
    <circle cx="375" cy="315" r=".8" fill="#f9eedc"/>
    <path d="M386 332 Q393 333 398 328" fill="none" stroke="#b27359" stroke-width="1" stroke-linecap="round"/>
    <path d="M329 331 Q332 336 337 338" fill="none" stroke="#f2ac6c" stroke-width="1.5" stroke-linecap="round"/>
  </g>

  <!-- Foreground grasses and flowers -->
  <g fill="none" stroke="#81937b" stroke-linecap="round" opacity=".65">
    <path d="M63 509 q-2-12-9-17 M63 509 q2-11 9-16 M63 509 v-13"/>
    <path d="M128 483 q-2-9-7-14 M128 483 q4-10 9-12"/>
    <path d="M458 513 q-1-12-7-18 M458 513 q4-10 10-13 M458 513 v-16"/>
    <path d="M565 505 q-2-12-8-17 M565 505 q4-11 10-14"/>
    <path d="M699 469 q-2-11-8-15 M699 469 q4-10 10-13"/>
    <path d="M748 530 q-2-12-8-17 M748 530 q4-10 9-12"/>
    <path d="M257 518 q-2-8-7-12 M257 518 q4-8 8-10"/>
  </g>
  <g fill="#d9cba4" opacity=".75">
    <circle cx="54" cy="491" r="1.8"/><circle cx="72" cy="492" r="1.5"/>
    <circle cx="451" cy="494" r="1.7"/><circle cx="468" cy="499" r="1.4"/>
    <circle cx="557" cy="487" r="1.7"/><circle cx="709" cy="455" r="1.5"/>
    <circle cx="740" cy="512" r="1.5"/><circle cx="121" cy="468" r="1.5"/>
  </g>
  <g fill="#a9b59a" opacity=".35">
    <circle cx="91" cy="546" r="1.5"/><circle cx="177" cy="503" r="1.3"/>
    <circle cx="313" cy="531" r="1.5"/><circle cx="391" cy="550" r="1.3"/>
    <circle cx="510" cy="541" r="1.5"/><circle cx="637" cy="503" r="1.4"/>
    <circle cx="719" cy="567" r="1.5"/><circle cx="782" cy="478" r="1.2"/>
    <circle cx="217" cy="570" r="1.3"/><circle cx="590" cy="576" r="1.2"/>
  </g>
  <rect x="10" y="10" width="780" height="580" rx="2" fill="none" stroke="#e7dfc4" stroke-opacity=".15"/>
</svg>

Reasoning trace (1,142 tokens)

**Creating the SVG illustration**

I need to focus on outputting an SVG only. The composition should be polished with an 800x600 size. I'm imagining a night scene with a teal indigo sky and a moon positioned in the upper right. There should be a clear, recognizable fox sitting on a hill toward the left-center, looking up at the moon. I also want to incorporate paths layering its tail with animation pivot, distant trees, a hill, and stars. Text is optional; I might go for an artistic poster without it for a clean, elegant look.**Designing the star animation**

I need to create a shooting star that crosses every 4 seconds, with the first appearance within 2 seconds. The animation should transform from its start position to a new one over 0.85 seconds, becoming hidden until the next interval. The star starts at (640, 95) and crosses the moon at (600, 120), with a specific movement path and opacity changes. The moon should glow radially, and the fox needs to be positioned in the foreground on a hill. I also need to outline its anatomy.**Designing the fox and hill**

I’m working on a foreground hill that rises to a height of around y 417 on the left side, forming a silhouette ridge. The fox's feet will be along a baseline at about y 451, centered at x 335 between y 342-449. Its tail will extend from the rear, swaying while anchored correctly. I want to ensure the tail has a distinct shape, with a white tip that contrasts against the lighter orange. I'll separate the group to rotate around a pivot at (323, 425).**Analyzing fox illustration details**

I’m looking at the fox's size and position in the illustration. It feels moderate, and I wonder if I can scale it to 320x410 while keeping the baseline. The main subject seems to have better impact at 260 width. I need to adjust the positioning for a more cohesive look, making sure the hill and foreground match. Plus, I should add details like the moon, stars, and tiny trees. It’ll enhance the overall feel!**Designing animated effects**

I'm thinking about creating a circular, pale design at the coordinates (620, 135) with a radius of 49 pixels. I want to incorporate transparent spots for a cool effect. To achieve a twinkling appearance, I’ll use CSS animations, specifically with transform-box and fill-box properties, adjusting opacity for that shimmering look. Animation-delay will help in timing the twinkles, adding a meaningful touch to the design overall. It's going to be visually engaging!**Creating the illustration**

I’m considering using varied opacity values for twinkling stars and a static background. I want to add details like foliage to create depth. A framed border may not be necessary, and I’m debating a small label like "NIGHTFALL" in the top left. It might be best as a standalone illustration without text for elegance. I'll aim for accuracy with objects and avoid clipping. I also want a gradient sky and ground and to include elements like grass and flecks in the foreground. Oh, and a shooting star every four seconds, starting within the first two seconds. Let's generate!