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: 54.6 s
Cost: $0.0035
Output tokens: 6,864
Spent thinking: 2,110 tokens
Speed: 160.5 tok/s
Console errors: 0

First token after: 11.8 s
First visible text after: 24.4 s
Prompt tokens: 347
Code size: 11.0 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"high"}
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 · 167 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 orange cat in a spacesuit rides a colorful skateboard across the lunar surface, with Earth and stars in the distance.</desc>
  <defs>
    <linearGradient id="sky" x2="0" y2="1">
      <stop stop-color="#11152f"/>
      <stop offset=".58" stop-color="#202c55"/>
      <stop offset="1" stop-color="#41577a"/>
    </linearGradient>
    <linearGradient id="moon" x2="0" y2="1">
      <stop stop-color="#d5d3d1"/>
      <stop offset=".35" stop-color="#a9b2c2"/>
      <stop offset="1" stop-color="#65758f"/>
    </linearGradient>
    <linearGradient id="suit" x2=".9" y2="1">
      <stop stop-color="#fffefa"/>
      <stop offset=".55" stop-color="#e8edf2"/>
      <stop offset="1" stop-color="#b8c8d9"/>
    </linearGradient>
    <linearGradient id="visor" x2=".8" y2="1">
      <stop stop-color="#344a68"/>
      <stop offset=".6" stop-color="#192841"/>
      <stop offset="1" stop-color="#101a32"/>
    </linearGradient>
    <linearGradient id="deck" x2="0" y2="1">
      <stop stop-color="#ffbd67"/>
      <stop offset="1" stop-color="#f27655"/>
    </linearGradient>
    <radialGradient id="earth">
      <stop stop-color="#b5fff0"/>
      <stop offset=".7" stop-color="#43bcd0"/>
      <stop offset="1" stop-color="#3171ab"/>
    </radialGradient>
    <filter id="shadow" x="-40%" y="-40%" width="180%" height="200%">
      <feGaussianBlur stdDeviation="12"/>
    </filter>
    <clipPath id="glass">
      <ellipse cx="645" cy="280" rx="86" ry="82"/>
    </clipPath>
  </defs>

  <!-- Deep space -->
  <path fill="url(#sky)" d="M0 0h1280v800H0z"/>
  <circle cx="1035" cy="149" r="66" fill="none" stroke="#536684" stroke-width="2" opacity=".55"/>
  <circle cx="1035" cy="149" r="55" fill="url(#earth)"/>
  <path d="M1001 120q17-19 38-9l9 13-15 9-7 20-16 5-12-17zM1050 169l18-8 13 12-7 21-19 9-8-15z" fill="#74d7b5" opacity=".85"/>
  <path d="M985 152q49-57 102-17" fill="none" stroke="#f0ffff" stroke-width="3" opacity=".28"/>
  <g fill="#fff2c5">
    <circle cx="110" cy="105" r="2.4"/><circle cx="267" cy="78" r="1.8"/><circle cx="370" cy="153" r="2"/>
    <circle cx="497" cy="91" r="1.7"/><circle cx="797" cy="98" r="2.2"/><circle cx="918" cy="68" r="1.5"/>
    <circle cx="1166" cy="286" r="2"/><circle cx="1079" cy="381" r="1.6"/><circle cx="228" cy="335" r="1.7"/>
    <circle cx="83" cy="424" r="1.8"/><circle cx="346" cy="267" r="1.3"/><circle cx="888" cy="286" r="1.6"/>
    <circle cx="1187" cy="79" r="1.4"/><circle cx="430" cy="417" r="1.7"/>
  </g>
  <g stroke="#f5e4b5" stroke-width="2" opacity=".8">
    <path d="M185 209v14m-7-7h14"/><path d="M894 192v12m-6-6h12"/>
    <path d="M1143 455v14m-7-7h14"/><path d="M305 474v10m-5-5h10"/>
  </g>
  <path d="M92 273c37-17 55 16 90 3s44-36 79-27" fill="none" stroke="#9db8d6" stroke-width="2" opacity=".32"/>
  <path d="M1070 426c24-14 39 5 65-6 19-8 30-19 49-17" fill="none" stroke="#9db8d6" stroke-width="2" opacity=".28"/>

  <!-- Far lunar ridge -->
  <path d="M0 601q115-56 238-29t200-5q133-54 257 5t234-2q117-34 190 10t161-13v233H0z" fill="#79879c" opacity=".62"/>
  <path d="M0 643q127-55 256-25t232-13q104-25 207 13t200-8q113-38 203 12t182-12v190H0z" fill="url(#moon)"/>
  <g fill="#74839a" opacity=".46">
    <ellipse cx="173" cy="708" rx="48" ry="10"/><ellipse cx="1050" cy="678" rx="61" ry="13"/>
    <ellipse cx="920" cy="750" rx="78" ry="16"/><ellipse cx="355" cy="764" rx="64" ry="12"/>
  </g>
  <g fill="none" stroke="#e4e4e1" stroke-width="4" opacity=".38">
    <ellipse cx="172" cy="701" rx="47" ry="9"/><ellipse cx="1050" cy="672" rx="59" ry="12"/>
    <ellipse cx="920" cy="744" rx="75" ry="14"/>
  </g>

  <!-- Speed swooshes and lunar dust -->
  <path d="M338 532q50-22 95-6m-122 28q39-14 69-4m495-48q43-17 80-6" fill="none" stroke="#c9ecf6" stroke-width="4" stroke-linecap="round" opacity=".52"/>
  <g fill="#f8d18a" opacity=".8">
    <circle cx="406" cy="586" r="4"/><circle cx="433" cy="565" r="2.5"/><circle cx="826" cy="570" r="3"/>
    <circle cx="854" cy="547" r="2"/><circle cx="391" cy="613" r="2"/>
  </g>

  <!-- Skateboard and its shadow -->
  <ellipse cx="638" cy="655" rx="214" ry="24" fill="#1c2942" opacity=".35" filter="url(#shadow)"/>
  <g transform="rotate(-7 628 611)">
    <path d="M458 603q0-16 20-16h302q20 0 20 16v8q0 14-20 14H478q-20 0-20-14z" fill="#29364c"/>
    <path d="M458 591q0-16 20-16h302q20 0 20 16v8q0 14-20 14H478q-20 0-20-14z" fill="url(#deck)" stroke="#fff0d8" stroke-width="3"/>
    <path d="M496 580h94l-37 30h-58zm154 0h92l-26 30h-93z" fill="#57d1c0" opacity=".94"/>
    <path d="M598 579h38v31h-38z" fill="#394c70"/>
    <path d="M520 605v15m217-15v15" stroke="#dbe5e8" stroke-width="7" stroke-linecap="round"/>
    <path d="M520 618h33m184 0h33" stroke="#4a5870" stroke-width="5" stroke-linecap="round"/>
    <circle cx="532" cy="632" r="15" fill="#25334a"/><circle cx="532" cy="632" r="7" fill="#f5c56c"/>
    <circle cx="754" cy="632" r="15" fill="#25334a"/><circle cx="754" cy="632" r="7" fill="#f5c56c"/>
    <path d="M473 584q12-11 24-7m270 0q12-4 24 7" fill="none" stroke="#fff5df" stroke-width="3" opacity=".8"/>
  </g>

  <!-- Astronaut silhouette and limbs -->
  <!-- Arms behind the body -->
  <path d="M599 399Q559 378 527 362L490 375" fill="none" stroke="#71859b" stroke-width="54" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M599 397Q559 376 527 360L490 373" fill="none" stroke="url(#suit)" stroke-width="43" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M684 397Q727 378 757 365L801 343" fill="none" stroke="#71859b" stroke-width="54" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M684 395Q727 376 757 363L801 341" fill="none" stroke="url(#suit)" stroke-width="43" stroke-linecap="round" stroke-linejoin="round"/>
  <!-- Sleeve seams and cuffs -->
  <path d="M529 349l-17 27m251-33 17 27" stroke="#a4b5c6" stroke-width="5" stroke-linecap="round"/>
  <path d="M490 355q-17 2-22 17t12 25l25-7 8-28z" fill="#fffaf0" stroke="#8497ad" stroke-width="4"/>
  <path d="M800 324q19-6 28 8t-3 29l-25 8-16-24z" fill="#fffaf0" stroke="#8497ad" stroke-width="4"/>
  <path d="M470 370l16 8m326-43 14 11" stroke="#ed9a64" stroke-width="5" stroke-linecap="round"/>

  <!-- Legs behind the torso -->
  <path d="M610 488Q599 526 578 549L552 575" fill="none" stroke="#75899f" stroke-width="51" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M610 486Q599 524 578 547L552 573" fill="none" stroke="url(#suit)" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M678 487Q694 521 723 536L754 553" fill="none" stroke="#75899f" stroke-width="51" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M678 485Q694 519 723 534L754 551" fill="none" stroke="url(#suit)" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M580 538l22 16m118-20-14 21" stroke="#96a9bc" stroke-width="5" stroke-linecap="round"/>

  <!-- Boots -->
  <path d="M539 560q15 4 26 18l-3 21q-1 9-12 8l-42-4q-12-1-9-12l8-20q5-14 18-13z" fill="url(#suit)" stroke="#8395aa" stroke-width="4"/>
  <path d="M507 597q21 8 53 5l-1 11q-1 8-12 8l-39-4q-12-1-10-10z" fill="#f5a25d"/>
  <path d="M741 539q18-2 28 12l10 22q5 11-7 15l-39 10q-11 3-14-7l-3-20q-2-15 10-24z" fill="url(#suit)" stroke="#8395aa" stroke-width="4"/>
  <path d="M723 585q23-4 53-17l5 10q4 8-7 12l-38 11q-12 4-15-6z" fill="#f5a25d"/>

  <!-- Main suit -->
  <path d="M585 384q5-30 37-35h48q34 6 39 38l12 94q2 31-27 41-47 17-95 0-30-10-27-40z" fill="#7e91a6" opacity=".68"/>
  <path d="M586 379q5-29 36-34h47q34 5 39 37l12 92q2 30-27 40-45 16-92 0-30-10-27-39z" fill="url(#suit)" stroke="#f9fbf7" stroke-width="5"/>
  <path d="M593 421q53 13 107-1l5 48q1 21-23 29-36 11-72-1-22-8-20-29z" fill="#dce5eb" opacity=".65"/>
  <path d="M604 369q31 17 68 0" fill="none" stroke="#a7b7c5" stroke-width="5"/>
  <path d="M596 470q49 17 104 0" fill="none" stroke="#97aabd" stroke-width="5"/>
  <!-- Chest control panel -->
  <path d="M617 399q0-9 10-9h48q10 0 10 10v34q0 9-10 9h-48q-10 0-10-9z" fill="#344765" stroke="#fff4df" stroke-width="4"/>
  <path d="M628 406h29" stroke="#6ee1d0" stroke-width="4" stroke-linecap="round"/>
  <circle cx="632" cy="423" r="4" fill="#ffbd69"/><circle cx="646" cy="423" r="4" fill="#f47763"/>
  <path d="M658 420h16" stroke="#d8e9ef" stroke-width="3" stroke-linecap="round"/>
  <circle cx="641" cy="470" r="16" fill="#fff8ec" stroke="#a3b4c4" stroke-width="4"/>
  <path d="M641 458l3 8 9 1-7 5 2 9-7-5-8 5 3-9-7-5 9-1z" fill="#f39a60"/>
  <!-- Backpack glimpse -->
  <path d="M704 386q24 4 27 24l5 53q-1 13-15 13l-9-2-10-76z" fill="#8fa1b4" stroke="#f7f8f2" stroke-width="4"/>
  <path d="M720 403l12 4v14l-12-3z" fill="#55c9c2"/>

  <!-- Helmet -->
  <circle cx="645" cy="280" r="111" fill="#71859a" opacity=".5"/>
  <circle cx="645" cy="276" r="108" fill="url(#suit)" stroke="#fffdf4" stroke-width="8"/>
  <circle cx="645" cy="280" r="94" fill="#7f91a8" stroke="#a5b5c5" stroke-width="5"/>
  <ellipse cx="645" cy="280" rx="86" ry="82" fill="url(#visor)"/>
  <g clip-path="url(#glass)">
    <!-- Cat ears and head -->
    <path d="M597 270l3-45q1-7 8-3l30 25q12-5 27 0l29-25q7-5 9 4l2 46q0 52-51 59-54-4-57-61z" fill="#e6a65c"/>
    <path d="M606 240l2-12 20 17q-8 4-14 12zM671 245l20-18 1 15-9 16q-6-8-12-13z" fill="#f08d78"/>
    <path d="M605 274q2-37 39-40 36 1 42 39-4 42-42 47-37-4-39-46z" fill="#efa95c"/>
    <path d="M620 277q7-8 14 0" fill="none" stroke="#593b37" stroke-width="4" stroke-linecap="round"/>
    <path d="M656 277q7-8 14 0" fill="none" stroke="#593b37" stroke-width="4" stroke-linecap="round"/>
    <ellipse cx="627" cy="278" rx="2.3" ry="3.2" fill="#1c2438"/><ellipse cx="663" cy="278" rx="2.3" ry="3.2" fill="#1c2438"/>
    <path d="M641 289l5 4-5 4-5-4z" fill="#d87672"/>
    <path d="M641 297q-9 10-17 1m17-1q9 10 17 1" fill="none" stroke="#69433c" stroke-width="2.5" stroke-linecap="round"/>
    <path d="M610 290l-25-5m27 12-25 4m85-11 25-5m-26 12 25 4" stroke="#fff0dc" stroke-width="2" stroke-linecap="round"/>
    <path d="M596 253q22-33 57-31" fill="none" stroke="#fff" stroke-width="8" opacity=".16"/>
    <path d="M689 310l25 24h-47z" fill="#9be4ed" opacity=".12"/>
  </g>
  <!-- Helmet rim highlights and fittings -->
  <path d="M572 208a98 98 0 0 1 101-29" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" opacity=".82"/>
  <path d="M710 187a99 99 0 0 1 34 39" fill="none" stroke="#b8c8d7" stroke-width="4" stroke-linecap="round"/>
  <path d="M553 277q-14 5-14 20t14 19l8-8v-23zM737 268q16 7 15 22t-15 21l-8-9v-26z" fill="#d5e0e8" stroke="#fffdf4" stroke-width="4"/>
  <circle cx="548" cy="296" r="5" fill="#f3a36a"/><circle cx="742" cy="293" r="5" fill="#55c9c2"/>
  <path d="M609 370q34 14 70 0" fill="none" stroke="#95a7b8" stroke-width="9" stroke-linecap="round"/>
  <path d="M611 365q32 11 66 0" fill="none" stroke="#fff9ea" stroke-width="6" stroke-linecap="round"/>

  <!-- Ground foreground lip -->
  <path d="M0 686q128-39 262-3t247 7q142-32 257 5t258-3q137-35 256 3v105H0z" fill="#8999ad" opacity=".4"/>
  <path d="M0 799h1280" stroke="#e1ded6" stroke-width="3" opacity=".3"/>
</svg>

Reasoning trace (2,110 tokens)

**Calculating foot positioning**

I'm figuring out the foot center coordinates, specifically x at 540 and 757, and y at 601 and 579. I need to keep in mind that with the board angle slope of -0.13, the y values will correspond to 615 for 540 and 590 for 757. It seems that aligning the boot centers is key here. Let’s make sure the adjustments reflect the correct angles to ensure everything is lined up properly!**Visualizing skateboard design**

I think the skateboard should be positioned under the character's feet, making it a focal point. I’ll start by rendering the skateboard first before adding the legs and character. I also want to ensure the ground is behind the board, creating a sense of space. The skateboard should have wheels illustrated to suggest motion — I can imagine a swoosh effect to emphasize the movement! This all sounds like a fun challenge to put together!**Crafting a character silhouette**

I’m working on creating a character silhouette with a specific order: putting the suit arms and helmet after the torso — maybe the head follows the torso. I imagine the arms positioned behind the suit and legs behind it as well. The helmet should sit on top. I think I’ll focus on using SVG for this design. It's exciting to craft something visually appealing!