Skateboarding astronaut catOne-line

GPT-6.1 Terra

by OpenAIReasoningClean

Open in new window

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

How it went

Total time: 1 min 44 s
Cost: $0.042
Output tokens: 8,251
Spent thinking: 2,228 tokens
Speed: 83.7 tok/s
Console errors: 0

First token after: 5.1 s
First visible text after: 40.2 s
Prompt tokens: 347
Code size: 13.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

“draw me an SVG of an astronaut cat skateboarding on the moon”

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 · 224 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="100%" height="100%" role="img" aria-labelledby="title desc">
  <title id="title">Moon Cruiser</title>
  <desc id="desc">A cheerful astronaut cat skateboarding above the moon, with Earth and stars in the background.</desc>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0.8" y2="1">
      <stop stop-color="#10182f"/>
      <stop offset=".55" stop-color="#182b45"/>
      <stop offset="1" stop-color="#34425a"/>
    </linearGradient>
    <radialGradient id="glow">
      <stop stop-color="#82c9d0" stop-opacity=".3"/>
      <stop offset="1" stop-color="#82c9d0" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="moon" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#a7b5bf"/>
      <stop offset="1" stop-color="#657a8d"/>
    </linearGradient>
    <linearGradient id="visor" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#bce9e7"/>
      <stop offset=".55" stop-color="#78b6c3"/>
      <stop offset="1" stop-color="#457d94"/>
    </linearGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#fff8e8"/>
      <stop offset="1" stop-color="#c5d7d7"/>
    </linearGradient>
    <linearGradient id="earth" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#a5e0d8"/>
      <stop offset="1" stop-color="#3b87a8"/>
    </linearGradient>
    <clipPath id="earthClip"><circle cx="1055" cy="171" r="61"/></clipPath>
    <filter id="soft"><feGaussianBlur stdDeviation="13"/></filter>
    <filter id="shadow"><feGaussianBlur stdDeviation="7"/></filter>
  </defs>

  <!-- Deep space -->
  <rect width="1280" height="800" fill="url(#sky)"/>
  <ellipse cx="640" cy="330" rx="420" ry="340" fill="url(#glow)"/>
  <circle cx="1060" cy="170" r="122" fill="#8dd4d7" opacity=".07" filter="url(#soft)"/>
  <g fill="#e9f1e7">
    <circle cx="64" cy="77" r="2"/><circle cx="307" cy="77" r="1.5"/>
    <circle cx="383" cy="150" r="2"/><circle cx="455" cy="66" r="1.4"/>
    <circle cx="790" cy="76" r="1.6"/><circle cx="866" cy="147" r="2"/>
    <circle cx="945" cy="63" r="1.4"/><circle cx="1178" cy="76" r="2"/>
    <circle cx="1220" cy="233" r="1.5"/><circle cx="916" cy="278" r="1.5"/>
    <circle cx="105" cy="298" r="1.5"/><circle cx="256" cy="339" r="2"/>
    <circle cx="347" cy="255" r="1.3"/><circle cx="99" cy="442" r="2"/>
    <circle cx="324" cy="503" r="1.5"/><circle cx="905" cy="435" r="1.5"/>
    <circle cx="1158" cy="385" r="2"/><circle cx="1211" cy="517" r="1.5"/>
    <circle cx="1104" cy="484" r="1.1"/><circle cx="83" cy="574" r="1.2"/>
  </g>
  <g fill="none" stroke="#d8eee8" stroke-linecap="round" opacity=".8">
    <path d="M334 112v14m-7-7h14"/>
    <path d="M899 205v18m-9-9h18"/>
    <path d="M1145 301v13m-6.5-6.5h13"/>
    <path d="M204 421v12m-6-6h12"/>
  </g>
  <g fill="none" stroke="#a8c8ce" opacity=".2" stroke-width="1">
    <path d="M85 343 151 314 213 353 260 317"/>
    <path d="M936 354 985 319 1036 341 1084 311"/>
  </g>
  <g fill="#b7d6d5" opacity=".6">
    <circle cx="85" cy="343" r="2"/><circle cx="151" cy="314" r="2"/>
    <circle cx="213" cy="353" r="2"/><circle cx="260" cy="317" r="2"/>
    <circle cx="936" cy="354" r="2"/><circle cx="985" cy="319" r="2"/>
    <circle cx="1036" cy="341" r="2"/><circle cx="1084" cy="311" r="2"/>
  </g>

  <!-- Earth -->
  <circle cx="1055" cy="171" r="76" fill="none" stroke="#bce3de" opacity=".19"/>
  <circle cx="1055" cy="171" r="61" fill="url(#earth)" stroke="#c5e6df" stroke-width="3"/>
  <g clip-path="url(#earthClip)" fill="#d8e7c9">
    <path d="M1007 128l20-12 20 5 5 10-9 9-1 10-13 3-3 10-12-1-10-13z"/>
    <path d="M1033 171l14 4 8 12-4 10 5 10-9 19-10-3-5-15-9-10 1-13z"/>
    <path d="M1063 124l18-7 20 10 5 12-11 5-7-4-8 8-14-3-7-9z"/>
    <path d="M1070 156l13-4 11 8 14 1 6 10-9 7-15-2-6 9-11-4-8-11z"/>
    <path d="M1091 197l15-3 8 8-4 9-14 4-9-6z"/>
  </g>
  <path d="M1011 203a61 61 0 0 0 96-2" fill="none" stroke="#235b7a" stroke-width="10" opacity=".18"/>
  <text x="1055" y="264" fill="#b9d5d5" font-family="Arial, sans-serif" font-size="10" letter-spacing="3" text-anchor="middle">HOME, FAR AWAY</text>

  <!-- Poster details -->
  <g font-family="Arial, sans-serif" fill="#e7f1e9">
    <circle cx="87" cy="83" r="12" fill="none" stroke="#eea68d" stroke-width="2"/>
    <path d="M80 83h14M87 76v14" stroke="#eea68d" stroke-width="1.5"/>
    <text x="110" y="87" font-size="11" font-weight="bold" letter-spacing="3">COSMIC CAT CLUB</text>
    <text x="77" y="159" font-size="38" font-weight="900" letter-spacing="1">MOON</text>
    <text x="77" y="201" font-size="38" font-weight="900" letter-spacing="1">CRUISER<tspan fill="#f0a589">.</tspan></text>
    <path d="M78 220h97" stroke="#eea68d" stroke-width="3"/>
    <text x="79" y="249" fill="#b9cdd0" font-size="11" letter-spacing="2">A VERY GOOD SPACE MISSION</text>
  </g>
  <g fill="none" stroke="#d2e6df" stroke-linecap="round" opacity=".4">
    <path d="M329 406c39-15 70-17 101-10" stroke-width="2" stroke-dasharray="3 9"/>
    <path d="M324 429c31-9 57-10 79-7" stroke-width="1.5" stroke-dasharray="2 8"/>
    <path d="M864 501c37-14 72-17 107-14" stroke-width="2" stroke-dasharray="3 9"/>
  </g>

  <!-- Lunar landscape -->
  <path d="M0 636c107-39 184-35 288-9 109 26 179 20 263-3 107-30 177-20 256 0 119 31 216 7 302-8 64-11 121-3 171 16v168H0z" fill="#536c80"/>
  <path d="M0 672c119-43 220-35 325-13 104 22 206 20 309-1 108-22 189-22 299 5 125 30 237 13 347-16v153H0z" fill="url(#moon)"/>
  <path d="M0 742c139-23 250-15 356 7 105 22 207 18 315-1 120-21 211-21 327 1 92 18 185 15 282-4v55H0z" fill="#7d91a0" opacity=".45"/>
  <g fill="none" stroke-linecap="round">
    <path d="M84 694c20-13 63-16 91-7" stroke="#d2d9d4" stroke-width="4" opacity=".5"/>
    <path d="M932 701c24-15 76-18 108-7" stroke="#d7ded8" stroke-width="4" opacity=".45"/>
    <path d="M238 752c20-8 52-8 70 0" stroke="#506b7f" stroke-width="4" opacity=".5"/>
    <path d="M1060 756c25-10 67-10 90 0" stroke="#506b7f" stroke-width="4" opacity=".45"/>
    <ellipse cx="366" cy="691" rx="44" ry="9" stroke="#728a99" stroke-width="4"/>
    <ellipse cx="1090" cy="672" rx="31" ry="7" stroke="#728a99" stroke-width="3"/>
    <ellipse cx="754" cy="754" rx="52" ry="9" stroke="#708899" stroke-width="4"/>
  </g>
  <g fill="#d7dfd9" opacity=".65">
    <circle cx="207" cy="698" r="3"/><circle cx="225" cy="706" r="2"/>
    <circle cx="880" cy="732" r="3"/><circle cx="899" cy="725" r="2"/>
    <circle cx="1172" cy="701" r="3"/><circle cx="551" cy="731" r="2"/>
  </g>
  <ellipse cx="635" cy="658" rx="210" ry="18" fill="#344f64" opacity=".23" filter="url(#shadow)"/>

  <!-- Moon dust and flight marks -->
  <g fill="none" stroke="#e8eee4" stroke-linecap="round">
    <path d="M359 588c-30 2-49 12-61 25" stroke-width="3" opacity=".65"/>
    <path d="M383 604c-34 5-51 17-61 28" stroke-width="2" opacity=".45"/>
    <path d="M849 575c31-4 54-13 72-26" stroke-width="3" opacity=".55"/>
  </g>
  <g fill="#e9ece0" opacity=".8">
    <circle cx="359" cy="625" r="5"/><circle cx="379" cy="614" r="3"/>
    <circle cx="338" cy="635" r="3"/><circle cx="408" cy="621" r="2"/>
    <circle cx="868" cy="591" r="4"/><circle cx="889" cy="579" r="2.5"/>
  </g>

  <!-- Skateboard, behind the boots -->
  <g transform="rotate(-8 635 573)">
    <g stroke="#1c3040" stroke-width="5" stroke-linejoin="round">
      <path d="M500 575l8 17h20l7-17M747 575l8 17h20l7-17" fill="#e3a78e"/>
      <circle cx="512" cy="597" r="15" fill="#f5c2a3"/>
      <circle cx="767" cy="597" r="15" fill="#f5c2a3"/>
    </g>
    <g fill="#617f88">
      <circle cx="512" cy="597" r="5"/><circle cx="767" cy="597" r="5"/>
    </g>
    <path d="M443 551q-10-7-13 1-3 9 10 21 10 10 30 10h337q21 0 33-13 10-11 5-17-4-5-12 1l-10 8H458z" fill="#e98973" stroke="#1c3040" stroke-width="6" stroke-linejoin="round"/>
    <path d="M447 554q5 9 19 10h355q11-1 18-8" fill="none" stroke="#f9c7a4" stroke-width="5" stroke-linecap="round"/>
    <path d="M477 570h313" stroke="#a84f50" stroke-width="3" opacity=".7"/>
    <path d="M618 569h35" stroke="#fff2db" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- Backpack -->
  <path d="M542 359h-22q-16 0-16 17v75q0 14 15 14h29M688 360h19q16 0 16 17v68q0 14-15 14h-20" fill="#e5a087" stroke="#1b3040" stroke-width="6"/>
  <path d="M516 381v45M712 381v40" fill="none" stroke="#f8d3b5" stroke-width="5" stroke-linecap="round"/>

  <!-- Arms -->
  <g fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path d="M565 382q-25 18-54 37l-37-32" stroke="#1c3040" stroke-width="48"/>
    <path d="M565 382q-25 18-54 37l-37-32" stroke="url(#suit)" stroke-width="37"/>
    <path d="M682 389q45-2 72-34l27-29" stroke="#1c3040" stroke-width="48"/>
    <path d="M682 389q45-2 72-34l27-29" stroke="url(#suit)" stroke-width="37"/>
    <path d="M493 401l-15 17M758 335l17 16" stroke="#80a8ad" stroke-width="8"/>
  </g>
  <!-- Mittens -->
  <path d="M471 389q-13 5-23-4l-13-14q-5-7 0-12 4-4 10 0l4 3-3-15q-1-8 5-9 7-1 9 6l4 13 1-16q1-7 7-6 6 1 6 8v15q5-7 10-4 6 4 2 11l-8 16q-4 6-11 8z" fill="#f5eadd" stroke="#1c3040" stroke-width="5" stroke-linejoin="round"/>
  <path d="M778 331q-5-12 3-22l12-15q5-6 11-2 5 4 1 10l-4 6 15-5q7-2 9 4 2 6-5 9l-12 5 16-1q7 0 8 6 0 6-7 7l-16 2q7 4 5 9-3 6-10 3l-17-6q-6-3-9-10z" fill="#f5eadd" stroke="#1c3040" stroke-width="5" stroke-linejoin="round"/>

  <!-- Legs and boots -->
  <path d="M581 453q-21 7-38 28l-37 39-27 16q-14 8-14 19 0 14 14 19 9 4 20 1l35-7q14-3 19-16l27-23 35-19z" fill="url(#suit)" stroke="#1c3040" stroke-width="6" stroke-linejoin="round"/>
  <path d="M503 522l23 25" fill="none" stroke="#94b5b9" stroke-width="7"/>
  <path d="M465 558q16 6 31 2l39-8" fill="none" stroke="#e5a189" stroke-width="7"/>
  <path d="M641 466q21-5 40 10l35 30 32 3q20 1 29 14 5 8-4 14l-48 11q-16 3-28-8l-30-17-33-12z" fill="url(#suit)" stroke="#1c3040" stroke-width="6" stroke-linejoin="round"/>
  <path d="M699 496l-15 20" fill="none" stroke="#94b5b9" stroke-width="7"/>
  <path d="M710 535q18 4 39-1l27-7" fill="none" stroke="#e5a189" stroke-width="7"/>

  <!-- Suit body -->
  <path d="M562 354q-18 8-21 34l-7 62q-2 23 16 35 28 17 75 18 47 0 76-17 16-10 14-31l-8-65q-3-26-23-36z" fill="url(#suit)" stroke="#1c3040" stroke-width="6"/>
  <path d="M549 455q76 20 154 0" fill="none" stroke="#90afb2" stroke-width="5"/>
  <path d="M550 468q72 21 152 0" fill="none" stroke="#1c3040" stroke-width="5"/>
  <rect x="606" y="463" width="39" height="20" rx="5" fill="#e89e85" stroke="#1c3040" stroke-width="4"/>
  <rect x="563" y="398" width="46" height="35" rx="7" fill="#d9e7df" stroke="#557b82" stroke-width="3"/>
  <circle cx="575" cy="410" r="4" fill="#e99b80"/>
  <circle cx="588" cy="410" r="4" fill="#74b1b3"/>
  <path d="M573 423h25" stroke="#769da0" stroke-width="3" stroke-linecap="round"/>
  <circle cx="677" cy="414" r="15" fill="#f0b097" stroke="#1c3040" stroke-width="3"/>
  <path d="M670 414h14m-7-7v14" stroke="#fff1df" stroke-width="2"/>
  <path d="M558 391q6 5 11 6M696 390q-6 5-11 6" fill="none" stroke="#9bb9b9" stroke-width="3"/>
  <!-- Collar -->
  <ellipse cx="623" cy="367" rx="94" ry="29" fill="#e89f86" stroke="#1c3040" stroke-width="6"/>
  <ellipse cx="623" cy="361" rx="88" ry="23" fill="#d8e6df" stroke="#1c3040" stroke-width="5"/>

  <!-- Helmet -->
  <circle cx="620" cy="241" r="147" fill="#d9efdf" stroke="#1c3040" stroke-width="8"/>
  <circle cx="620" cy="241" r="137" fill="url(#visor)" stroke="#f9f4e3" stroke-width="5"/>
  <circle cx="620" cy="241" r="128" fill="none" stroke="#4a8190" stroke-width="2" opacity=".7"/>
  <path d="M510 199a115 115 0 0 1 68-65" fill="none" stroke="#effff4" stroke-width="9" stroke-linecap="round" opacity=".5"/>
  <path d="M733 247a115 115 0 0 1-20 56" fill="none" stroke="#eafff4" stroke-width="5" stroke-linecap="round" opacity=".45"/>

  <!-- Cat head and ears -->
  <path d="M538 225l-4-72q0-10 10-6l43 24q32-10 66 0l40-25q9-5 10 6l-3 73q11 28 4 50-14 59-83 62-69-3-83-62-7-24 0-50z" fill="#f5dfbf" stroke="#1c3040" stroke-width="6" stroke-linejoin="round"/>
  <path d="M548 169l3 43 28-31zM693 168l-3 44-28-31z" fill="#e99d8e"/>
  <path d="M550 248q0 67 71 76 71-9 71-76-8 10-19 10-20 0-27-13-12 13-26 13t-27-13q-9 13-26 13-11 0-17-10z" fill="#fff1da" opacity=".75"/>
  <!-- Tabby markings -->
  <path d="M600 178l8 24M620 175v29M640 178l-8 24" stroke="#b78f7a" stroke-width="7" stroke-linecap="round"/>
  <path d="M543 224l22 8M543 241l18 5M697 224l-22 8M697 241l-18 5" stroke="#c49b83" stroke-width="6" stroke-linecap="round"/>
  <!-- Face -->
  <ellipse cx="583" cy="244" rx="8" ry="11" fill="#1b3040"/>
  <ellipse cx="657" cy="244" rx="8" ry="11" fill="#1b3040"/>
  <circle cx="585" cy="240" r="2.5" fill="#fff"/>
  <circle cx="659" cy="240" r="2.5" fill="#fff"/>
  <ellipse cx="568" cy="267" rx="11" ry="5" fill="#eaa497" opacity=".55"/>
  <ellipse cx="673" cy="267" rx="11" ry="5" fill="#eaa497" opacity=".55"/>
  <path d="M612 261q8-6 16 0l-8 8z" fill="#ce7d72" stroke="#1c3040" stroke-width="2" stroke-linejoin="round"/>
  <path d="M620 269v7q-7 9-14 2m14-2q7 9 14 2" fill="none" stroke="#1c3040" stroke-width="3" stroke-linecap="round"/>
  <g fill="none" stroke="#536d70" stroke-width="2.3" stroke-linecap="round">
    <path d="M574 274l-35-6M575 280l-35 4M666 274l35-6M665 280l35 4"/>
  </g>
  <!-- Visor glints and helmet hardware -->
  <path d="M521 203q-6 12-8 25" fill="none" stroke="#f5fff6" stroke-width="7" stroke-linecap="round" opacity=".8"/>
  <path d="M720 178l5 9" stroke="#f5fff6" stroke-width="5" stroke-linecap="round" opacity=".75"/>
  <circle cx="520" cy="347" r="8" fill="#f4c6a8" stroke="#1c3040" stroke-width="4"/>
  <circle cx="720" cy="347" r="8" fill="#f4c6a8" stroke="#1c3040" stroke-width="4"/>

  <!-- Small finishing caption -->
  <g font-family="Arial, sans-serif" fill="#d7e4df">
    <text x="935" y="534" font-size="10" font-weight="bold" letter-spacing="2.5">ZERO GRAVITY</text>
    <text x="935" y="553" font-size="10" letter-spacing="2.5" opacity=".7">MAXIMUM STYLE</text>
    <path d="M936 568h94" stroke="#e99c85" stroke-width="2"/>
  </g>
</svg>

Reasoning trace (2,228 tokens)

**Planning SVG Design**

I need to create a self-contained SVG as the task specifies. The artwork will depict an astronaut cat skateboarding on the moon, aiming for a beautiful, polished design. I'll set the viewBox to 1280x800, ensuring it's responsive. The dark space background will feature stars, Earth, and moon craters. The cat must be central, in a dynamic pose, with elements like dust trails and possibly the typography "LUNAR KICKFLIP" to enhance the design without distracting from the main character.**Detailing Cat Astronaut Composition**

I’m centering the main character at coordinates (640, 330), with the skateboard positioned under at (y)580 and angled at -10 degrees for a dynamic effect. The cat will have a profile view, with a helmet featuring a transparent gradient. I envision triangular ears and a face with details like eyes and whiskers. The orange accents on a cream suit provide contrast, while the background will be filled with stars and an astronaut trajectory. It’s all about creating a natural line and layered composition!**Defining Terrain and Board Position**

The lower terrain will be uneven, ranging from y620 to y800, leaving plenty of gaps. The character’s skateboard will intersect around y570 and be tilted at -8 degrees, centered at (640, 566). The skateboard deck will have a length of 386, with ends curling slightly, and the wheels will be positioned underneath. I can create a rotated group to make the board shape easier to handle, using a transformation for positioning, like `<g transform="rotate(-9 640 577)">`. This sounds like a solid plan!**Designing a cat character**

I'm envisioning a cat character with quite a few details! I think I’ll give it eyes around a specific count, and I’m considering a triangle-shaped nose. Adding some whiskers and cheek blush sounds cute, too. For the ears, I'm thinking of orange, and maybe even a cream-gray suit for the overall fur. The cat's face could be a pale ivory with slate stripes and orange patches. I want to use a thick navy for the face outline!**Designing Cosmic Cat Club**

I’m thinking of adding a small header in the top-left corner that says "COSMIC CAT CLUB" along with a tiny emblem like "MOON" or "CRUISER." The theme should feel polished, and the text labels like "ONE SMALL RIDE..." and "ZERO GRAVITY / MAXIMUM STYLE" need to be placed thoughtfully. I want to ensure the layout fits well across different dimensions, especially for SVG rendering. Additionally, using a monochrome navy background with warm accents will give it a nice aesthetic!**Creating the Helmet Design**

I’m focusing on the helmet's circle and the suit layering. I want to label the bottom of the helmet ring with bolts, placing it around y368. The helmet needs to cover the torso's top, and I’ll set a gradient fill with low opacity for the helmet glass. I’ll also draw the face above the glass with some highlights. The body will be visible from y380 to y490, with a collar under the helmet at y379. I'll ensure the arms extend enough and draw the board in the background.