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: 51.1 s
Cost: $0.020
Output tokens: 3,914
Spent thinking: 57 tokens
Speed: 81.6 tok/s
Console errors: 0

First token after: 3.2 s
First visible text after: 4.9 s
Prompt tokens: 347
Code size: 8.8 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

“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 · 133 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" role="img" aria-label="An astronaut cat skateboarding across the moon under a starry sky">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0.8" y2="1">
      <stop stop-color="#080e2b"/>
      <stop offset=".55" stop-color="#1a2455"/>
      <stop offset="1" stop-color="#42376b"/>
    </linearGradient>
    <linearGradient id="ground" x1="0" y1="0" x2=".4" y2="1">
      <stop stop-color="#d4d0e5"/>
      <stop offset="1" stop-color="#8585a8"/>
    </linearGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#fffdf4"/>
      <stop offset=".6" stop-color="#dddff0"/>
      <stop offset="1" stop-color="#a9b5d4"/>
    </linearGradient>
    <linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#c8f8ff" stop-opacity=".32"/>
      <stop offset=".6" stop-color="#8cdaed" stop-opacity=".08"/>
      <stop offset="1" stop-color="#5ab8d5" stop-opacity=".24"/>
    </linearGradient>
    <linearGradient id="board" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#ffcc7a"/>
      <stop offset="1" stop-color="#f46d68"/>
    </linearGradient>
    <radialGradient id="planet">
      <stop stop-color="#b3efff"/>
      <stop offset="1" stop-color="#4e8fc4"/>
    </radialGradient>
    <filter id="glow"><feGaussianBlur stdDeviation="8"/></filter>
    <filter id="shadow"><feGaussianBlur stdDeviation="8"/></filter>
  </defs>

  <rect width="1280" height="800" fill="url(#sky)"/>
  <circle cx="1025" cy="160" r="92" fill="#a5d8ff" opacity=".08" filter="url(#glow)"/>
  <circle cx="1025" cy="160" r="73" fill="url(#planet)"/>
  <path d="M968 120c17-18 39-29 62-32l12 18-8 13-23 3-12 13-21-3zm38 44 20-13 25 4 13 17-6 13-22 1-9 22-20-8-11-19zm65-51c17 17 26 42 24 65l-13 4-13-20 5-19-11-13z" fill="#6ab69e" opacity=".8"/>
  <path d="M958 151c36-15 87-17 133-2M972 196c36 11 74 11 105 2" fill="none" stroke="#e4faff" stroke-width="6" opacity=".45"/>

  <g fill="#fff8d5">
    <circle cx="98" cy="93" r="2"/><circle cx="189" cy="183" r="2.5"/><circle cx="304" cy="69" r="1.7"/>
    <circle cx="408" cy="149" r="2"/><circle cx="530" cy="80" r="2.5"/><circle cx="695" cy="80" r="1.8"/>
    <circle cx="805" cy="150" r="2.5"/><circle cx="1170" cy="82" r="2"/><circle cx="1198" cy="272" r="2"/>
    <circle cx="109" cy="324" r="2"/><circle cx="296" cy="288" r="1.5"/><circle cx="873" cy="311" r="1.8"/>
    <circle cx="1134" cy="389" r="2.2"/><circle cx="240" cy="412" r="2"/><circle cx="770" cy="258" r="1.5"/>
  </g>
  <g stroke="#fff3c1" stroke-width="2" stroke-linecap="round">
    <path d="M155 239v16m-8-8h16"/><path d="M367 104v13m-6.5-6.5h13"/>
    <path d="M894 82v18m-9-9h18"/><path d="M1157 335v15m-7.5-7.5h15"/>
  </g>
  <path d="M0 520 96 465l92 37 103-70 93 79 117-40 94 60 99-45 85 34 101-67 112 66 94-41 94 36v126H0z" fill="#667095" opacity=".45"/>
  <path d="M0 582c169-48 303-33 424-16 150 21 271 14 400-16 169-40 316-15 456 31v219H0z" fill="url(#ground)"/>
  <path d="M0 620c185-40 314-15 421-3 188 22 329-20 453-29 164-12 286 13 406 47" fill="none" stroke="#eeebf4" stroke-width="4" opacity=".5"/>
  <g fill="#747b9e" opacity=".34">
    <ellipse cx="167" cy="681" rx="79" ry="13"/><ellipse cx="1068" cy="681" rx="108" ry="18"/>
    <ellipse cx="350" cy="755" rx="45" ry="8"/><ellipse cx="908" cy="749" rx="35" ry="7"/>
  </g>
  <g fill="none" stroke="#f4f1fa" stroke-width="4" opacity=".55">
    <path d="M88 678c24-16 99-21 148-7"/><path d="M971 677c40-20 140-22 190-4"/>
  </g>

  <!-- floating dust and motion -->
  <g fill="#f3e8ed" opacity=".7">
    <circle cx="294" cy="576" r="4"/><circle cx="327" cy="564" r="7"/><circle cx="359" cy="581" r="3"/>
    <circle cx="387" cy="565" r="5"/><circle cx="911" cy="534" r="4"/><circle cx="940" cy="547" r="7"/>
  </g>
  <g stroke="#e5dced" stroke-width="5" stroke-linecap="round" opacity=".55">
    <path d="M270 539h75"/><path d="M320 521h48"/><path d="M889 503h49"/>
  </g>
  <ellipse cx="643" cy="626" rx="216" ry="24" fill="#4b4c70" opacity=".25" filter="url(#shadow)"/>

  <!-- astronaut, leaning forward -->
  <g transform="rotate(-8 642 400)">
    <!-- backpack -->
    <rect x="477" y="314" width="104" height="154" rx="30" fill="#9baccd" stroke="#566889" stroke-width="8"/>
    <rect x="486" y="333" width="38" height="74" rx="12" fill="#d1dcec"/>
    <path d="M494 426h26" stroke="#7184a8" stroke-width="8" stroke-linecap="round"/>

    <!-- tail -->
    <path d="M545 432c-50 34-71 2-64-26" fill="none" stroke="#7788a8" stroke-width="29" stroke-linecap="round"/>
    <path d="M545 432c-50 34-71 2-64-26" fill="none" stroke="#e0e4ef" stroke-width="18" stroke-linecap="round"/>

    <!-- legs -->
    <path d="M571 446c-8 29-21 53-38 74l-31 13 9 29 55-3c17-2 29-12 42-29l34-48" fill="url(#suit)" stroke="#697d9e" stroke-width="7" stroke-linejoin="round"/>
    <path d="M656 456c7 27 16 52 36 72l36 5 2 29-59 4c-17 0-29-7-39-19l-42-50" fill="url(#suit)" stroke="#697d9e" stroke-width="7" stroke-linejoin="round"/>
    <path d="M498 529c-15 1-23 11-23 23 0 8 7 13 18 13h57v-25zM697 533l34-4c17-2 26 6 28 19 1 9-5 14-18 15l-44 3z" fill="#f8f7ef" stroke="#697d9e" stroke-width="7"/>
    <path d="M479 554h66m157 0 50-4" stroke="#9eb0c9" stroke-width="5"/>

    <!-- body -->
    <path d="M554 326c17-16 44-22 77-20 41 1 72 16 79 48l-8 94c-5 31-28 43-73 44-46 0-76-12-82-41l-10-84c-2-17 4-31 17-41z" fill="url(#suit)" stroke="#697d9e" stroke-width="8"/>
    <path d="M565 440c36 12 95 13 128 0" fill="none" stroke="#a6b6d0" stroke-width="7"/>
    <rect x="595" y="365" width="68" height="55" rx="10" fill="#7894b5" stroke="#617b9b" stroke-width="4"/>
    <rect x="604" y="374" width="25" height="14" rx="3" fill="#a9eff0"/>
    <circle cx="645" cy="381" r="5" fill="#ffcf7e"/>
    <path d="M607 402h43" stroke="#dce9ee" stroke-width="5" stroke-linecap="round"/>

    <!-- arms -->
    <path d="M551 352c-24 2-33 22-48 38l-42 8 5 32 52-2c15-1 26-7 37-18l20-24" fill="url(#suit)" stroke="#697d9e" stroke-width="7" stroke-linejoin="round"/>
    <path d="M465 397c-16-5-31 1-33 14-2 13 10 22 30 21l13-3-3-29z" fill="#f8f7ef" stroke="#697d9e" stroke-width="7"/>
    <path d="M697 350c25 1 37 21 49 39l38 9-5 31-53-4c-13-1-22-8-31-18l-18-23" fill="url(#suit)" stroke="#697d9e" stroke-width="7" stroke-linejoin="round"/>
    <path d="M778 398c17-4 30 4 31 16 1 13-11 21-30 17l-12-3 3-28z" fill="#f8f7ef" stroke="#697d9e" stroke-width="7"/>

    <!-- helmet -->
    <circle cx="624" cy="245" r="117" fill="#d9eef6" fill-opacity=".2" stroke="#d9edf4" stroke-width="10"/>
    <circle cx="624" cy="245" r="104" fill="url(#glass)" stroke="#8bb4cc" stroke-width="3"/>
    <!-- cat ears and head -->
    <path d="M548 244l3-84c1-9 8-12 15-7l43 30c15-3 32-3 46 0l39-29c8-6 16-2 16 8l-2 82c1 45-34 71-79 71-46 0-81-26-81-71z" fill="#f6bb75" stroke="#9e694d" stroke-width="5" stroke-linejoin="round"/>
    <path d="m562 174 4 45 28-28zm130 0-4 44-25-27z" fill="#df8f89"/>
    <path d="M602 189l9 18m17-20 1 20m19-17-7 17" stroke="#c98455" stroke-width="5" stroke-linecap="round"/>
    <ellipse cx="587" cy="251" rx="8" ry="11" fill="#29364c"/>
    <ellipse cx="670" cy="251" rx="8" ry="11" fill="#29364c"/>
    <circle cx="590" cy="247" r="2.5" fill="white"/><circle cx="673" cy="247" r="2.5" fill="white"/>
    <ellipse cx="628" cy="274" rx="25" ry="18" fill="#ffe4c7"/>
    <path d="M621 266q7-6 14 0l-7 7z" fill="#a65d63"/>
    <path d="M628 273v5q-7 8-13 0m13 0q7 8 13 0" fill="none" stroke="#825c55" stroke-width="2.5" stroke-linecap="round"/>
    <path d="M592 269l-27-5m28 13-29 3m100-11 27-5m-28 13 29 3" stroke="#9e694d" stroke-width="2.5" stroke-linecap="round"/>
    <path d="M551 183c13-25 35-42 63-47" fill="none" stroke="white" stroke-width="8" stroke-linecap="round" opacity=".7"/>
    <path d="M714 225c6 27-1 53-15 71" fill="none" stroke="#e7fbff" stroke-width="5" stroke-linecap="round" opacity=".65"/>
    <path d="M565 329c34 17 85 19 119 1" fill="none" stroke="#748cad" stroke-width="12" stroke-linecap="round"/>

    <!-- skateboard -->
    <path d="M440 568c7 10 20 15 38 15h292c19 0 31-6 38-17" fill="none" stroke="#57435e" stroke-width="8" stroke-linecap="round"/>
    <path d="M437 563c4 12 20 20 41 20h292c20 0 36-8 39-20-8 4-16 5-26 5H463c-10 0-18-1-26-5z" fill="url(#board)" stroke="#7f4d60" stroke-width="5" stroke-linejoin="round"/>
    <path d="M502 584v12m-15 0h31m210-12v12m-15 0h31" fill="none" stroke="#69718b" stroke-width="6" stroke-linecap="round"/>
    <circle cx="503" cy="603" r="17" fill="#f5cf8f" stroke="#725c72" stroke-width="6"/>
    <circle cx="728" cy="603" r="17" fill="#f5cf8f" stroke="#725c72" stroke-width="6"/>
    <circle cx="503" cy="603" r="5" fill="#a67779"/><circle cx="728" cy="603" r="5" fill="#a67779"/>
  </g>
  <g fill="#ded9ea" opacity=".75">
    <circle cx="85" cy="744" r="3"/><circle cx="264" cy="639" r="3"/><circle cx="837" cy="670" r="4"/>
    <circle cx="1196" cy="737" r="3"/><circle cx="1105" cy="607" r="3"/>
  </g>
</svg>

Reasoning trace (57 tokens)

**Designing SVG Illustration**

I'm focusing on creating a polished SVG illustration that's 1280x800 and scalable. It should feature a cat astronaut on a skateboard, set against a dynamic backdrop of stars and a moonlit terrain. I want to ensure the visual is compelling, so I'll incorporate gradients and interesting shapes. I’m thinking I might skip any text to keep it clean and simple. The cat needs to be centered, wearing a helmet and suit, with the skateboard and wheels creating a dynamic composition.