Skateboarding astronaut catOne-line

GPT-6.1 Sol

by OpenAIreasoning defaultClean

Open in new window

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

How it went

Total time: 1 min 41 s
Cost: $0.055
Output tokens: 5,416
Spent thinking: 234 tokens
Speed: 59.8 tok/s
Console errors: 0

First token after: 10.9 s
First visible text after: 11.7 s
Prompt tokens: 347
Code size: 12.1 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-sol
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 · 211 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1100 800" role="img" aria-labelledby="title desc" style="display:block;background:#10182e;max-width:100%;height:100vh">
  <title id="title">One small push for a cat</title>
  <desc id="desc">A happy orange astronaut cat rides a skateboard over the cratered moon, with Earth and a sky full of stars behind it.</desc>
  <defs>
    <radialGradient id="space" cx="52%" cy="44%" r="75%">
      <stop stop-color="#283b59"/>
      <stop offset="1" stop-color="#0b1126"/>
    </radialGradient>
    <linearGradient id="moon" x2=".3" y2="1">
      <stop stop-color="#d6dfdd"/>
      <stop offset="1" stop-color="#8299aa"/>
    </linearGradient>
    <linearGradient id="suit" x1="0" x2=".8" y2="1">
      <stop stop-color="#fff7dd"/>
      <stop offset=".58" stop-color="#e1e9e4"/>
      <stop offset="1" stop-color="#91b7bf"/>
    </linearGradient>
    <radialGradient id="glass" cx="35%" cy="25%" r="80%">
      <stop stop-color="#a4e4e6" stop-opacity=".4"/>
      <stop offset=".75" stop-color="#537e96" stop-opacity=".12"/>
      <stop offset="1" stop-color="#2c657e" stop-opacity=".6"/>
    </radialGradient>
    <linearGradient id="earth" x1="0" x2="1" y2="1">
      <stop stop-color="#93e1de"/>
      <stop offset=".6" stop-color="#4b9ebe"/>
      <stop offset="1" stop-color="#24476f"/>
    </linearGradient>
    <linearGradient id="deck" x2="0" y2="1">
      <stop stop-color="#ffc26d"/>
      <stop offset="1" stop-color="#ea7755"/>
    </linearGradient>
    <pattern id="dust" width="51" height="43" patternUnits="userSpaceOnUse">
      <circle cx="9" cy="11" r="1" fill="#526c83" opacity=".24"/>
      <circle cx="36" cy="31" r="1.5" fill="#f6f0d9" opacity=".35"/>
    </pattern>
    <clipPath id="earthClip"><circle cx="872" cy="164" r="66"/></clipPath>
    <filter id="glow"><feGaussianBlur stdDeviation="7"/></filter>
    <filter id="shadow" x="-30%" y="-30%" width="160%" height="170%">
      <feDropShadow dx="0" dy="8" stdDeviation="0" flood-color="#10263e" flood-opacity=".25"/>
    </filter>
  </defs>

  <path fill="url(#space)" d="M0 0h1100v800H0z"/>
  <ellipse cx="541" cy="373" rx="343" ry="275" fill="#668ba2" opacity=".04"/>
  <circle cx="541" cy="355" r="252" fill="none" stroke="#acc9ce" stroke-opacity=".08"/>
  <circle cx="541" cy="355" r="285" fill="none" stroke="#acc9ce" stroke-opacity=".05"/>

  <!-- A little constellation of distant stars -->
  <g fill="#e6ecdc">
    <circle cx="87" cy="192" r="2"/><circle cx="184" cy="301" r="1.6"/>
    <circle cx="287" cy="91" r="2"/><circle cx="386" cy="168" r="1.5"/>
    <circle cx="581" cy="71" r="2"/><circle cx="694" cy="121" r="1.3"/>
    <circle cx="754" cy="297" r="2"/><circle cx="980" cy="282" r="2"/>
    <circle cx="1013" cy="113" r="1.4"/><circle cx="901" cy="374" r="1.6"/>
    <circle cx="106" cy="440" r="1.2"/><circle cx="275" cy="407" r="2"/>
    <circle cx="674" cy="222" r="1.2"/><circle cx="1017" cy="452" r="1.5"/>
    <circle cx="341" cy="272" r="1"/><circle cx="784" cy="55" r="1"/>
  </g>
  <g fill="none" stroke="#f5dfac" stroke-width="2" stroke-linecap="round">
    <path d="M173 156v16m-8-8h16M737 375v14m-7-7h14M958 66v12m-6-6h12M329 205v10m-5-5h10"/>
    <path d="m94 337 3 8 8 3-8 3-3 8-3-8-8-3 8-3Z" fill="#f5dfac" stroke="none"/>
  </g>
  <path d="m715 71 61-25" stroke="#b3ced4" stroke-width="2" opacity=".25"/>
  <path d="m760 52 16-6" stroke="#e9e7cf" stroke-width="2"/>

  <!-- Tiny blue home -->
  <circle cx="872" cy="164" r="77" fill="#65b8d3" opacity=".1" filter="url(#glow)"/>
  <circle cx="872" cy="164" r="68" fill="#b2ddd9"/>
  <circle cx="872" cy="164" r="66" fill="url(#earth)"/>
  <g clip-path="url(#earthClip)">
    <path d="m813 125 25-12 15 8 4 13 22 5 1 13-19 8-6 22-15 3-7-22-20-9-12-16Zm62 51 22-14 24 5 13 19-11 13-2 20-17 14-9-22-16-13Z" fill="#9bceae"/>
    <path d="M806 151q39-24 74-10t59-9M822 194q28-12 48-2m1-79q26-5 44 6" fill="none" stroke="#edf4df" stroke-width="7" stroke-linecap="round" opacity=".8"/>
    <path d="M884 91q-3 76 55 102l17-83Z" fill="#152c52" opacity=".18"/>
  </g>
  <text x="872" y="264" text-anchor="middle" fill="#9bb5c5" font-family="monospace" font-size="10" letter-spacing="4">HOME, SWEET HOME</text>

  <!-- The rolling lunar surface -->
  <path d="M0 584Q218 510 431 560T789 551t311 16V800H0Z" fill="url(#moon)"/>
  <path d="M0 584Q218 510 431 560T789 551t311 16" fill="none" stroke="#f0efdb" stroke-width="4"/>
  <path d="M0 584Q218 510 431 560T789 551t311 16V800H0Z" fill="url(#dust)"/>
  <g stroke="#7892a3" stroke-width="2">
    <ellipse cx="174" cy="615" rx="72" ry="20" fill="#a1b4bc"/>
    <path d="M111 619q61-35 126-1" fill="none" stroke="#dee5de" stroke-width="5"/>
    <ellipse cx="919" cy="653" rx="108" ry="30" fill="#8ea5b1"/>
    <path d="M826 661q83-54 185-4" fill="none" stroke="#dae3db" stroke-width="6"/>
    <ellipse cx="746" cy="574" rx="25" ry="7" fill="#91a7b2"/>
    <ellipse cx="361" cy="730" rx="48" ry="14" fill="#91a7b2"/>
    <path d="M322 733q36-24 78-3" fill="none" stroke="#d0dcd7" stroke-width="4"/>
    <ellipse cx="1025" cy="753" rx="28" ry="9" fill="#849fab"/>
    <ellipse cx="52" cy="718" rx="15" ry="5" fill="#91a7b2"/>
  </g>
  <g fill="#6d879c" opacity=".55">
    <path d="m244 570 10-7 13 9Z"/><path d="m775 716 9-9 16 12Z"/>
    <ellipse cx="707" cy="660" rx="5" ry="2"/><ellipse cx="94" cy="662" rx="4" ry="2"/>
    <ellipse cx="956" cy="572" rx="7" ry="2"/>
  </g>

  <!-- Motion, moon dust, and an airborne shadow -->
  <ellipse cx="559" cy="652" rx="147" ry="17" fill="#3f5d76" opacity=".2"/>
  <g fill="none" stroke-linecap="round">
    <path d="M291 509h77m-104 21h80m-28 21h31" stroke="#d6d9cc" stroke-width="3" opacity=".6"/>
    <path d="M315 620q39-20 88-12m-110 31q45-9 74-6" stroke="#e7ecdc" stroke-width="5"/>
    <path d="m739 478 13-15m-1 34 20-6" stroke="#f5c778" stroke-width="3"/>
  </g>
  <g fill="#eceddb">
    <circle cx="386" cy="625" r="5"/><circle cx="359" cy="601" r="4"/>
    <circle cx="327" cy="614" r="3"/><circle cx="402" cy="650" r="3"/>
  </g>

  <!-- Cat, suit, and skateboard -->
  <g stroke="#20364b" stroke-width="5" stroke-linejoin="round" stroke-linecap="round">
    <!-- Life-support pack -->
    <path d="m583 351 50 3q16 3 19 20l-1 82q-2 17-19 18l-44-8Z" fill="#709ca9"/>
    <path d="m631 374 13 2m-14 15 14 2m-15 15 14 2" fill="none" stroke="#c4dad6" stroke-width="3"/>
    <!-- A very non-regulation space tail -->
    <path d="M622 453q68 35 100-9 26-36 0-56-17-12-27 1" fill="none" stroke="#20364b" stroke-width="31"/>
    <path d="M622 453q68 35 100-9 26-36 0-56-17-12-27 1" fill="none" stroke="#eea251" stroke-width="22"/>
    <path d="m665 464 3-16m21 11-5-16m32-1-14-10m27-16-15-2" fill="none" stroke="#bd6b3f" stroke-width="7"/>
    <!-- Back arm waving -->
    <path d="M591 372q30 7 49-18l30-44 28 21-27 48q-28 41-64 37Z" fill="url(#suit)"/>
    <path d="m661 323 30 20" stroke="#dc8058" stroke-width="12"/>
    <path d="m670 311-1-23q-1-8 6-10 7-2 10 9l2 8 1-28q1-8 8-7t7 9l-1 23 6-19q3-8 10-5t4 11l-6 23 9-11q6-6 11-1 6 5-1 14l-19 28q-8 9-19 2Z" fill="#f4f0dd"/>
    <path d="m687 296 13 10" fill="none" stroke-width="3"/>

    <!-- Legs tucked into a low-gravity carve -->
    <path d="m523 455-16 44-40 43 30 26 51-42q10-10 16-28l9-26Z" fill="url(#suit)"/>
    <path d="m571 463 31 43 20 40 37-13-15-50-30-53Z" fill="url(#suit)"/>
    <path d="m504 511 26 22m79-27 30-12" stroke="#7da6b1" stroke-width="12"/>
    <!-- Boot soles and boots -->
    <path d="m474 535-20 18q-17 10-11 23l4 9 66-15-4-18-16-16Z" fill="#eef0df"/>
    <path d="m443 576 67-16 5 13-67 16Z" fill="#4c7185"/>
    <path d="m617 531 4 28 55-6q12-2 10-14-2-11-21-12l-11-6Z" fill="#eef0df"/>
    <path d="m622 551 65-8 1 13-66 8Z" fill="#4c7185"/>
    <path d="m460 560 17-4m161-17 14-2" stroke="#7da6b1" stroke-width="3"/>

    <!-- Body -->
    <path d="M505 356q42-22 89 4l31 85q-26 38-99 36l-36-53Z" fill="url(#suit)"/>
    <path d="M514 453q48 16 101-14" fill="none" stroke="#779ca9" stroke-width="12"/>
    <path d="m535 454 22 2-1 17-22-2Z" fill="#f4cb7d" stroke-width="3"/>
    <!-- Chest control panel -->
    <path d="m542 381 44-4 8 47-44 6Z" fill="#426b81" stroke-width="3"/>
    <path d="m552 391 23-2 2 11-23 2Z" fill="#bce1d3" stroke-width="2"/>
    <circle cx="559" cy="416" r="3" fill="#f6b068" stroke="none"/>
    <circle cx="575" cy="414" r="3" fill="#e2eee0" stroke="none"/>
    <path d="m598 383 10 24" stroke="#f5f1df" stroke-width="3"/>

    <!-- Outstretched front arm -->
    <path d="M514 371q-16-11-30 4l-33 26-52-9-9 34 62 15q14 2 25-8l39-25" fill="url(#suit)"/>
    <path d="m410 394-7 35" stroke="#df875e" stroke-width="13"/>
    <path d="m393 396-25-14q-9-5-13 1-5 7 7 16l-28-3q-10-1-11 7-1 7 10 9l19 4-18 1q-9 1-8 8 1 6 11 6l23-1q25 15 36-6Z" fill="#f3f0dc"/>

    <!-- Helmet neck seal -->
    <path d="M488 344q47 26 105-4l9 20q-57 34-112 4Z" fill="#577f91"/>
    <path d="M490 345q46 23 103-5" stroke="#d3e4dc" stroke-width="8"/>

    <!-- Broad, round space helmet -->
    <circle cx="535" cy="260" r="111" fill="url(#suit)" filter="url(#shadow)"/>
    <circle cx="535" cy="260" r="97" fill="#34586e"/>
    <circle cx="535" cy="260" r="91" fill="#76a5ad"/>

    <!-- Pointy ears unmistakably inside the helmet -->
    <path d="m467 245-3-61q0-8 7-4l44 34m41-2 40-34q7-5 8 4l3 67" fill="#eea153"/>
    <path d="m477 222-2-26 24 21m70-1 25-22 1 31" fill="#d78472" stroke-width="3"/>
    <!-- Cat face -->
    <path d="M477 222q21-18 51-14 39-9 64 17 23 25 15 59-8 42-60 47-52 4-73-30-25-39 3-79Z" fill="#f1ab60"/>
    <path d="m519 212 6 24 10-3 6-22m-51 10 11 18m58-25-6 20" fill="none" stroke="#c97842" stroke-width="7"/>
    <path d="M486 277q15-12 39 0 12 6 20-1 29-16 47 0 4 36-48 40-50 3-58-39Z" fill="#fff0ce" stroke="none"/>
    <path d="M487 258q10-14 21-1m48-3q10-14 21-1" fill="none" stroke-width="5"/>
    <path d="m525 278 18-1-8 10Z" fill="#b36a61" stroke-width="3"/>
    <path d="M535 287v5m0 0q-8 11-16 2m16-2q8 11 16 0" fill="none" stroke-width="3"/>
    <g stroke-width="2.5">
      <path d="m489 281-29-4m29 13-30 5m117-16 29-7m-27 16 29 3"/>
    </g>
    <ellipse cx="491" cy="273" rx="10" ry="5" fill="#e68d75" opacity=".65" stroke="none"/>
    <ellipse cx="578" cy="270" rx="10" ry="5" fill="#e68d75" opacity=".65" stroke="none"/>

    <!-- Glass and glints -->
    <circle cx="535" cy="260" r="91" fill="url(#glass)" stroke="#d0e8df" stroke-width="3"/>
    <path d="M456 238q8-37 39-49" fill="none" stroke="#fffbea" stroke-width="9" opacity=".65"/>
    <path d="M454 257v8m117 70q30-12 42-39" fill="none" stroke="#e5f4e8" stroke-width="4" opacity=".55"/>
    <circle cx="430" cy="276" r="12" fill="#ecedda"/>
    <circle cx="430" cy="276" r="4" fill="#749eaa" stroke-width="2"/>
    <path d="m624 206 7-19" stroke-width="4"/>
    <circle cx="633" cy="182" r="6" fill="#f1ad65" stroke-width="3"/>

    <!-- The board, suspended above the dust -->
    <g transform="rotate(-12 551 591)">
      <path d="M453 602v15m180-15v15" stroke="#20364b" stroke-width="8"/>
      <path d="M441 615h26m153 0h26" stroke="#8ca6b0" stroke-width="6"/>
      <circle cx="454" cy="624" r="15" fill="#e6b66d"/>
      <circle cx="454" cy="624" r="5" fill="#4c687b" stroke-width="3"/>
      <circle cx="633" cy="624" r="15" fill="#e6b66d"/>
      <circle cx="633" cy="624" r="5" fill="#4c687b" stroke-width="3"/>
      <path d="M411 578q13 14 35 14h189q28 0 47-17l7 9q-15 23-48 24H444q-29 0-42-20Z" fill="url(#deck)"/>
      <path d="M413 580q14 10 34 10h187q27 0 47-15" fill="none" stroke="#f7e7b7" stroke-width="4"/>
      <path d="m525 600 28 0m12 0h11" stroke="#9a4d41" stroke-width="3"/>
    </g>
  </g>

  <!-- Small editorial finishing touches -->
  <g font-family="monospace" fill="#ede9d6">
    <text x="67" y="76" font-size="12" letter-spacing="4">THE LUNAR</text>
    <text x="64" y="113" font-family="Arial, sans-serif" font-size="34" font-weight="800" letter-spacing="3">CATWALK</text>
    <path d="M67 130h46" stroke="#ecac70" stroke-width="3"/>
    <text x="67" y="151" font-size="10" letter-spacing="2" fill="#a5bbc7">MISSION 09 · ZERO GRAVITY</text>
  </g>
  <g fill="#314d63" font-family="monospace">
    <text x="67" y="758" font-size="12" letter-spacing="2">ONE SMALL PUSH FOR A CAT.</text>
    <text x="1032" y="758" text-anchor="end" font-size="10" letter-spacing="2">SEA OF TRANQUILLY / 001</text>
  </g>
</svg>

Reasoning trace (234 tokens)

**Creating responsive SVG**

I'm considering how to make the SVG responsive. I need to set the width to 100% and ensure it's accessible with the appropriate role. Also, it looks like I'm trying to style the SVG root to have the right dimensions with `width: 100vw` and `height: 100vh`, all while making the background fit nicely. I want to create something high quality, so I’ll focus on these parameters!