Skateboarding astronaut catOne-line

GPT-6 Luna

by OpenAIReasoningClean

Open in new window

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

How it went

Total time: 53.9 s
Cost: $0.0027
Output tokens: 5,264
Spent thinking: 951 tokens
Speed: 116.9 tok/s
Console errors: 0

First token after: 8.9 s
First visible text after: 16.2 s
Prompt tokens: 347
Code size: 10.1 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"medium"}
Max output: 64,000 tokens
Generated: Nov 10, 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 · 176 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" role="img" aria-labelledby="title desc">
  <title id="title">Astronaut cat skateboarding on the moon</title>
  <desc id="desc">A cheerful cat in a space suit rides a skateboard across a moonlit lunar landscape.</desc>
  <defs>
    <linearGradient id="sky" x2="0" y2="1">
      <stop stop-color="#10152f"/>
      <stop offset=".62" stop-color="#242b50"/>
      <stop offset="1" stop-color="#45445d"/>
    </linearGradient>
    <linearGradient id="ground" x2="0" y2="1">
      <stop stop-color="#aaa3a2"/>
      <stop offset="1" stop-color="#696a7a"/>
    </linearGradient>
    <linearGradient id="suit" x2=".9" y2="1">
      <stop stop-color="#fffdf4"/>
      <stop offset=".55" stop-color="#e7e9e7"/>
      <stop offset="1" stop-color="#b9c2ce"/>
    </linearGradient>
    <linearGradient id="visor" x2=".85" y2="1">
      <stop stop-color="#8ae4e5" stop-opacity=".62"/>
      <stop offset=".55" stop-color="#4d91bb" stop-opacity=".38"/>
      <stop offset="1" stop-color="#28385f" stop-opacity=".68"/>
    </linearGradient>
    <linearGradient id="deck" x2="0" y2="1">
      <stop stop-color="#ffcb6b"/>
      <stop offset="1" stop-color="#e67c50"/>
    </linearGradient>
    <radialGradient id="earth">
      <stop stop-color="#aaf4ff"/>
      <stop offset=".72" stop-color="#50a9d3"/>
      <stop offset="1" stop-color="#3454a1"/>
    </radialGradient>
    <filter id="shadow" x="-30%" y="-30%" width="160%" height="170%">
      <feGaussianBlur stdDeviation="12"/>
    </filter>
    <filter id="glow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="5" result="b"/>
      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>

  <!-- Deep space -->
  <rect width="1280" height="800" fill="url(#sky)"/>
  <circle cx="1044" cy="177" r="66" fill="url(#earth)" stroke="#b9f8ff" stroke-opacity=".65" stroke-width="3"/>
  <path d="M1002 164q24-32 56-25t38 34q-30-10-43 10t-49 8q-12-12-2-27z" fill="#d3fff1" opacity=".38"/>
  <path d="M998 204q37-24 66-2t44 7q-23 35-65 30t-45-35z" fill="#defaf1" opacity=".23"/>
  <g fill="#fff5d9">
    <circle cx="114" cy="120" r="2.5"/><circle cx="210" cy="215" r="1.8"/>
    <circle cx="317" cy="92" r="2"/><circle cx="452" cy="159" r="2.5"/>
    <circle cx="537" cy="79" r="1.5"/><circle cx="731" cy="130" r="2"/>
    <circle cx="845" cy="76" r="2.8"/><circle cx="925" cy="273" r="1.8"/>
    <circle cx="1173" cy="321" r="2.4"/><circle cx="109" cy="334" r="1.7"/>
    <circle cx="279" cy="300" r="2.4"/><circle cx="385" cy="259" r="1.5"/>
    <circle cx="1201" cy="99" r="1.7"/><circle cx="785" cy="250" r="1.6"/>
  </g>
  <g stroke="#fff5d9" stroke-width="2" opacity=".75">
    <path d="M172 169v14m-7-7h14"/><path d="M902 190v12m-6-6h12"/>
    <path d="M356 124v11m-5.5-5.5h11"/>
  </g>

  <!-- Distant lunar ridge -->
  <path d="M0 491Q122 440 235 479t220-18q127-49 253 12t214-4q153-71 358 3v152H0z" fill="#777787" opacity=".58"/>
  <path d="M0 547q170-58 292-10t257-15q161-59 298 20t257-12q88-39 176-14v284H0z" fill="url(#ground)"/>
  <path d="M0 654q144-47 273-6t246 1q150-51 273 5t251-6q128-39 237 1v151H0z" fill="#686979" opacity=".7"/>
  <g fill="#565969" opacity=".48">
    <ellipse cx="161" cy="622" rx="70" ry="18"/><ellipse cx="1022" cy="654" rx="100" ry="22"/>
    <ellipse cx="905" cy="540" rx="42" ry="11"/><ellipse cx="314" cy="572" rx="30" ry="8"/>
  </g>
  <g fill="#c8c4c4" opacity=".35">
    <circle cx="82" cy="588" r="3"/><circle cx="214" cy="690" r="4"/><circle cx="365" cy="599" r="3"/>
    <circle cx="956" cy="613" r="4"/><circle cx="1123" cy="581" r="3"/><circle cx="1193" cy="710" r="4"/>
  </g>

  <!-- Ground shadow -->
  <ellipse cx="634" cy="682" rx="258" ry="31" fill="#22263b" opacity=".42" filter="url(#shadow)"/>

  <!-- Skateboard -->
  <g transform="rotate(-9 625 637)">
    <path d="M397 623Q405 613 423 613h410q21 0 27 11l-4 13q-7 10-24 10H422q-20 0-26-10z"
          fill="url(#deck)" stroke="#713e4a" stroke-width="5"/>
    <path d="M419 625h408" stroke="#ffe4a4" stroke-width="3" stroke-linecap="round" opacity=".8"/>
    <path d="M485 647l-4 20m288-20 5 20" stroke="#d5dbe0" stroke-width="8" stroke-linecap="round"/>
    <path d="M468 667h36m252 0h36" stroke="#697588" stroke-width="7" stroke-linecap="round"/>
    <circle cx="480" cy="676" r="14" fill="#29334a" stroke="#ffdf9e" stroke-width="4"/>
    <circle cx="790" cy="676" r="14" fill="#29334a" stroke="#ffdf9e" stroke-width="4"/>
    <circle cx="480" cy="676" r="4" fill="#d5f1ed"/><circle cx="790" cy="676" r="4" fill="#d5f1ed"/>
    <path d="M551 630l16 0m18 0h16m18 0h16m18 0h16m18 0h16m18 0h16"
          stroke="#a8564e" stroke-width="3" stroke-linecap="round" opacity=".8"/>
  </g>

  <!-- Backpack behind the astronaut -->
  <path d="M692 369q38 6 47 32l-2 76q-4 17-23 17l-27-13 1-101z"
        fill="#98a9b8" stroke="#46536c" stroke-width="5"/>
  <path d="M709 387h26v45h-26z" rx="8" fill="#60d5d0" opacity=".8"/>
  <path d="M715 449l22 8v17l-21-4z" fill="#ef9b5d"/>

  <!-- Legs and boots -->
  <path d="M592 458q-17 26-40 62l-24 47q-8 16 7 26l15 8q12 4 20-10l37-55 36-51z"
        fill="url(#suit)" stroke="#647187" stroke-width="7" stroke-linejoin="round"/>
  <path d="M658 456q17 26 35 46l31 45q11 16-1 29l-13 11q-13 8-23-6l-41-47-34-47z"
        fill="url(#suit)" stroke="#647187" stroke-width="7" stroke-linejoin="round"/>
  <path d="M527 583q-20 12-18 28l6 14q4 8 17 5l30-14q9-6 6-16l-9-16z"
        fill="#f1f0e9" stroke="#59667e" stroke-width="6"/>
  <path d="M705 574q13-10 25 0l24 18q10 8 5 18l-8 13q-6 9-17 4l-29-17q-11-7-8-19z"
        fill="#f1f0e9" stroke="#59667e" stroke-width="6"/>
  <path d="M523 601l32-13m158-4 25 20" stroke="#ff9f67" stroke-width="6" stroke-linecap="round"/>
  <path d="M574 517l24 13m68-13-20 16" stroke="#a8b4c2" stroke-width="5" stroke-linecap="round"/>

  <!-- Arms -->
  <path d="M575 369q-30 0-46-24l-31-44q-10-15 2-27l12-10q15-10 26 4l39 43 36 18z"
        fill="url(#suit)" stroke="#647187" stroke-width="7" stroke-linejoin="round"/>
  <path d="M698 373q29-14 47-4l46 21q17 8 12 25l-5 14q-6 15-23 10l-49-17-37 9z"
        fill="url(#suit)" stroke="#647187" stroke-width="7" stroke-linejoin="round"/>
  <path d="M492 272q-7-16 7-25l13-8q13-5 23 7l9 14-27 23z"
        fill="#e9edf0" stroke="#59667e" stroke-width="6"/>
  <path d="M789 395q10-15 27-9l16 7q14 8 8 22l-9 15q-8 12-21 5l-17-10z"
        fill="#e9edf0" stroke="#59667e" stroke-width="6"/>
  <path d="M531 320l-16 11m194 24 9-14" stroke="#ff9c64" stroke-width="8" stroke-linecap="round"/>
  <path d="M549 341l-13 13m175 4 15-7" stroke="#a5b2c2" stroke-width="4" stroke-linecap="round"/>

  <!-- Suit torso -->
  <path d="M584 352q13-20 39-21l51 12q24 8 27 34l-8 91q-4 24-31 29l-76-8q-24-4-25-29l-1-72q0-25 24-36z"
        fill="url(#suit)" stroke="#59677e" stroke-width="7" stroke-linejoin="round"/>
  <path d="M590 366q24 12 53 13t48-8" fill="none" stroke="#c1cad2" stroke-width="5"/>
  <path d="M610 399h52v42h-52z" rx="8" fill="#63768d" stroke="#46536c" stroke-width="4"/>
  <rect x="618" y="407" width="35" height="23" rx="5" fill="#79dfd5"/>
  <circle cx="627" cy="418" r="4" fill="#fff4bd"/><circle cx="643" cy="418" r="4" fill="#ff9a67"/>
  <path d="M596 453h86" stroke="#aab5c1" stroke-width="5" stroke-linecap="round"/>
  <path d="M609 461h58" stroke="#f0a36e" stroke-width="5" stroke-linecap="round"/>
  <circle cx="577" cy="401" r="9" fill="#74d7d1" stroke="#53647c" stroke-width="3"/>
  <circle cx="690" cy="401" r="9" fill="#74d7d1" stroke="#53647c" stroke-width="3"/>

  <!-- Helmet -->
  <circle cx="632" cy="267" r="105" fill="#d9e4e8" stroke="#53627a" stroke-width="8"/>
  <circle cx="632" cy="267" r="91" fill="url(#visor)" stroke="#f8fcf7" stroke-width="5"/>
  <path d="M558 218q20-34 56-42" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" opacity=".8"/>
  <path d="M694 197q18 13 25 34" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" opacity=".48"/>
  <path d="M545 256q-17 11-13 30m197-34q16 10 14 30" fill="none" stroke="#88a0b2" stroke-width="6" stroke-linecap="round"/>

  <!-- Cat ears, face and expression -->
  <path d="M575 249l-13-42q-3-11 8-7l39 23m54 26 18-42q5-10 13 0l13 43"
        fill="#f7eee0" stroke="#7d6070" stroke-width="5" stroke-linejoin="round"/>
  <path d="M572 223l-4-13 27 17m94-2 10-19 8 27" fill="#ed9a91"/>
  <path d="M580 252q-2-26 23-36 25-13 52-2 30 11 35 39l-4 31q-5 31-43 40-34 8-56-17-17-20-7-55z"
        fill="#fff4e8" stroke="#7d6070" stroke-width="4"/>
  <path d="M581 253q-9 17-2 35l15-10 11-26z" fill="#d89470"/>
  <path d="M677 241q15 17 12 36l-15-5-13-25z" fill="#d89470"/>
  <path d="M603 218q13-10 27-8m-1 3-9 20m43-14q12 6 17 17" fill="none" stroke="#c98561" stroke-width="5" stroke-linecap="round"/>
  <ellipse cx="606" cy="276" rx="7" ry="11" fill="#31374a"/>
  <ellipse cx="658" cy="276" rx="7" ry="11" fill="#31374a"/>
  <circle cx="608" cy="273" r="2.5" fill="#fff"/>
  <circle cx="660" cy="273" r="2.5" fill="#fff"/>
  <path d="M625 291q7-8 14 0l-7 7z" fill="#e9868d"/>
  <path d="M632 298q-1 12-11 13m11-13q2 12 12 13" fill="none" stroke="#76535e" stroke-width="3" stroke-linecap="round"/>
  <g fill="#725d62">
    <circle cx="592" cy="297" r="2"/><circle cx="600" cy="303" r="2"/><circle cx="669" cy="299" r="2"/><circle cx="677" cy="293" r="2"/>
  </g>
  <path d="M585 289l-25-5m27 14-25 4m118-13 24-7m-24 16 23 5" stroke="#f7f0e4" stroke-width="2.5" stroke-linecap="round" opacity=".9"/>

  <!-- Tiny lunar dust trails -->
  <g fill="#f2d29c" opacity=".75" filter="url(#glow)">
    <circle cx="413" cy="654" r="3"/><circle cx="390" cy="640" r="2"/><circle cx="855" cy="595" r="3"/>
  </g>

  <!-- Quiet poster-style details -->
  <g font-family="Arial, Helvetica, sans-serif" fill="#f7f1df">
    <text x="62" y="67" font-size="15" letter-spacing="4" opacity=".8">LUNAR EXPLORATION • 01</text>
    <path d="M62 82h128" stroke="#f7f1df" stroke-width="2" opacity=".6"/>
    <text x="62" y="118" font-size="12" letter-spacing="2" opacity=".58">ONE SMALL TRICK FOR CATKIND</text>
  </g>
  <g transform="translate(1157 562)" opacity=".78">
    <circle r="31" fill="none" stroke="#fff1d3" stroke-width="2"/>
    <path d="M-17 4q17-28 34 0M-13 11h26" fill="none" stroke="#fff1d3" stroke-width="2"/>
    <circle cy="-7" r="5" fill="#ffbe72"/>
  </g>
</svg>

Reasoning trace (951 tokens)

**Designing cat helmet and suit**

I'm thinking about how to suit up a cat astronaut! I envision using stroke outlines and round caps for the limb paths, and the helmet's outer casing would be an ellipse shape. The cat's face would go at the center, with the ears possibly being triangles behind the face but still visible through the translucent visor. I want the cat to have a white face with tabby markings, green eyes, and to include some neat patches on the suit.**Evaluating character positioning**

I'm working on coordinating the logic for a character's pose. The board line has specific coordinates, and I'm noting the slope and the deck's surface path. The feet positions overlap on the deck at certain y-values, and the torso is positioned centrally. Arms and shoulders have defined paths, and I'm considering the head's position as well. I need to ensure consistency in the lines and apply simple gradients for the final output. This is a complex layout!