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 14 s
Cost: $0.027
Output tokens: 5,315
Spent thinking: 781 tokens
Speed: 77.8 tok/s
Console errors: 0

First token after: 5.5 s
First visible text after: 17.8 s
Prompt tokens: 347
Code size: 10.3 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: model default
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 · 183 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" role="img" aria-labelledby="title desc">
  <title id="title">Lunar kickflip</title>
  <desc id="desc">A cheerful astronaut cat skateboards across the moon beneath a starry sky.</desc>
  <defs>
    <linearGradient id="space" x2="0" y2="1">
      <stop stop-color="#0b102e"/>
      <stop offset=".58" stop-color="#25244f"/>
      <stop offset="1" stop-color="#594366"/>
    </linearGradient>
    <linearGradient id="moon" x2="0" y2="1">
      <stop stop-color="#d4c9d9"/>
      <stop offset="1" stop-color="#9d91af"/>
    </linearGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#fff9ed"/>
      <stop offset="1" stop-color="#b8c5d4"/>
    </linearGradient>
    <linearGradient id="fur" x2="0" y2="1">
      <stop stop-color="#ffc884"/>
      <stop offset="1" stop-color="#ed9968"/>
    </linearGradient>
    <linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#c7f6ff" stop-opacity=".34"/>
      <stop offset=".55" stop-color="#a4d7f2" stop-opacity=".06"/>
      <stop offset="1" stop-color="#a4d7f2" stop-opacity=".25"/>
    </linearGradient>
    <radialGradient id="halo">
      <stop stop-color="#efb9c5" stop-opacity=".24"/>
      <stop offset="1" stop-color="#efb9c5" stop-opacity="0"/>
    </radialGradient>
    <filter id="shadow" x="-30%" y="-30%" width="160%" height="170%">
      <feDropShadow dx="0" dy="9" stdDeviation="9" flood-color="#14152e" flood-opacity=".28"/>
    </filter>
    <filter id="glow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
  </defs>

  <rect width="1280" height="800" fill="url(#space)"/>
  <circle cx="647" cy="350" r="380" fill="url(#halo)"/>

  <!-- Stars -->
  <g fill="#fff5e4">
    <circle cx="91" cy="91" r="2"/><circle cx="173" cy="205" r="1.5"/>
    <circle cx="260" cy="96" r="2.5"/><circle cx="346" cy="179" r="1.5"/>
    <circle cx="436" cy="72" r="1.7"/><circle cx="515" cy="131" r="1.2"/>
    <circle cx="732" cy="76" r="2"/><circle cx="827" cy="139" r="1.5"/>
    <circle cx="919" cy="67" r="2"/><circle cx="1171" cy="93" r="1.8"/>
    <circle cx="1231" cy="230" r="2"/><circle cx="1114" cy="289" r="1.5"/>
    <circle cx="1014" cy="358" r="2"/><circle cx="1175" cy="438" r="1.3"/>
    <circle cx="957" cy="476" r="1.5"/><circle cx="349" cy="365" r="2"/>
    <circle cx="211" cy="393" r="1.3"/><circle cx="98" cy="330" r="2"/>
    <circle cx="63" cy="505" r="1.5"/><circle cx="294" cy="520" r="1.5"/>
    <circle cx="409" cy="457" r="1.2"/><circle cx="871" cy="305" r="1.3"/>
  </g>
  <g fill="#ffe6c9">
    <path d="M210 259l3 10 10 3-10 3-3 10-3-10-10-3 10-3z"/>
    <path d="M890 214l2 7 7 2-7 2-2 7-2-7-7-2 7-2z"/>
    <path d="M1050 474l2 7 7 2-7 2-2 7-2-7-7-2 7-2z"/>
    <path d="M395 266l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/>
  </g>

  <!-- Distant Earth -->
  <circle cx="1052" cy="180" r="86" fill="#9cd5dc" opacity=".15" filter="url(#glow)"/>
  <circle cx="1052" cy="180" r="70" fill="#8fc9d2"/>
  <path d="M1005 127c18-17 44-20 64-15l-4 13-14 5-3 13-17 2-7 12-18-3-12 9a70 70 0 0 1 11-36zm72 29 17-7 18 12a70 70 0 0 1 6 27l-15 2-7 15-20-1-10-15 5-13-9-8zm-70 27 13 3 9 13 17 5 4 17 13 11-8 17a70 70 0 0 1-66-59z" fill="#d7e7cb"/>
  <path d="M996 158c11-30 39-49 69-48" fill="none" stroke="#e4fbf6" stroke-width="5" stroke-linecap="round" opacity=".5"/>
  <ellipse cx="1052" cy="180" rx="101" ry="24" fill="none" stroke="#d7b7ce" stroke-width="2" opacity=".55" transform="rotate(-20 1052 180)"/>

  <!-- Moon horizon -->
  <path d="M0 638Q128 606 250 628T485 636Q617 616 735 638T967 628Q1115 603 1280 626V800H0Z" fill="#827c9f"/>
  <path d="M0 670Q152 629 292 653T555 660Q724 637 864 655T1118 647Q1205 638 1280 651V800H0Z" fill="url(#moon)"/>
  <path d="M0 710Q171 680 326 704T627 711Q811 685 963 710T1280 698V800H0Z" fill="#c3b7cc" opacity=".55"/>
  <g fill="none" stroke="#958ba9" stroke-width="4" opacity=".55">
    <path d="M94 705q42-19 84 0q-44 12-84 0z"/>
    <path d="M982 687q42-17 80 0q-37 12-80 0z"/>
    <path d="M1117 751q64-21 112 0q-58 15-112 0z"/>
    <path d="M346 759q52-17 100 0q-48 13-100 0z"/>
  </g>
  <g fill="#a49ab3" opacity=".65">
    <ellipse cx="251" cy="688" rx="8" ry="3"/><ellipse cx="291" cy="716" rx="4" ry="2"/>
    <ellipse cx="904" cy="739" rx="7" ry="3"/><ellipse cx="1084" cy="716" rx="4" ry="2"/>
    <ellipse cx="496" cy="736" rx="5" ry="2"/>
  </g>

  <!-- Movement trails and moon dust -->
  <g fill="none" stroke="#f7d9cf" stroke-linecap="round" opacity=".75">
    <path d="M337 550h105" stroke-width="4"/>
    <path d="M374 570h87" stroke-width="3"/>
    <path d="M396 590h45" stroke-width="3"/>
    <path d="M477 635q-14-17-31-5q-17-11-29 5" stroke-width="4"/>
    <path d="M466 647q-14-8-27 0" stroke-width="3"/>
  </g>
  <g fill="#f3d4ce">
    <circle cx="401" cy="628" r="3"/><circle cx="385" cy="644" r="2"/>
    <circle cx="460" cy="612" r="3"/><circle cx="351" cy="635" r="2"/>
  </g>
  <ellipse cx="657" cy="656" rx="165" ry="15" fill="#6e6688" opacity=".25"/>

  <!-- Skateboard -->
  <g transform="rotate(-7 655 582)" filter="url(#shadow)">
    <path d="M538 569q9 12 27 13h192q20 0 31-14q0 25-26 28H564q-25-2-26-27z" fill="#f18a74" stroke="#3e405b" stroke-width="6" stroke-linejoin="round"/>
    <path d="M557 580h205" stroke="#ffe7c5" stroke-width="4" stroke-linecap="round"/>
    <path d="M579 596v9h26v-9m117 0v9h26v-9" fill="none" stroke="#48516a" stroke-width="5"/>
    <g fill="#f9dfae" stroke="#48516a" stroke-width="5">
      <circle cx="592" cy="610" r="13"/><circle cx="735" cy="610" r="13"/>
    </g>
    <g fill="#8c8296"><circle cx="592" cy="610" r="4"/><circle cx="735" cy="610" r="4"/></g>
  </g>

  <!-- Astronaut cat -->
  <g filter="url(#shadow)" stroke="#4b526b" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">
    <!-- Backpack -->
    <path d="M715 377l31 4q21 4 22 27l-2 54q-2 19-22 22l-33-7z" fill="#dfaaa0"/>
    <path d="M746 395v62" fill="none" stroke="#8c6f79" stroke-width="5"/>

    <!-- Tail -->
    <path d="M711 488q42 20 75-6q18-15 12-34q-3-10 6-14q10-4 16 8q15 34-14 59q-42 36-96 15" fill="none" stroke="#4b526b" stroke-width="24"/>
    <path d="M711 488q42 20 75-6q18-15 12-34q-3-10 6-14q10-4 16 8q15 34-14 59q-42 36-96 15" fill="none" stroke="#f0ac77" stroke-width="14"/>

    <!-- Arms -->
    <path d="M573 394q-24 3-42-13l-26-25-22 22 29 37q25 29 60 27z" fill="url(#suit)"/>
    <path d="M486 354q-10-11-21-4q-9 6-5 16q-8 8-2 18q9 14 25 8l15-16z" fill="#f8efe4"/>
    <path d="M475 356l13 16m-21-5 13 13" fill="none" stroke="#a8b2c2" stroke-width="4"/>
    <path d="M706 394q20-1 32 14l24 22 21-19 18 23-31 29q-14 12-29 1l-38-27z" fill="url(#suit)"/>
    <path d="M779 410q5-13 17-14q10 0 14 10q10 1 12 11q2 15-16 23l-11 3z" fill="#f8efe4"/>
    <path d="M800 405l-3 16m14-8-4 13" fill="none" stroke="#a8b2c2" stroke-width="4"/>

    <!-- Legs and boots -->
    <path d="M584 471l-17 44-4 32 40 3 17-36 23-22 18 28 13 30 42-7-14-52-16-26z" fill="url(#suit)"/>
    <path d="M561 536l43 3-1 22q-4 12-19 13l-35 1q-12-2-10-13l7-16q4-8 15-10z" fill="#f4f1eb"/>
    <path d="M669 538l43-8 9 15q6 13-5 18l-39 6q-12 1-14-10z" fill="#f4f1eb"/>
    <path d="M543 563l58-3m68-3 48-9" fill="none" stroke="#8794a9" stroke-width="5"/>

    <!-- Suit body -->
    <path d="M578 387q22-15 63-15q45 0 68 17l14 77q3 24-20 33q-59 18-122 1q-22-6-20-28z" fill="url(#suit)"/>
    <path d="M569 467q68 17 145-1l3 21q-69 20-145 2z" fill="#c5d0dc"/>
    <path d="M626 479h31v17h-31z" fill="#f2a08b" stroke-width="5"/>
    <rect x="610" y="410" width="66" height="44" rx="8" fill="#a7cbd3" stroke-width="5"/>
    <circle cx="627" cy="425" r="5" fill="#f48f7c" stroke="none"/>
    <circle cx="644" cy="425" r="5" fill="#f8e1a2" stroke="none"/>
    <path d="M620 440h43" stroke="#6e99a7" stroke-width="4"/>
    <path d="M578 419l-8 25m139-25 6 25" fill="none" stroke="#a7b4c3" stroke-width="4"/>

    <!-- Helmet collar -->
    <path d="M563 370q77 32 157 0l-5 31q-75 31-148 0z" fill="#e7ddd8"/>
    <path d="M574 393q67 23 133 0" fill="none" stroke="#adbec9" stroke-width="5"/>

    <!-- Helmet bubble -->
    <circle cx="641" cy="263" r="151" fill="#d8f6f4" fill-opacity=".18" stroke="#dceff0" stroke-width="11"/>
    <circle cx="641" cy="263" r="138" fill="#34475b" fill-opacity=".35" stroke="#788e9e" stroke-width="4"/>

    <!-- Cat ears and face -->
    <path d="M550 252l5-75q1-13 13-7l43 31q30-9 60 0l45-31q12-7 13 7l4 77q4 57-38 81q-22 14-54 14t-55-14q-41-24-36-83z" fill="url(#fur)"/>
    <path d="M567 190l4 37 24-16zM713 190l-4 37-24-16z" fill="#d7807a" stroke="none"/>
    <!-- forehead stripes -->
    <path d="M627 203l5 17m19-17-4 17" fill="none" stroke="#ce805d" stroke-width="6"/>
    <!-- cheeks and muzzle -->
    <ellipse cx="609" cy="290" rx="28" ry="22" fill="#ffe0ad" stroke="none"/>
    <ellipse cx="672" cy="290" rx="28" ry="22" fill="#ffe0ad" stroke="none"/>
    <path d="M588 262q9-10 18 0m70 0q9-10 18 0" fill="none" stroke="#4b526b" stroke-width="7"/>
    <path d="M631 276q10-2 20 0l-10 9z" fill="#b96770" stroke="none"/>
    <path d="M641 285v7q-8 10-16 1m16-1q8 10 16 1" fill="none" stroke="#805b60" stroke-width="4"/>
    <path d="M593 282l-25-5m25 14-27 4m124-13 25-5m-25 14 27 4" fill="none" stroke="#775e65" stroke-width="3"/>
    <ellipse cx="590" cy="276" rx="9" ry="5" fill="#e99080" stroke="none" opacity=".6"/>
    <ellipse cx="692" cy="276" rx="9" ry="5" fill="#e99080" stroke="none" opacity=".6"/>

    <!-- Glass sheen -->
    <circle cx="641" cy="263" r="138" fill="url(#glass)" stroke="none"/>
    <path d="M548 202q19-42 58-57" fill="none" stroke="#fff" stroke-opacity=".72" stroke-width="9"/>
    <path d="M535 229l-2 10" fill="none" stroke="#fff" stroke-opacity=".72" stroke-width="7"/>
    <path d="M732 328q-15 22-32 31" fill="none" stroke="#e3fbff" stroke-opacity=".55" stroke-width="5"/>
  </g>

  <!-- Small editorial labels -->
  <g fill="#f7e5db" font-family="Arial, sans-serif">
    <text x="74" y="95" font-size="13" font-weight="700" letter-spacing="4" opacity=".8">THE LUNAR RIDERS</text>
    <path d="M74 110h82" stroke="#f7e5db" stroke-width="2" opacity=".5"/>
    <text x="74" y="744" font-size="34" font-weight="800" letter-spacing="1">LUNAR KICKFLIP</text>
    <text x="76" y="770" font-size="12" font-weight="700" letter-spacing="3" opacity=".7">ONE SMALL PUSH. ONE GIANT RIDE.</text>
    <text x="1178" y="770" text-anchor="end" font-size="12" font-weight="700" letter-spacing="3" opacity=".65">MISSION 09</text>
  </g>
</svg>

Reasoning trace (781 tokens)

**Creating SVG for Illustration**

I need to produce a complete SVG for a beautiful illustration of an astronaut cat skateboarding on the moon. The SVG should be self-contained and responsive, with a viewBox of 0 0 1280 800. The art needs a deep navy gradient background with stars and a moon surface. I'll focus on ensuring the cat is unmistakable in an astronaut helmet. The main layout will center on the cat, dynamically positioned on the skateboard. I must consider geometry carefully!**Designing the SVG Illustration**

I’m working on the design for the SVG, focusing on the suit torso starting from (550, 405) to (715, 500), including limbs and a tail. The background will feature a crater landscape around (y620). The user asked about adding words, and I think a title like "ONE SMALL PUSH..." could work, although it might not be necessary. I'll label the top left with “MOON / MISSION 09” and caption the bottom left with “CATSTRONAUT / lunar skate club.” I want the composition to be dynamic, with the cat centered at (670, scale).**Defining Cat's Face in Helmet**

I'm focusing on the cat's face within the helmet. The ears will sit inside the helmet, positioned from (554, 260) to (566, 185) and then (610, 218). I need to make sure the head has an ellipse shape to really capture that cute look. The placement and shape are crucial for it to feel authentic, so I’ll take some time to fine-tune these dimensions. It’s all about the little details!**Designing astronaut cat**

I'm visualizing an astronaut cat with a helmet that encases the ears. The helmet has a circle shape and some specific measurements for the radius and dimensions. The cat's face is placed within the helmet, showcasing its distinct features like dark eyes and a pink nose. I want the suit to connect neatly to the helmet, with various positions for arms and legs. Plus, I’ll add some artistic elements like stars and soft ground shadows for a dynamic look.**Creating moon scene**

I’m thinking about using filters for shadows to create depth. The moon's surface will be at the y650 mark, and I plan to include a crater for some detail. Placing typography in the left footer might work well, but I need to ensure the body and helmet have clean layering for clarity. It's essential that the elements come together seamlessly, so I’ll focus on the details as I produce this scene.