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: 2 min 19 s
Cost: $0.0052
Output tokens: 10,427
Spent thinking: 4,077 tokens
Speed: 118.9 tok/s
Console errors: 0

First token after: 51.4 s
First visible text after: 1 min 8 s
Prompt tokens: 347
Code size: 15.6 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"xhigh"}
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 · 273 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-and-white cat in a spacesuit rides a skateboard across a softly lit lunar landscape, with Earth and stars overhead.</desc>

  <defs>
    <linearGradient id="space" x2="0" y2="1">
      <stop stop-color="#101a3b"/>
      <stop offset=".57" stop-color="#243b69"/>
      <stop offset="1" stop-color="#50658c"/>
    </linearGradient>
    <radialGradient id="halo">
      <stop stop-color="#a5eaff" stop-opacity=".3"/>
      <stop offset=".55" stop-color="#83bbf4" stop-opacity=".12"/>
      <stop offset="1" stop-color="#759ce4" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="moon" x2=".12" y2="1">
      <stop stop-color="#e1e6e6"/>
      <stop offset=".45" stop-color="#b7c2cb"/>
      <stop offset="1" stop-color="#818fa2"/>
    </linearGradient>
    <linearGradient id="ridge" x2="0" y2="1">
      <stop stop-color="#8797ae"/>
      <stop offset="1" stop-color="#586b89"/>
    </linearGradient>
    <linearGradient id="earth" x2=".8" y2="1">
      <stop stop-color="#75e4f4"/>
      <stop offset=".55" stop-color="#3989d0"/>
      <stop offset="1" stop-color="#294a9b"/>
    </linearGradient>
    <linearGradient id="visor" x2=".8" y2="1">
      <stop stop-color="#e9ffff" stop-opacity=".25"/>
      <stop offset=".5" stop-color="#8fe4ff" stop-opacity=".08"/>
      <stop offset="1" stop-color="#236cbb" stop-opacity=".25"/>
    </linearGradient>
    <linearGradient id="suit" x2=".9" y2="1">
      <stop stop-color="#fffefa"/>
      <stop offset=".55" stop-color="#e3edf1"/>
      <stop offset="1" stop-color="#b9cbd5"/>
    </linearGradient>
    <linearGradient id="board" x2="0" y2="1">
      <stop stop-color="#ffad59"/>
      <stop offset=".48" stop-color="#ff7951"/>
      <stop offset="1" stop-color="#d95151"/>
    </linearGradient>
    <linearGradient id="boot" x2="0" y2="1">
      <stop stop-color="#f9ffff"/>
      <stop offset="1" stop-color="#c1d1db"/>
    </linearGradient>
    <filter id="softGlow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="15"/>
    </filter>
    <filter id="shadow" x="-50%" y="-100%" width="200%" height="300%">
      <feGaussianBlur stdDeviation="8"/>
    </filter>
    <clipPath id="visorClip">
      <circle cx="620" cy="293" r="84"/>
    </clipPath>
  </defs>

  <!-- Deep space -->
  <rect width="1280" height="800" fill="url(#space)"/>
  <ellipse cx="628" cy="390" rx="408" ry="330" fill="url(#halo)"/>
  <circle cx="632" cy="382" r="260" fill="#8acdf8" opacity=".045" filter="url(#softGlow)"/>

  <!-- Stars -->
  <g fill="#f4fbff">
    <circle cx="76" cy="191" r="2"/><circle cx="144" cy="304" r="1.7"/>
    <circle cx="208" cy="144" r="2.3"/><circle cx="275" cy="242" r="1.5"/>
    <circle cx="352" cy="101" r="1.8"/><circle cx="428" cy="185" r="1.5"/>
    <circle cx="487" cy="113" r="2"/><circle cx="562" cy="171" r="1.4"/>
    <circle cx="726" cy="130" r="1.6"/><circle cx="784" cy="206" r="2"/>
    <circle cx="848" cy="102" r="1.5"/><circle cx="907" cy="279" r="1.7"/>
    <circle cx="1117" cy="302" r="1.7"/><circle cx="1195" cy="211" r="2"/>
    <circle cx="1222" cy="354" r="1.5"/><circle cx="103" cy="401" r="1.4"/>
    <circle cx="315" cy="366" r="1.7"/><circle cx="945" cy="130" r="1.5"/>
    <circle cx="1115" cy="88" r="1.5"/><circle cx="1165" cy="416" r="1.8"/>
  </g>
  <g stroke="#dff7ff" stroke-width="2" stroke-linecap="round" opacity=".83">
    <path d="M104 104v14m-7-7h14"/><path d="M337 300v12m-6-6h12"/>
    <path d="M872 178v14m-7-7h14"/><path d="M1172 132v12m-6-6h12"/>
    <path d="M1012 365v10m-5-5h10"/>
  </g>
  <g fill="#b1e7ff" opacity=".8">
    <path d="M253 91l3 8 8 3-8 3-3 8-3-8-8-3 8-3z"/>
    <path d="M923 338l2.5 7 7 2.5-7 2.5-2.5 7-2.5-7-7-2.5 7-2.5z"/>
  </g>

  <!-- Earth -->
  <circle cx="1058" cy="182" r="70" fill="#92ecff" opacity=".23"/>
  <circle cx="1058" cy="182" r="62" fill="url(#earth)" stroke="#b4f1ff" stroke-width="2"/>
  <path d="M1021 144c11-12 22-10 30-5l-4 14 11 9-9 12-15-3-10 9-13-8 5-14-8-7z
           M1074 195l15-8 17 7 3 14-14 9-3 17-14 8-7-15 5-13-10-8z
           M1094 148l12 3 8 12-11 8-12-9z"
        fill="#7dd1c0" opacity=".8"/>
  <path d="M1016 143c23-25 56-30 82-12" fill="none" stroke="#e6fbff" stroke-width="5" opacity=".65"/>

  <!-- Distant lunar ridges -->
  <path d="M0 557 Q116 513 232 541T450 526Q550 498 663 540T873 526Q986 480 1080 520T1280 495V800H0Z" fill="url(#ridge)"/>
  <path d="M0 584Q146 544 273 569T516 546Q652 523 760 559T997 542Q1123 505 1280 535V800H0Z" fill="#7889a1" opacity=".72"/>

  <!-- Foreground moon -->
  <path d="M0 583Q127 558 251 584T491 560Q622 535 754 572T1018 551Q1142 519 1280 543V800H0Z" fill="url(#moon)"/>
  <path d="M0 627Q157 585 300 621T580 593Q734 568 881 608T1138 581Q1215 567 1280 576V800H0Z" fill="#c5ced2" opacity=".46"/>

  <!-- Moon craters and surface marks -->
  <g opacity=".45">
    <ellipse cx="179" cy="659" rx="73" ry="17" fill="#7c8c9e"/>
    <ellipse cx="179" cy="654" rx="70" ry="13" fill="#dce2e1"/>
    <ellipse cx="179" cy="655" rx="44" ry="7" fill="#9ba9b2" opacity=".65"/>
    <ellipse cx="1032" cy="687" rx="98" ry="22" fill="#8291a0"/>
    <ellipse cx="1032" cy="680" rx="92" ry="17" fill="#d6dcda"/>
    <ellipse cx="1032" cy="682" rx="60" ry="10" fill="#a3b0b6"/>
    <ellipse cx="1166" cy="602" rx="39" ry="10" fill="#e8ece9" opacity=".8"/>
    <path d="M75 735q42-16 80 0m118 26q35-11 65 1m786-22q39-13 81-2"
          fill="none" stroke="#f1f5f2" stroke-width="3" stroke-linecap="round"/>
  </g>
  <g fill="#718299" opacity=".42">
    <circle cx="92" cy="618" r="3"/><circle cx="290" cy="691" r="4"/>
    <circle cx="369" cy="612" r="2.5"/><circle cx="934" cy="634" r="3"/>
    <circle cx="1189" cy="729" r="4"/><circle cx="860" cy="723" r="2.5"/>
    <circle cx="324" cy="754" r="2"/><circle cx="1110" cy="633" r="2"/>
  </g>

  <!-- Small poster-like caption -->
  <g font-family="Arial, Helvetica, sans-serif" fill="#f0f8ff">
    <text x="72" y="83" font-size="13" letter-spacing="4" opacity=".78">THE LUNAR SKATE CLUB</text>
    <path d="M72 99h110" stroke="#83e5ee" stroke-width="2"/>
    <text x="72" y="129" font-size="22" font-weight="700" letter-spacing="1.5">MOON RIDE</text>
    <text x="73" y="151" font-size="11" letter-spacing="2.5" opacity=".7">ZERO GRAVITY. FULL SEND.</text>
  </g>

  <!-- Dust and motion trails -->
  <g fill="none" stroke="#f3fbff" stroke-linecap="round" opacity=".72">
    <path d="M288 546q65-20 130-8" stroke-width="3"/>
    <path d="M321 563q49-14 85-8" stroke-width="2"/>
    <path d="M376 583q30-8 55-4" stroke-width="2"/>
  </g>
  <g fill="#f6fbf7" opacity=".78">
    <circle cx="338" cy="604" r="4"/><circle cx="375" cy="582" r="2.5"/>
    <circle cx="400" cy="614" r="3"/><circle cx="432" cy="592" r="2"/>
    <circle cx="379" cy="626" r="1.8"/>
  </g>

  <!-- Rider's ground shadow -->
  <ellipse cx="652" cy="681" rx="259" ry="29" fill="#33465e" opacity=".3" filter="url(#shadow)"/>

  <!-- Skateboard wheels and trucks -->
  <g stroke="#24364f" stroke-linejoin="round" stroke-linecap="round">
    <path d="M500 647l-7 24m18-27 6 22M797 611l-6 20m18-23 7 18"
          fill="none" stroke="#53647a" stroke-width="8"/>
    <path d="M487 667q14-10 30-8m-18 13q15-9 31-7M783 627q14-9 30-7m-20 13q14-9 29-7"
          fill="none" stroke="#d7e1e5" stroke-width="5"/>
    <circle cx="494" cy="678" r="13" fill="#26364e" stroke-width="3"/>
    <circle cx="525" cy="672" r="13" fill="#26364e" stroke-width="3"/>
    <circle cx="791" cy="637" r="13" fill="#26364e" stroke-width="3"/>
    <circle cx="821" cy="631" r="13" fill="#26364e" stroke-width="3"/>
    <circle cx="494" cy="678" r="5" fill="#9ce5ed" stroke="none"/>
    <circle cx="525" cy="672" r="5" fill="#9ce5ed" stroke="none"/>
    <circle cx="791" cy="637" r="5" fill="#9ce5ed" stroke="none"/>
    <circle cx="821" cy="631" r="5" fill="#9ce5ed" stroke="none"/>
  </g>

  <!-- Skateboard deck -->
  <path d="M411 646Q637 602 881 585L896 599Q662 646 424 675Q414 671 411 660Z"
        fill="url(#board)" stroke="#263850" stroke-width="6" stroke-linejoin="round"/>
  <path d="M425 651Q644 612 876 594" fill="none" stroke="#ffd181" stroke-width="4" opacity=".85"/>
  <path d="M445 660Q659 621 859 601" fill="none" stroke="#ec5d51" stroke-width="3" opacity=".7"/>
  <g fill="#fff4dd" opacity=".9">
    <circle cx="477" cy="646" r="3"/><circle cx="493" cy="643" r="3"/>
    <circle cx="509" cy="640" r="3"/><circle cx="525" cy="637" r="3"/>
    <circle cx="541" cy="634" r="3"/><circle cx="557" cy="631" r="3"/>
    <circle cx="573" cy="628" r="3"/><circle cx="589" cy="625" r="3"/>
  </g>
  <text x="647" y="626" transform="rotate(-10 647 626)" font-family="Arial, sans-serif"
        font-weight="700" font-size="14" letter-spacing="3" fill="#fff6e4">LUNA</text>

  <!-- Suit backpack -->
  <path d="M663 413Q686 405 701 422L714 483Q713 504 694 511L676 504Z"
        fill="#b9ccd5" stroke="#253750" stroke-width="6" stroke-linejoin="round"/>
  <path d="M683 427l18 2 8 37-21 5z" fill="#e8f0ef" stroke="#7f96a7" stroke-width="3"/>
  <path d="M690 443l16-1m-14 10 17-1" stroke="#7a91a4" stroke-width="3" stroke-linecap="round"/>
  <circle cx="702" cy="487" r="5" fill="#ff9a5d"/>

  <!-- Left balancing arm -->
  <path d="M571 407Q551 395 525 390L480 384Q457 383 441 394L415 411Q407 418 414 425Q420 431 427 426L448 412L478 414Q514 449 560 456L586 431Z"
        fill="url(#suit)" stroke="#263750" stroke-width="7" stroke-linejoin="round"/>
  <path d="M468 396Q462 407 461 418" fill="none" stroke="#9aafbd" stroke-width="5" stroke-linecap="round"/>
  <path d="M419 408Q431 398 444 398L455 409 442 426Q432 432 422 426Z"
        fill="#f7fbf8" stroke="#263750" stroke-width="6" stroke-linejoin="round"/>
  <path d="M423 411l10-5m-8 12 10-6" stroke="#9aafbd" stroke-width="2.5" stroke-linecap="round"/>

  <!-- Right balancing arm -->
  <path d="M671 406Q696 390 716 374L754 359Q774 352 790 363L817 382Q825 389 819 397Q814 404 806 398L783 384L757 391Q731 431 690 454L665 433Z"
        fill="url(#suit)" stroke="#263750" stroke-width="7" stroke-linejoin="round"/>
  <path d="M744 369Q750 379 757 392" fill="none" stroke="#9aafbd" stroke-width="5" stroke-linecap="round"/>
  <path d="M785 362Q799 356 809 366L821 382Q826 392 817 398L806 401 790 385Z"
        fill="#f7fbf8" stroke="#263750" stroke-width="6" stroke-linejoin="round"/>
  <path d="M802 369l10 10m-17-5 10 11" stroke="#9aafbd" stroke-width="2.5" stroke-linecap="round"/>

  <!-- Bent legs -->
  <path d="M589 508Q569 518 547 540L524 560Q515 570 522 581L542 598Q552 603 560 592L582 571Q600 559 623 547L632 522Z"
        fill="url(#suit)" stroke="#263750" stroke-width="7" stroke-linejoin="round"/>
  <path d="M652 511Q675 519 695 539L710 554Q720 565 713 576L696 592Q686 598 677 588L657 570Q640 555 620 547L625 521Z"
        fill="url(#suit)" stroke="#263750" stroke-width="7" stroke-linejoin="round"/>
  <path d="M528 566Q540 566 550 577M689 559q12 0 20 10" fill="none" stroke="#94aab7" stroke-width="4" stroke-linecap="round"/>
  <path d="M540 565l13 12m-9-20 13 12M693 553l13 13m-8-21 13 13"
        fill="none" stroke="#d9e4e7" stroke-width="3" stroke-linecap="round"/>

  <!-- Suit torso -->
  <path d="M566 405Q581 386 607 382L641 383Q667 390 682 410L689 462L681 510Q674 539 643 553L616 560Q584 551 563 529Q551 512 550 482L552 439Z"
        fill="url(#suit)" stroke="#263750" stroke-width="7" stroke-linejoin="round"/>
  <path d="M574 417Q588 403 606 400m48 5q12 8 17 21" fill="none" stroke="#fff" stroke-width="5" opacity=".9" stroke-linecap="round"/>
  <path d="M618 399v20" stroke="#8ea4b1" stroke-width="4" stroke-linecap="round"/>
  <path d="M611 419h49v62h-49z" rx="8" fill="#738fa4" stroke="#263750" stroke-width="5"/>
  <rect x="619" y="427" width="33" height="28" rx="5" fill="#d5f5ee"/>
  <path d="M624 448l7-11 7 7 8-12" fill="none" stroke="#3faaa7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
  <circle cx="625" cy="466" r="3" fill="#ff9c62"/><circle cx="637" cy="466" r="3" fill="#8ce0e7"/>
  <path d="M575 480q-12 4-19 14m124-7 8 10" fill="none" stroke="#91a8b5" stroke-width="4" stroke-linecap="round"/>
  <path d="M567 510q48 25 105 0" fill="none" stroke="#c5d5dc" stroke-width="4"/>

  <!-- Left boot -->
  <path d="M515 588Q529 589 548 599L556 619L576 633Q585 639 580 647Q577 652 566 652H496Q484 650 487 638L498 614Z"
        fill="url(#boot)" stroke="#263750" stroke-width="7" stroke-linejoin="round"/>
  <path d="M498 630Q526 636 564 632L580 641Q580 651 568 652H497Q486 649 489 640Z"
        fill="#52677f" stroke="#263750" stroke-width="4" stroke-linejoin="round"/>
  <path d="M512 603l28 9m-34-1 28 9" stroke="#8ba2b1" stroke-width="4" stroke-linecap="round"/>
  <path d="M506 597q18-8 34 4l-3 10q-18-8-34-1z" fill="#8ce1e7" stroke="#263750" stroke-width="3"/>

  <!-- Right boot -->
  <path d="M691 574Q706 571 724 581L738 599L760 607Q771 611 769 620Q767 628 755 628H701Q687 626 687 615L684 591Z"
        fill="url(#boot)" stroke="#263750" stroke-width="7" stroke-linejoin="round"/>
  <path d="M689 608Q724 614 758 608L769 616Q768 627 755 628H701Q688 627 687 618Z"
        fill="#52677f" stroke="#263750" stroke-width="4" stroke-linejoin="round"/>
  <path d="M702 588l27 11m-30-2 25 10" stroke="#8ba2b1" stroke-width="4" stroke-linecap="round"/>
  <path d="M694 582q17-9 34 2l2 10q-19-8-35 1z" fill="#8ce1e7" stroke="#263750" stroke-width="3"/>

  <!-- Helmet shell and cat inside visor -->
  <circle cx="620" cy="293" r="101" fill="#dce7eb" stroke="#263750" stroke-width="8"/>
  <circle cx="620" cy="293" r="85" fill="#72c6e1" stroke="#94b5c6" stroke-width="3"/>
  <g clip-path="url(#visorClip)">
    <path d="M552 310L550 245Q550 232 562 239L593 263Q620 251 647 263L676 239Q689 232 690 246L686 314Q682 350 651 365H587Q557 350 552 310Z"
          fill="#e78b50" stroke="#513b45" stroke-width="5" stroke-linejoin="round"/>
    <!-- Inner ears -->
    <path d="M559 246L565 276 588 267Z" fill="#f4b4a3"/>
    <path d="M681 246L674 276 651 267Z" fill="#f4b4a3"/>
    <!-- White face blaze and cheeks -->
    <path d="M606 275Q620 266 634 275L643 303Q641 321 620 328Q599 321 597 303Z" fill="#fff4dc"/>
    <path d="M568 309Q576 291 593 296Q606 299 610 315Q604 336 585 337Q569 332 568 309Z" fill="#fff4dc"/>
    <path d="M630 315Q635 299 649 296Q666 292 674 309Q675 331 657 337Q638 336 630 315Z" fill="#fff4dc"/>
    <!-- Eyes -->
    <ellipse cx="591" cy="302" rx="6.5" ry="9" fill="#25364d"/>
    <ellipse cx="649" cy="302" rx="6.5" ry="9" fill="#25364d"/>
    <circle cx="589" cy="299" r="2.2" fill="#fff"/>
    <circle cx="647" cy="299" r="2.2" fill="#fff"/>
    <!-- Nose and smile -->
    <path d="M616 317Q620 313 624 317Q623 322 620 322Q617 321 616 317Z" fill="#e66d70"/>
    <path d="M620 322v6m0 0q-7 8-13 0m13 0q7 8 13 0" fill="none" stroke="#6d4650" stroke-width="2.5" stroke-linecap="round"/>
    <!-- Whiskers -->
    <g fill="none" stroke="#d7a77f" stroke-width="2" stroke-linecap="round">
      <path d="M581 315l-15-4m15 10-17 2m120-8 15-4m-15 10 17 2"/>
    </g>
    <!-- Glass reflections -->
    <path d="M548 265Q562 225 599 216Q568 252 559 291Z" fill="#fff" opacity=".25"/>
    <path d="M668 226q13 8 20 22" fill="none" stroke="#fff" stroke-width="5" opacity=".35" stroke-linecap="round"/>
  </g>
  <!-- Visor tint and frame details -->
  <circle cx="620" cy="293" r="85" fill="url(#visor)" opacity=".7"/>
  <path d="M554 249Q567 211 605 208M669 216q25 10 35 34" fill="none" stroke="#fff" stroke-width="5" opacity=".65" stroke-linecap="round"/>
  <circle cx="520" cy="294" r="11" fill="#a6bdc9" stroke="#263750" stroke-width="5"/>
  <circle cx="720" cy="294" r="11" fill="#a6bdc9" stroke="#263750" stroke-width="5"/>
  <path d="M592 386Q620 397 649 386" fill="none" stroke="#a8bbc5" stroke-width="7" stroke-linecap="round"/>
  <path d="M594 389Q620 399 646 389" fill="none" stroke="#eef5f4" stroke-width="3" stroke-linecap="round"/>
</svg>

Reasoning trace (4,077 tokens)

**Creating a poster design**

I’m thinking about how to add atmosphere with stars and a glowing aura around the cat. I might place some typography in the upper left corner, possibly a title like "LUNAR / BOARDING" in a simple sans typeface. I wonder if "MOON / SURFER" would work better, but it might be too distracting. There could also be a small title block saying "ONE SMALL STEP" and a subtitle "ONE GIANT RIDE." It seems important to keep the design aesthetic and clear while making the cat the focal point. I’ll need to check the SVG syntax and details.**Designing the SVG layout**

I’m working with SVG code, focusing on creating a large scene where the moon overlaps the terrain. The stars will be simple circles with some four-point glints. I want to get the character's scale right: a head radius of 100 and a body height of 190, making the total around 450 with the board. I think I need to add a head clip and carefully consider the layer order to ensure everything appears correctly. Shadow under the board and detailing the wheels and deck will be vital too.