Skateboarding astronaut catOne-line

GPT-6 Luna Pro

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 4 s
Cost: $0.0068
Output tokens: 11,180
Spent thinking: 2,140 tokens
Speed: 1842.8 tok/s
Console errors: 0

First token after: 58.1 s
First visible text after: 1 min 4 s
Prompt tokens: 12,919
Code size: 10.9 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna-pro
Reasoning sent: model default
Max output: 128,000 tokens
Generated: Nov 13, 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">Moonbound — an astronaut cat on a skateboard</title>
  <desc id="desc">A cheerful cat in a white spacesuit catches air on a skateboard above the lunar surface, beneath a starry sky.</desc>
  <defs>
    <linearGradient id="sky" x2="0" y2="1">
      <stop stop-color="#101b3d"/>
      <stop offset=".62" stop-color="#243563"/>
      <stop offset="1" stop-color="#59688d"/>
    </linearGradient>
    <linearGradient id="ground" x2=".3" y2="1">
      <stop stop-color="#c7c9d6"/>
      <stop offset="1" stop-color="#737d9d"/>
    </linearGradient>
    <linearGradient id="suit" x2=".9" y2="1">
      <stop stop-color="#fffefa"/>
      <stop offset=".55" stop-color="#dfe7f0"/>
      <stop offset="1" stop-color="#aab8cc"/>
    </linearGradient>
    <linearGradient id="visor" x2="1" y2="1">
      <stop stop-color="#a8e7ff" stop-opacity=".36"/>
      <stop offset=".55" stop-color="#5ba9d7" stop-opacity=".1"/>
      <stop offset="1" stop-color="#fff" stop-opacity=".24"/>
    </linearGradient>
    <linearGradient id="deck" x2="0" y2="1">
      <stop stop-color="#ffcf79"/>
      <stop offset="1" stop-color="#e88958"/>
    </linearGradient>
    <radialGradient id="moonGlow">
      <stop stop-color="#c6e5ff" stop-opacity=".22"/>
      <stop offset="1" stop-color="#c6e5ff" stop-opacity="0"/>
    </radialGradient>
    <filter id="softGlow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="12"/>
    </filter>
    <filter id="shadow" x="-30%" y="-30%" width="160%" height="180%">
      <feGaussianBlur stdDeviation="7"/>
    </filter>
  </defs>

  <!-- Space -->
  <rect width="1280" height="800" fill="url(#sky)"/>
  <circle cx="640" cy="392" r="360" fill="url(#moonGlow)"/>
  <g fill="#f7f5df">
    <circle cx="71" cy="92" r="2"/><circle cx="145" cy="168" r="1.7"/>
    <circle cx="271" cy="66" r="2.3"/><circle cx="358" cy="152" r="1.5"/>
    <circle cx="467" cy="85" r="1.8"/><circle cx="548" cy="137" r="1.3"/>
    <circle cx="756" cy="73" r="2"/><circle cx="852" cy="122" r="1.5"/>
    <circle cx="963" cy="68" r="2.2"/><circle cx="1104" cy="122" r="1.5"/>
    <circle cx="1208" cy="73" r="2"/><circle cx="1166" cy="237" r="1.6"/>
    <circle cx="1031" cy="190" r="2"/><circle cx="937" cy="250" r="1.3"/>
    <circle cx="334" cy="250" r="1.8"/><circle cx="206" cy="303" r="1.3"/>
    <circle cx="81" cy="280" r="2"/><circle cx="1080" cy="325" r="1.5"/>
  </g>
  <g fill="#ffd987">
    <path d="M218 101l3 8 8 3-8 3-3 8-3-8-8-3 8-3z"/>
    <path d="M906 150l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/>
    <path d="M1138 282l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/>
    <path d="M406 228l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/>
  </g>

  <!-- Earth -->
  <g>
    <circle cx="185" cy="221" r="63" fill="#75bde2" opacity=".17" filter="url(#softGlow)"/>
    <circle cx="185" cy="221" r="46" fill="#4386b7"/>
    <path d="M151 199q17-20 37-12l8 11 18 4 10 16-12 5-8 18-21 8-9-13-19-6-11-17z" fill="#8ecbaf"/>
    <path d="M178 175q19-7 34 1l-5 9-17 4zM210 236l17-4 2 11-17 9z" fill="#8ecbaf"/>
    <circle cx="185" cy="221" r="46" fill="none" stroke="#b3eaff" stroke-opacity=".48" stroke-width="2"/>
    <text x="185" y="289" text-anchor="middle" fill="#b8d7ea" font-family="Arial,sans-serif" font-size="11" letter-spacing="3">HOME</text>
  </g>

  <!-- Distant lunar ridge -->
  <path d="M0 601q118-64 235-22 91 31 174-13 107-57 221-15 120 44 221-7 122-61 243-13 93 36 186-13v282H0z" fill="#8d98b2" opacity=".72"/>
  <path d="M0 666q137-54 258-6 127 50 247 4 121-47 253-7 145 43 262-3 124-48 260 0v146H0z" fill="url(#ground)"/>
  <g fill="#707b99" opacity=".6">
    <ellipse cx="184" cy="703" rx="51" ry="10"/><ellipse cx="1040" cy="685" rx="68" ry="12"/>
    <ellipse cx="921" cy="747" rx="37" ry="8"/><ellipse cx="337" cy="757" rx="74" ry="11"/>
  </g>
  <g fill="#dfe2e9" opacity=".45">
    <circle cx="96" cy="685" r="3"/><circle cx="280" cy="739" r="4"/>
    <circle cx="1124" cy="719" r="3"/><circle cx="763" cy="699" r="3"/>
    <circle cx="1005" cy="758" r="4"/>
  </g>

  <!-- Dust streaks and airborne shadow -->
  <path d="M345 573q100-49 186-42M835 478q82-36 154-22M406 524q62-25 102-22" fill="none" stroke="#b9d8ed" stroke-opacity=".45" stroke-width="3" stroke-linecap="round"/>
  <ellipse cx="657" cy="684" rx="241" ry="22" fill="#243352" opacity=".28" filter="url(#shadow)"/>

  <!-- Skateboard, tilted in mid-air -->
  <g>
    <path d="M425 624Q640 579 867 539L878 561Q650 608 435 650Z" fill="#5c4155" stroke="#342c46" stroke-width="5"/>
    <path d="M433 618Q650 572 865 535L868 549Q650 594 430 635Z" fill="url(#deck)" stroke="#ffe0a2" stroke-width="3"/>
    <path d="M486 616l16 4 6 9-17 4zM811 557l17-5 5 8-17 6z" fill="#ed9160"/>
    <path d="M512 631l-7 31M800 578l8 30" stroke="#626d82" stroke-width="8" stroke-linecap="round"/>
    <path d="M487 659l42-8M779 609l44-8" stroke="#d8e0ea" stroke-width="8" stroke-linecap="round"/>
    <g fill="#26344d" stroke="#d7e0ec" stroke-width="4">
      <circle cx="496" cy="667" r="11"/><circle cx="530" cy="661" r="11"/>
      <circle cx="780" cy="616" r="11"/><circle cx="816" cy="610" r="11"/>
    </g>
    <g fill="#f5c36f">
      <circle cx="496" cy="667" r="3"/><circle cx="530" cy="661" r="3"/>
      <circle cx="780" cy="616" r="3"/><circle cx="816" cy="610" r="3"/>
    </g>
    <path d="M574 609l9-2 3 16-9 2zM623 599l9-2 3 16-9 2zM672 589l9-2 3 16-9 2zM721 579l9-2 3 16-9 2z" fill="#fff0cb" opacity=".85"/>
  </g>

  <!-- Suit limbs behind body -->
  <g stroke="#8695aa" stroke-width="3" stroke-linejoin="round">
    <!-- rear arm -->
    <path d="M572 382Q521 362 476 337L438 361Q425 371 433 388L452 402Q466 410 478 396L518 416Z" fill="url(#suit)"/>
    <path d="M453 351l-17 23 22 23 19-24z" fill="#ef9d68"/>
    <path d="M440 360l20 22" fill="none" stroke="#fff" stroke-width="4"/>
    <!-- raised arm -->
    <path d="M699 371Q754 351 789 309L812 267Q818 249 802 243L785 251Q777 255 779 269L763 292Q732 309 686 321Z" fill="url(#suit)"/>
    <path d="M779 269l29 9 13-24-22-15-17 17z" fill="#ef9d68"/>
    <path d="M784 258l23 12" fill="none" stroke="#fff" stroke-width="4"/>
    <!-- left leg -->
    <path d="M596 453Q580 500 548 548L511 564Q494 572 500 590L514 603Q525 608 539 596L578 578Q617 541 643 489Z" fill="url(#suit)"/>
    <path d="M515 564l35 17-12 23-36-15z" fill="#ef9d68"/>
    <!-- right leg -->
    <path d="M664 457Q692 497 732 526L776 531Q796 534 797 552L787 570Q780 578 763 569L716 558Q665 531 637 488Z" fill="url(#suit)"/>
    <path d="M746 524l42 2 1 27-43-4z" fill="#ef9d68"/>
  </g>

  <!-- Boots -->
  <g stroke="#77869d" stroke-width="3" stroke-linejoin="round">
    <path d="M499 580q13-15 30-10l17 16 26 7q12 4 10 17l-5 10-81-5q-14-1-14-13z" fill="#f5f4ed"/>
    <path d="M493 610q38 8 89 3l-3 12q-2 8-12 8l-69-4q-12-2-12-10z" fill="#e98f60"/>
    <path d="M753 537q12-17 31-10l15 17 25 6q12 3 10 17l-6 10-79-7q-14-1-13-13z" fill="#f5f4ed"/>
    <path d="M739 567q41 9 91 5l-4 12q-3 8-13 7l-68-6q-12-2-11-10z" fill="#e98f60"/>
    <path d="M514 590l23 3M770 548l24 3" fill="none" stroke="#b7c4d4" stroke-width="4"/>
  </g>

  <!-- Astronaut torso -->
  <g stroke="#8392a8" stroke-width="4" stroke-linejoin="round">
    <path d="M572 337Q596 322 623 328L684 338Q712 344 716 373L706 449Q702 473 676 481L612 474Q585 470 579 449L560 381Q555 356 572 337Z" fill="url(#suit)"/>
    <path d="M573 365Q622 381 704 361" fill="none" stroke="#c0cbd8" stroke-width="5"/>
    <path d="M590 400Q635 413 693 396L688 447Q649 465 608 447Z" fill="#e7edf3" stroke="#b3c0d0" stroke-width="3"/>
    <rect x="613" y="399" width="53" height="38" rx="8" fill="#253653" stroke="#7b8ba5" stroke-width="3"/>
    <rect x="620" y="405" width="39" height="24" rx="4" fill="#82d1db"/>
    <path d="M626 421l7-8 6 5 8-9" fill="none" stroke="#fff3b6" stroke-width="3"/>
    <circle cx="678" cy="414" r="5" fill="#f1a36d" stroke="none"/>
    <path d="M578 349l-11 25 20 9 14-28zM690 352l23 10-8 24-25-8z" fill="#e7edf3"/>
    <path d="M601 461l-4 18M683 461l7 18" fill="none" stroke="#ef9d68" stroke-width="8"/>
    <path d="M592 350q41 12 100 4" fill="none" stroke="#fff" stroke-width="5" opacity=".8"/>
  </g>

  <!-- Helmet and cat -->
  <g>
    <!-- helmet shell with cat-ear silhouette -->
    <path d="M526 276Q518 246 532 218L548 170Q552 158 564 165L594 194Q635 176 676 193L706 165Q716 157 721 171L738 220Q754 246 749 282Q743 345 686 365L582 357Q534 340 526 276Z"
          fill="url(#suit)" stroke="#8291a7" stroke-width="5" stroke-linejoin="round"/>
    <path d="M553 221L563 180 592 207M682 206l31-27 12 43" fill="none" stroke="#f5f6f3" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M542 263Q544 205 600 192Q661 179 710 213Q740 237 735 287Q729 336 683 350L587 344Q546 325 542 263Z"
          fill="url(#visor)" stroke="#b4c6d9" stroke-width="4"/>
    <!-- ears and feline face -->
    <path d="M584 255L590 216Q592 208 600 214L622 235Q638 228 655 235L677 214Q684 209 687 218L692 257Q688 292 661 305L608 302Q584 289 584 255Z"
          fill="#d9936d" stroke="#895d58" stroke-width="3" stroke-linejoin="round"/>
    <path d="M597 229l3-7 13 13M673 230l8-8 1 14" fill="none" stroke="#f3c0a2" stroke-width="4"/>
    <path d="M591 263q12-13 26 0M654 263q13-13 25 0" fill="none" stroke="#423b4b" stroke-width="5" stroke-linecap="round"/>
    <ellipse cx="608" cy="264" rx="3" ry="5" fill="#8ad4c7"/>
    <ellipse cx="666" cy="264" rx="3" ry="5" fill="#8ad4c7"/>
    <path d="M631 273q7-7 14 0l-7 7z" fill="#573e49"/>
    <path d="M638 280q-2 10-12 9M638 280q3 10 13 9" fill="none" stroke="#61424a" stroke-width="2.5" stroke-linecap="round"/>
    <path d="M597 276l-22-5M597 283l-23 5M679 276l22-5M679 283l23 5" fill="none" stroke="#f6d9c1" stroke-width="2"/>
    <!-- visor reflections -->
    <path d="M558 245q12-27 29-36M704 226q13 14 17 31" fill="none" stroke="#fff" stroke-opacity=".7" stroke-width="7" stroke-linecap="round"/>
    <path d="M552 299q7 18 20 27" fill="none" stroke="#fff" stroke-opacity=".4" stroke-width="4" stroke-linecap="round"/>
    <!-- helmet rim and fittings -->
    <path d="M548 319Q573 352 619 356L681 360Q718 347 733 317" fill="none" stroke="#f9fbf8" stroke-width="8"/>
    <circle cx="545" cy="296" r="9" fill="#ef9d68" stroke="#fff" stroke-width="3"/>
    <circle cx="731" cy="296" r="9" fill="#ef9d68" stroke="#fff" stroke-width="3"/>
  </g>

  <!-- Poster lettering -->
  <g font-family="Arial, Helvetica, sans-serif">
    <text x="72" y="450" fill="#f7f1df" font-size="15" font-weight="700" letter-spacing="5">THE FAR OUT CLUB</text>
    <path d="M72 466h118" stroke="#f0bd78" stroke-width="2"/>
    <text x="72" y="503" fill="#d6deee" font-size="13" letter-spacing="2">LUNAR SKATE SERIES</text>
    <text x="1208" y="448" text-anchor="end" fill="#f6f2e7" font-size="13" letter-spacing="3">MOON / 01</text>
    <text x="1208" y="472" text-anchor="end" fill="#b9c8dd" font-size="11" letter-spacing="2">GRAVITY OPTIONAL</text>
    <text x="640" y="766" text-anchor="middle" fill="#eff0e9" font-size="11" letter-spacing="5" opacity=".8">ONE SMALL PAW • ONE GIANT LEAP</text>
  </g>
</svg>

Reasoning trace (2,140 tokens)

**Designing an astronaut cat**

I'm visualizing the cat suit's torso and its rotation, with arms extended and the legs positioned strategically. The board's angle needs to be just right, with boots on top and a human-like pose. I want to include details like gradients and a glow effect in the SVG. The scene features a moon horizon and Earth, layered properly with the stars in the background. I need to plan the order of elements carefully to avoid confusion. I'll adjust the graphics accordingly!**Creating the cat helmet design**

I'm picturing the pose with the left arm extended back and the right one raised sideways. The cat's head will be inside the helmet, which has a large outer shape and silhouettes of ears at the top. I want to use distinct fills and strokes to give the suit some highlights, and the helmet should have glass elements. It's important that the helmet isn’t too transparent while highlighting the cat's features like its eyes and whiskers. Let's bring this design to life!**Designing a cat visor**

I need to think about a visor for the cat's head. It might need careful layering so that the front has glass with a 0.15 opacity to let some light through but still maintain some shine shapes. I'll want to keep the filters minimal, maybe focusing on creating star designs. This way, the whole look can be cute and functional! Let’s see how I can make it all come together.