GPT-6.1 Terra

by OpenAIReasoningClean

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

How it went

Total time: 51.3 s
Cost: $0.021
Output tokens: 4,084
Spent thinking: 99 tokens
Speed: 86.9 tok/s
Console errors: 0

First token after: 4.3 s
First visible text after: 6.2 s
Prompt tokens: 522
Code size: 8.6 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: {"effort":"low"}
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 · 163 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 and a shooting star in a twinkling night sky.</desc>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#101a37"/>
      <stop offset=".55" stop-color="#26375a"/>
      <stop offset="1" stop-color="#606b79"/>
    </linearGradient>
    <radialGradient id="glow">
      <stop stop-color="#f8e9bd" stop-opacity=".38"/>
      <stop offset=".45" stop-color="#e9dcba" stop-opacity=".13"/>
      <stop offset="1" stop-color="#e9dcba" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="moon" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#fff6d9"/>
      <stop offset="1" stop-color="#e2d6b7"/>
    </linearGradient>
    <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#263c3c"/>
      <stop offset="1" stop-color="#101f2a"/>
    </linearGradient>
    <linearGradient id="fur" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#e99355"/>
      <stop offset="1" stop-color="#a64e37"/>
    </linearGradient>
    <linearGradient id="tailfur" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#dd8250"/>
      <stop offset="1" stop-color="#9e4938"/>
    </linearGradient>
    <linearGradient id="meteor" x1="0" y1="0" x2="1" y2="0">
      <stop stop-color="#fff5cf" stop-opacity="0"/>
      <stop offset="1" stop-color="#fff5cf"/>
    </linearGradient>
    <style>
      .star { fill: #fff2cf; animation: twinkle 3s ease-in-out infinite alternate; }
      .s2 { animation-delay: -1.1s; animation-duration: 2.4s; }
      .s3 { animation-delay: -2s; animation-duration: 3.7s; }
      .s4 { animation-delay: -.6s; animation-duration: 2.9s; }
      @keyframes twinkle { from { opacity: .22; } to { opacity: 1; } }
      .tail { transform-origin: 527px 475px; animation: sway 4s ease-in-out infinite; }
      @keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
      .shooting { opacity: 0; animation: shoot 4s linear infinite; }
      @keyframes shoot {
        0%, 12% { opacity: 0; transform: translate(0, 0); }
        14% { opacity: 1; }
        29% { opacity: 1; }
        34%, 100% { opacity: 0; transform: translate(210px, 105px); }
      }
    </style>
  </defs>

  <!-- The night sky -->
  <path fill="url(#sky)" d="M0 0h800v600H0z"/>
  <circle cx="190" cy="155" r="133" fill="url(#glow)"/>
  <circle cx="190" cy="155" r="48" fill="url(#moon)"/>
  <g fill="#cbbf9f" opacity=".24">
    <circle cx="173" cy="140" r="7"/>
    <circle cx="202" cy="129" r="4"/>
    <circle cx="208" cy="164" r="9"/>
    <circle cx="178" cy="177" r="5"/>
    <circle cx="193" cy="151" r="3"/>
  </g>

  <!-- Stars -->
  <g class="star">
    <circle cx="41" cy="53" r="1.5"/><circle cx="90" cy="102" r="1.1"/>
    <circle cx="127" cy="35" r="1.4"/><circle cx="269" cy="55" r="1.6"/>
    <circle cx="324" cy="124" r="1.2"/><circle cx="386" cy="43" r="1.4"/>
    <circle cx="466" cy="91" r="1.3"/><circle cx="529" cy="35" r="1.5"/>
    <circle cx="603" cy="133" r="1.1"/><circle cx="680" cy="58" r="1.6"/>
    <circle cx="746" cy="111" r="1.3"/><circle cx="783" cy="37" r="1.2"/>
    <circle cx="59" cy="205" r="1.2"/><circle cx="113" cy="244" r="1.4"/>
    <circle cx="292" cy="221" r="1.3"/><circle cx="366" cy="191" r="1.1"/>
    <circle cx="444" cy="252" r="1.5"/><circle cx="532" cy="200" r="1.2"/>
    <circle cx="714" cy="225" r="1.4"/><circle cx="773" cy="182" r="1.2"/>
  </g>
  <g class="star s2">
    <circle cx="18" cy="139" r="1"/><circle cx="75" cy="32" r="1"/>
    <circle cx="238" cy="30" r="1"/><circle cx="305" cy="87" r="1"/>
    <circle cx="355" cy="79" r="1.1"/><circle cx="422" cy="145" r="1"/>
    <circle cx="490" cy="35" r="1"/><circle cx="565" cy="101" r="1.4"/>
    <circle cx="634" cy="39" r="1"/><circle cx="723" cy="32" r="1"/>
    <circle cx="764" cy="70" r="1"/><circle cx="34" cy="260" r="1"/>
    <circle cx="243" cy="249" r="1"/><circle cx="340" cy="269" r="1"/>
    <circle cx="499" cy="235" r="1"/><circle cx="650" cy="212" r="1"/>
  </g>
  <g class="star s3" fill="none" stroke="#fff1ce" stroke-width="1">
    <path d="M83 153v10m-5-5h10"/>
    <path d="M305 165v12m-6-6h12"/>
    <path d="M490 151v10m-5-5h10"/>
    <path d="M659 155v12m-6-6h12"/>
    <path d="M739 280v10m-5-5h10"/>
  </g>
  <g class="star s4">
    <circle cx="154" cy="83" r="1"/><circle cx="255" cy="177" r="1"/>
    <circle cx="401" cy="232" r="1"/><circle cx="566" cy="261" r="1"/>
    <circle cx="693" cy="104" r="1"/><circle cx="755" cy="242" r="1"/>
    <circle cx="149" cy="282" r="1"/><circle cx="397" cy="105" r="1"/>
  </g>

  <!-- A meteor, visible shortly after the scene loads -->
  <g class="shooting">
    <path d="M413 67l73 36" fill="none" stroke="url(#meteor)" stroke-width="2" stroke-linecap="round"/>
    <circle cx="486" cy="103" r="2.5" fill="#fff5d7"/>
  </g>

  <!-- Distant ridges and mist -->
  <path d="M0 344C77 306 118 322 180 339c67-48 130-58 197-20 72-62 141-69 215-22 70-31 143-23 208 19v159H0z" fill="#687886" opacity=".36"/>
  <path d="M0 377c71-41 136-35 199-9 77-46 149-38 217 0 67-43 136-35 202-3 61-35 124-40 182-10v122H0z" fill="#3a5360"/>
  <path d="M0 405c91-32 168-20 233 6 79-33 154-25 223 5 82-42 166-38 235-9 40-12 75-12 109-4v84H0z" fill="#304950"/>

  <!-- Distant fir trees -->
  <g fill="#263f47">
    <path d="M42 408v-84l-15 29h8l-19 27h10L8 404h28v16h10v-16h27l-18-24h9l-18-27h8z"/>
    <path d="M119 409v-64l-12 22h6l-15 21h8l-14 18h23v15h8v-15h22l-14-18h7l-14-21h6z"/>
    <path d="M701 410v-82l-14 27h7l-18 25h9l-17 24h28v16h9v-16h28l-17-24h9l-18-25h7z"/>
    <path d="M761 416v-112l-18 35h9l-23 32h11l-22 32h37v20h11v-20h36l-22-32h11l-23-32h9z"/>
    <path d="M638 411v-53l-10 19h5l-13 18h7l-12 15h19v12h7v-12h19l-12-15h6l-12-18h5z"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0 487c96-29 170-35 252-27 75 7 125-3 190-24 82-27 159-25 229-7 54 14 93 27 129 28v143H0z" fill="url(#ground)"/>
  <path d="M0 488c96-29 170-35 252-27 75 7 125-3 190-24 82-27 159-25 229-7 54 14 93 27 129 28" fill="none" stroke="#8b9c81" stroke-opacity=".35" stroke-width="2"/>

  <!-- Tail behind the body -->
  <g class="tail">
    <path d="M527 475c33-15 45-48 76-54 31-7 53 6 71-14 1 29-10 56-35 72-28 19-70 25-110 20z" fill="url(#tailfur)"/>
    <path d="M623 422c19 0 37 0 51-15 1 29-10 56-35 72-7 5-16 8-24 11 7-11 6-20 1-27 8-3 9-10 5-16 7-4 7-12 2-25z" fill="#eee3cc"/>
    <path d="M545 480c30-5 42-24 59-35" fill="none" stroke="#f4ae70" stroke-opacity=".4" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- Fox body -->
  <ellipse cx="515" cy="501" rx="81" ry="11" fill="#101b23" opacity=".35"/>
  <path d="M469 489c-5-25 1-59 16-75 13-14 31-16 46-4 21 17 26 53 19 79-4 13-20 17-42 17h-35c-8 0-10-8-4-17z" fill="url(#fur)"/>
  <path d="M482 423c-12 18-14 44-10 64 2 10 10 16 23 17h14c-10-12-12-27-7-43 4-13 3-25-1-38z" fill="#f3d9b6"/>
  <path d="M531 452c-18-5-28 8-29 23-2 17 7 28 21 30h25c7 0 9-8 3-12l-10-3c7-14 3-30-10-38z" fill="#b9593d"/>
  <path d="M499 481c-3 10-3 19-8 24h-18c-5 0-7-5-3-8l10-5 2-18" fill="#583d38"/>
  <path d="M516 496c5-5 12-5 18-3l10 4c5 2 5 8-1 8h-28c-5 0-5-5 1-9z" fill="#523b38"/>

  <!-- Head tilted toward the moon -->
  <path d="M451 405l-6-50 31 21c8-3 17-4 25-1l20-34 3 51c4 16-3 32-18 40-16 8-34 4-45-8l-24-5c-7-2-10-6-9-10l10-8z" fill="url(#fur)"/>
  <path d="M451 365l4 28 15-14z" fill="#573e42"/>
  <path d="M502 379l14-25 1 33z" fill="#573e42"/>
  <path d="M454 402c4 13 11 19 21 22 11 4 23 2 31-5-2 11-11 18-23 18-13 0-21-7-27-14l-19-4c-7-2-10-6-9-10l10-8z" fill="#f5dfc2"/>
  <path d="M429 407l8-5 7 4-5 5-9 1z" fill="#302d35"/>
  <path d="M463 398c3-3 7-4 10-2" fill="none" stroke="#432f30" stroke-width="2.5" stroke-linecap="round"/>
  <circle cx="467" cy="397" r="1.7" fill="#211f28"/>
  <path d="M450 416c4 2 8 2 11 0" fill="none" stroke="#9c7463" stroke-width="1.2" stroke-linecap="round"/>

  <!-- Small grasses and flowers -->
  <g fill="none" stroke="#84977a" stroke-width="1.5" stroke-linecap="round" opacity=".7">
    <path d="M64 511q-2-10-8-14m8 14q3-11 8-15M145 491q-2-8-7-11m7 11q2-8 7-11"/>
    <path d="M294 482q-2-9-8-12m8 12q4-10 9-12M374 471q-2-8-6-11m6 11q3-9 8-12"/>
    <path d="M597 458q-1-8-6-12m6 12q3-10 8-13M704 474q-2-10-8-14m8 14q3-9 8-12"/>
    <path d="M747 518q-2-10-7-14m7 14q3-10 9-13M224 535q-2-9-7-12m7 12q4-9 8-11"/>
  </g>
  <g fill="#e1c992" opacity=".8">
    <circle cx="108" cy="500" r="1.5"/><circle cx="312" cy="493" r="1.5"/>
    <circle cx="392" cy="481" r="1.4"/><circle cx="659" cy="468" r="1.5"/>
    <circle cx="180" cy="526" r="1.3"/><circle cx="693" cy="510" r="1.3"/>
  </g>
</svg>

Reasoning trace (99 tokens)

**Designing layered SVG scene**

I need to create an SVG with a layered scene. The tail should rotate, anchored at coordinates 521 495, while the fox faces left with the moon positioned at 205 130. The body will be around 506. It's important that everything feels coherent. I’ll include stars in the sky, a glowing moon, and a shooting star animation with opacity and transform over 4 seconds, starting after a 0.5-second delay. The ground should have hills, and I need to add details to the fox's head, which will be looking up.