GPT-6.1 Terra
by OpenAIReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 2 min 47 s
- Cost
- $0.061
- Output tokens
- 12,123
- Spent thinking
- 6,029 tokens
- Speed
- 75.1 tok/s
- Console errors
- 0
- First token after
- 5.1 s
- First visible text after
- 1 min 35 s
- Prompt tokens
- 522
- Code size
- 13.7 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-6.1-terra- Reasoning sent
{"effort":"xhigh"}- 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 · 251 lines
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" role="img" aria-labelledby="title desc">
<title id="title">The fox and the moon</title>
<desc id="desc">A fox sits on a grassy hill beneath a glowing moon, surrounded by distant trees, twinkling stars, and a passing shooting star.</desc>
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#101a32"/>
<stop offset=".52" stop-color="#263d54"/>
<stop offset="1" stop-color="#5a7472"/>
</linearGradient>
<radialGradient id="moonGlow">
<stop offset="0" stop-color="#ffeac1" stop-opacity=".35"/>
<stop offset=".38" stop-color="#f6daa4" stop-opacity=".16"/>
<stop offset="1" stop-color="#f6daa4" stop-opacity="0"/>
</radialGradient>
<radialGradient id="moon" cx=".36" cy=".3" r=".75">
<stop offset="0" stop-color="#fff2cf"/>
<stop offset=".7" stop-color="#f6dfae"/>
<stop offset="1" stop-color="#d9ba88"/>
</radialGradient>
<linearGradient id="hill" x1="0" y1="0" x2=".2" y2="1">
<stop offset="0" stop-color="#294b47"/>
<stop offset="1" stop-color="#142f32"/>
</linearGradient>
<linearGradient id="foxBody" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#efa35e"/>
<stop offset=".55" stop-color="#d87849"/>
<stop offset="1" stop-color="#ae5139"/>
</linearGradient>
<linearGradient id="tail" x1="0" y1="0" x2="1" y2=".8">
<stop offset="0" stop-color="#ec9d60"/>
<stop offset="1" stop-color="#c76242"/>
</linearGradient>
<linearGradient id="trail" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#fff2cf" stop-opacity="0"/>
<stop offset=".7" stop-color="#fff2cf" stop-opacity=".34"/>
<stop offset="1" stop-color="#fff5d9" stop-opacity=".95"/>
</linearGradient>
<clipPath id="moonClip">
<circle cx="611" cy="131" r="48"/>
</clipPath>
<g id="pine">
<path d="M-2 0v-16h-14l7-10-11 2 11-15-8 1 10-16-6 1L0-79l13 26-6-1 10 16-8-1 11 15-11-2 7 10H2V0z"/>
</g>
<g id="sparkle">
<path d="M0-6C.5-2.1 1.5-.5 5 0 1.5.5.5 2.1 0 6-.5 2.1-1.5.5-5 0-1.5-.5-.5-2.1 0-6z"/>
</g>
</defs>
<!-- Night sky -->
<path fill="url(#sky)" d="M0 0h800v600H0z"/>
<circle cx="611" cy="131" r="143" fill="url(#moonGlow)"/>
<!-- Fine, distant bands of cloud -->
<g fill="none" stroke="#c3c9c1" stroke-linecap="round" opacity=".12">
<path d="M30 233c31-8 55-8 81-3 19 4 33 3 48-1"/>
<path d="M50 240c27-3 45-2 64 1"/>
<path d="M464 258c20-4 40-3 58 0 18 4 33 4 51 0"/>
<path d="M672 213c29-5 54-4 80 1"/>
</g>
<!-- Stars, in independently twinkling constellations -->
<g fill="#f9e8c2" opacity=".8">
<animate attributeName="opacity" values=".45;1;.45" dur="3.2s" repeatCount="indefinite"/>
<circle cx="38" cy="53" r="1.1"/><circle cx="74" cy="137" r="1.4"/>
<circle cx="122" cy="48" r="1"/><circle cx="155" cy="107" r="1.5"/>
<circle cx="195" cy="35" r="1"/><circle cx="229" cy="148" r="1"/>
<circle cx="259" cy="78" r="1.5"/><circle cx="307" cy="39" r="1"/>
<circle cx="333" cy="181" r="1.3"/><circle cx="376" cy="83" r="1.1"/>
<circle cx="418" cy="31" r="1.2"/><circle cx="459" cy="132" r="1.3"/>
<circle cx="493" cy="53" r="1"/><circle cx="534" cy="188" r="1.3"/>
<circle cx="685" cy="48" r="1.3"/><circle cx="716" cy="140" r="1.2"/>
<circle cx="763" cy="75" r="1.4"/><circle cx="786" cy="191" r="1"/>
<circle cx="39" cy="304" r="1"/><circle cx="110" cy="267" r="1.2"/>
<circle cx="204" cy="238" r="1.1"/><circle cx="279" cy="226" r="1"/>
<circle cx="441" cy="237" r="1.2"/><circle cx="693" cy="261" r="1.1"/>
<use href="#sparkle" transform="translate(91 81) scale(.75)"/>
<use href="#sparkle" transform="translate(294 130) scale(.65)"/>
<use href="#sparkle" transform="translate(477 203) scale(.55)"/>
<use href="#sparkle" transform="translate(744 208) scale(.65)"/>
</g>
<g fill="#fff0d1" opacity=".7">
<animate attributeName="opacity" values=".9;.3;.9" dur="4.1s" repeatCount="indefinite"/>
<circle cx="18" cy="180" r=".9"/><circle cx="54" cy="97" r=".8"/>
<circle cx="117" cy="190" r="1"/><circle cx="142" cy="157" r=".8"/>
<circle cx="182" cy="177" r="1.3"/><circle cx="210" cy="91" r=".8"/>
<circle cx="246" cy="193" r=".9"/><circle cx="278" cy="34" r=".8"/>
<circle cx="317" cy="99" r=".9"/><circle cx="352" cy="55" r="1.2"/>
<circle cx="389" cy="155" r=".8"/><circle cx="431" cy="97" r="1"/>
<circle cx="475" cy="26" r=".8"/><circle cx="512" cy="121" r=".9"/>
<circle cx="540" cy="47" r=".8"/><circle cx="680" cy="186" r=".9"/>
<circle cx="730" cy="42" r=".9"/><circle cx="775" cy="131" r="1"/>
<circle cx="65" cy="260" r=".8"/><circle cx="169" cy="284" r=".9"/>
<circle cx="238" cy="292" r=".8"/><circle cx="410" cy="282" r="1"/>
<circle cx="553" cy="275" r=".8"/><circle cx="752" cy="291" r="1"/>
<use href="#sparkle" transform="translate(52 199) scale(.48)"/>
<use href="#sparkle" transform="translate(210 53) scale(.52)"/>
<use href="#sparkle" transform="translate(359 229) scale(.62)"/>
<use href="#sparkle" transform="translate(704 93) scale(.48)"/>
</g>
<g fill="#f6d8a5">
<animate attributeName="opacity" values=".45;1;.45" dur="2.7s" repeatCount="indefinite"/>
<use href="#sparkle" transform="translate(146 222) scale(.85)"/>
<use href="#sparkle" transform="translate(403 113) scale(.85)"/>
<use href="#sparkle" transform="translate(526 240) scale(.55)"/>
<use href="#sparkle" transform="translate(760 31) scale(.55)"/>
<circle cx="25" cy="120" r=".8"/><circle cx="344" cy="142" r=".8"/>
<circle cx="579" cy="36" r="1"/><circle cx="650" cy="231" r="1"/>
</g>
<!-- Shooting star: one passage every four seconds -->
<g opacity="0">
<animate attributeName="opacity" values="0;0;1;1;0;0"
keyTimes="0;.04;.1;.72;.83;1" dur="4s" repeatCount="indefinite"/>
<animateTransform attributeName="transform" type="translate"
values="0 0;0 0;220 95;220 95" keyTimes="0;.04;.83;1"
dur="4s" repeatCount="indefinite"/>
<path d="M139 48L205 76 209 80 204 81Z" fill="url(#trail)"/>
<path d="M149 54L205 79" fill="none" stroke="url(#trail)" stroke-width="1.1"/>
<circle cx="206" cy="79" r="2.3" fill="#fff5dc"/>
<use href="#sparkle" transform="translate(206 79) scale(.65)" fill="#fff5dc"/>
</g>
<!-- Moon -->
<circle cx="611" cy="131" r="51" fill="none" stroke="#ffe8bb" stroke-opacity=".18"/>
<circle cx="611" cy="131" r="48" fill="url(#moon)"/>
<g clip-path="url(#moonClip)" fill="#c7a77c" opacity=".19">
<circle cx="590" cy="111" r="8"/>
<circle cx="624" cy="117" r="5"/>
<circle cx="611" cy="143" r="11"/>
<circle cx="640" cy="144" r="7"/>
<circle cx="593" cy="158" r="4"/>
<path d="M569 128c9-7 17-5 22 0 4 4 2 9-2 11-6 3-13 1-20-3z"/>
</g>
<path d="M577 106a43 43 0 0 1 55-14" fill="none" stroke="#fff8e5" stroke-opacity=".45" stroke-width="1.5" stroke-linecap="round"/>
<!-- Distant rolling hills -->
<path d="M0 369C56 356 93 318 141 318c46 0 70 29 115 32 47 3 76-42 116-38 47 5 72 47 119 46 48-1 77-28 121-27 65 2 119-30 188-2v271H0z" fill="#344e5a"/>
<path d="M0 405c66-15 103-20 164-6 64 15 101-6 158-17 56-11 91 5 141 15 57 11 99-3 149-17 68-19 123-7 188 12v208H0z" fill="#29454d"/>
<path d="M0 426c70-15 116-9 169 5 67 17 122-10 176-15 58-6 102 10 153 22 67 16 116-16 171-20 48-4 92 4 131 13v169H0z" fill="#203c41"/>
<!-- Forest silhouettes -->
<g fill="#213d43" opacity=".9">
<use href="#pine" transform="translate(14 417) scale(1.05)"/>
<use href="#pine" transform="translate(48 416) scale(.8)"/>
<use href="#pine" transform="translate(93 422) scale(1.15)"/>
<use href="#pine" transform="translate(128 420) scale(.72)"/>
<use href="#pine" transform="translate(555 428) scale(.64)"/>
<use href="#pine" transform="translate(584 425) scale(.8)"/>
<use href="#pine" transform="translate(620 427) scale(.7)"/>
<use href="#pine" transform="translate(660 429) scale(1.1)"/>
<use href="#pine" transform="translate(702 431) scale(.8)"/>
<use href="#pine" transform="translate(736 431) scale(1.05)"/>
<use href="#pine" transform="translate(782 432) scale(.9)"/>
</g>
<g fill="#193438">
<use href="#pine" transform="translate(4 470) scale(1.55)"/>
<use href="#pine" transform="translate(49 468) scale(1.28)"/>
<use href="#pine" transform="translate(112 466) scale(1.1)"/>
<use href="#pine" transform="translate(675 475) scale(1.05)"/>
<use href="#pine" transform="translate(724 475) scale(1.35)"/>
<use href="#pine" transform="translate(773 470) scale(1.65)"/>
<use href="#pine" transform="translate(806 471) scale(1.15)"/>
</g>
<!-- Foreground hill -->
<path d="M0 471c69-5 143-14 210-14 50-1 88-6 126-1 75 8 121 23 189 28 106 8 190-21 275-20v136H0z" fill="url(#hill)"/>
<path d="M0 494c77-17 131-20 196-15M449 502c65 14 121 14 181 4M182 549c69-11 135-8 187 2M602 558c60-9 116-9 175 0" fill="none" stroke="#81a08a" stroke-opacity=".12" stroke-width="1.4" stroke-linecap="round"/>
<!-- Shadow under the fox -->
<ellipse cx="284" cy="457" rx="102" ry="8" fill="#102e30" opacity=".42"/>
<!-- Gently swaying tail -->
<g transform="translate(304 427)">
<g>
<animateTransform attributeName="transform" type="rotate"
values="0;4;0;-3;0" dur="5s" repeatCount="indefinite"/>
<g transform="translate(-304 -427)">
<path d="M309 407c-25 0-41-10-60-21-32-19-65-15-92-38-5 23 2 44 18 62 19 24 48 36 77 37 23 1 42-4 57-12z" fill="url(#tail)"/>
<path d="M157 348c-5 23 2 44 18 62 5 5 10 9 15 12l2-12 9 3-4-12 7 0c-17-14-30-32-47-53z" fill="#f5e6cd"/>
<path d="M179 414c33 23 75 29 120 14l3 9c-21 11-48 14-72 9-20-4-38-14-51-32z" fill="#ae513c" opacity=".38"/>
<path d="M208 388c20 4 33 12 47 20" fill="none" stroke="#f6b97a" stroke-opacity=".55" stroke-width="2" stroke-linecap="round"/>
</g>
</g>
</g>
<!-- Fox body -->
<path d="M329 332c-14 15-26 35-33 53-7 21-4 43 9 57 10 11 24 15 40 14h31c7 0 10-3 8-7-3-6-3-12-3-18 3-22-1-45-9-62-6-15-13-23-14-38z" fill="url(#foxBody)"/>
<path d="M323 387c-12 6-18 17-16 30 1 19 13 30 32 33 5 0 8-2 8-5-7-7-8-16-3-29 5-15-3-30-14-30z" fill="#d97548"/>
<path d="M318 397c-6 10-6 22-1 31" fill="none" stroke="#f1a66a" stroke-opacity=".55" stroke-width="2" stroke-linecap="round"/>
<!-- Cream chest -->
<path d="M344 344c9 2 20 7 25 17 7 14 9 29 4 43-4 11-11 17-19 14 6-17 1-39-9-55-4-8-6-15-1-19z" fill="#f4e4ca"/>
<path d="M355 355c8 9 11 19 12 28" fill="none" stroke="#fff5e3" stroke-opacity=".58" stroke-width="1.5" stroke-linecap="round"/>
<!-- Legs and paws -->
<path d="M366 403c7-1 11 5 11 14l-3 25c0 4 2 5 6 7 3 2 3 4 1 6h-19c-3-2-3-5-2-9l2-20c1-9-2-16 4-23z" fill="#bd603f"/>
<path d="M360 447c4-1 9 0 12 2 2-1 5-1 8 0 3 2 3 4 1 6h-19c-3-2-3-5-2-8z" fill="#69453c"/>
<path d="M320 447c7-2 17-2 23 1 3 1 4 4 3 7h-26c-3-1-3-5 0-8z" fill="#69453c"/>
<!-- Pointed ears -->
<path d="M318 315l-5-42c-.5-4 2-5 5-2l24 23 2 23z" fill="#c76743"/>
<path d="M320 303l-2-23 16 17z" fill="#70464a"/>
<path d="M344 306l18-39c2-4 5-4 7 1l7 38z" fill="#df8750"/>
<path d="M354 299l11-24 4 27z" fill="#80504a"/>
<!-- Fox's face and raised muzzle -->
<path d="M320 308c6-12 20-16 35-14 13 2 20 9 27 11l25-10c5-2 8 0 9 4 2 4-1 7-4 9l-22 19c-10 11-20 17-35 18-15 1-27-4-34-14-6-7-5-15-1-23z" fill="url(#foxBody)"/>
<path d="M321 320c6 4 11 7 17 6 4 0 8-2 11-5 4 5 11 7 17 5 10-5 15-13 23-17l19-10c3-1 5 0 6 2 1 3-4 8-9 12l-16 15c-10 11-22 16-35 17-17 0-30-8-33-20z" fill="#f5e8d2"/>
<path d="M405 296c4-3 8-3 11 1 2 3 0 6-4 8-3-2-5-5-7-9z" fill="#463b3a"/>
<path d="M360 308c1-3 4-4 6-2 2 1 2 4 1 6-2 2-5 1-6-1z" fill="#3b3836"/>
<circle cx="365" cy="307.5" r="1" fill="#fff5e2"/>
<path d="M354 301c3-2 6-2 9-1" fill="none" stroke="#9b523c" stroke-width="1.4" stroke-linecap="round"/>
<path d="M385 321l10-3m-12 7 9-1" fill="none" stroke="#b7907c" stroke-width=".9" stroke-linecap="round"/>
<!-- Little grasses and wildflowers -->
<g fill="none" stroke-linecap="round">
<g stroke="#8aaa8b" stroke-opacity=".65" stroke-width="1.5">
<path d="M54 523c-1-10-4-15-8-20m8 20c3-9 6-13 11-17m-11 17c0-8 0-13 1-18"/>
<path d="M146 496c-1-8-5-12-8-15m8 15c2-7 5-11 9-13"/>
<path d="M423 522c-1-9-4-14-8-19m8 19c3-8 6-12 10-15"/>
<path d="M549 537c0-11-3-16-7-21m7 21c2-9 6-14 10-18m-10 18c0-7 1-12 2-16"/>
<path d="M699 504c-1-9-5-14-9-17m9 17c2-8 5-12 10-15"/>
<path d="M746 556c-1-10-5-15-9-19m9 19c2-9 6-13 10-17"/>
<path d="M274 575c-1-8-4-12-7-15m7 15c2-7 5-10 9-13"/>
</g>
<g stroke="#c3bc87" stroke-opacity=".7" stroke-width="1">
<path d="M111 541v-16m0 8-5-5m5 2 5-5"/>
<path d="M478 565v-18m0 10-5-5m5 1 5-5"/>
<path d="M642 524v-15m0 8-5-4m5 2 4-5"/>
<path d="M337 512v-13m0 8-4-4"/>
</g>
</g>
<g fill="#ecd7aa" opacity=".8">
<circle cx="111" cy="524" r="2"/><circle cx="105" cy="527" r="1.4"/>
<circle cx="117" cy="524" r="1.5"/><circle cx="478" cy="546" r="2"/>
<circle cx="472" cy="551" r="1.4"/><circle cx="484" cy="547" r="1.4"/>
<circle cx="642" cy="508" r="1.8"/><circle cx="637" cy="512" r="1.2"/>
<circle cx="647" cy="509" r="1.2"/><circle cx="337" cy="498" r="1.7"/>
</g>
<g fill="#b2c49d" opacity=".32">
<ellipse cx="190" cy="517" rx="2" ry="1"/>
<ellipse cx="222" cy="495" rx="2" ry="1"/>
<ellipse cx="381" cy="545" rx="2" ry="1"/>
<ellipse cx="594" cy="489" rx="2" ry="1"/>
<ellipse cx="676" cy="573" rx="2" ry="1"/>
<ellipse cx="78" cy="574" rx="2" ry="1"/>
</g>
<!-- A subtle storybook frame -->
<rect x="13" y="13" width="774" height="574" rx="3" fill="none" stroke="#f8e8c9" stroke-opacity=".2"/>
<path d="M25 42V25h17M758 25h17v17M25 558v17h17M758 575h17v-17" fill="none" stroke="#f8e8c9" stroke-opacity=".25" stroke-width="1"/>
</svg>Reasoning trace (6,029 tokens)
**Designing a polished SVG scene** I need to create an SVG featuring a cohesive and aesthetic design, ensuring it’s valid, self-contained, and excludes any external JavaScript. The viewbox should be set to 0 0 800 600. I envision a storybook night scene with a gradient navy blue sky, a bright moon, and a fox on a hill. The animation involves a shooting star appearing every four seconds, using CSS animations or SMIL. I’ll ensure clarity and visual grace throughout while managing opacity for the stars.**Creating a warm-toned SVG illustration** I want to create a visually compelling SVG with a warm gold moon, soft gradient, and surrounding stars. The user requested just the illustration without any text, so maybe I can frame it tastefully without needing words, as the image itself tells a story. Perhaps I could add details like a shooting star and corner filigree. I’ll position the primary fox in the foreground on the left, facing the moon, while ensuring the gradient sky and moon design are strong and coherent.**Positioning the fox and hills** I’m working on the composition by layering distant hills at heights ranging from y345 to y410. I’ll use a gentle rolling color palette for the mountains, transitioning from #273f51 to #1e3945, with the foreground hill featuring a gradient of #193a3a. The fox will sit on the crest, around coordinates (320,416), facing the moon. I’ll ensure the tail is lush and elegantly positioned while refining the anatomical details. It’s all about planning those shapes with precise coordinates to create a balanced scene!**Designing an animation** I’m working on creating a graphic that captures a dreamy nighttime feel, possibly adding a subtle border for polish. The sky will have wispy clouds and bands of color, with a shooting star crossing every four seconds. I need to ensure the shooting star is distinguishable, moving diagonally. I might use CSS via SVG animations to control the movement and opacity. Ideally, I want the first star visible by the two-second mark for user preference. Let's think through the timing carefully!**Setting animation parameters** I'm configuring the animation for the shooting star's movement and visibility. If the total duration is four seconds, I’ll set opacity values to create a fade-in and fade-out effect. The shooting star will travel from (174, 47) to (403, 174) over 3.6 seconds. I want it to be visible for most of that time. The design dictates it should start becoming visible at 0.4 seconds and travel until about 3.4 seconds before looping. I’ll implement this with SVG animations for smoothness.**Designing a night sky scene** I'm working on a design for a sky scene. I want to create a rectangular sky base with a gradient and some subtle textures for paths of tiny stars. The moon should be a glowing circle, with a gradient to give it depth and some beautiful craters. I plan to animate star positions randomly and create groups of stars with varying opacities. It sounds like a fun project, with a focus on layering and animation effects!**Creating large star designs** I'm considering how to design large stars. I think I could use a basic star shape and scale it with some gradients for depth. I’ll define a simple sparkle geometry shape with specific coordinates to create that twinkling effect. It seems like using transformations for placements could help to arrange the stars in a visually appealing way. This sounds fun, and I want to ensure I get the sparkle just right!**Analyzing terrain details** I'm trying to visualize the landscape. I see mountains in the background of the moon area. There's a current hill on the right by y333 with trees around it. The middle horizon has this dark blue-green path at 395 y. Then there are pine trees behind a nearby hill at x640 and y425. Hmm, I wonder if the tallest tree stands at y301? I think I'm gathering all these spatial details together!