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: 31.8 s
Cost: $0.0019
Output tokens: 3,732
Spent thinking: 0 tokens
Speed: 126 tok/s
Console errors: 0

First token after: 2.2 s
First visible text after: 2.2 s
Prompt tokens: 347
Code size: 9.0 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"none"}
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 · 162 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 bubble helmet rides a skateboard across a cratered lunar landscape beneath a starry sky.</desc>

  <defs>
    <linearGradient id="sky" x2="0" y2="1">
      <stop offset="0" stop-color="#09132d"/>
      <stop offset="1" stop-color="#263a64"/>
    </linearGradient>
    <linearGradient id="moon" x2="0" y2="1">
      <stop offset="0" stop-color="#dbe4f1"/>
      <stop offset="1" stop-color="#899bb7"/>
    </linearGradient>
    <linearGradient id="visor" x2="1" y2="1">
      <stop stop-color="#9ee9ff" stop-opacity=".72"/>
      <stop offset=".5" stop-color="#526d9c" stop-opacity=".5"/>
      <stop offset="1" stop-color="#152644" stop-opacity=".88"/>
    </linearGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <clipPath id="helmetClip">
      <circle cx="635" cy="300" r="128"/>
    </clipPath>
  </defs>

  <!-- Space -->
  <rect width="1280" height="800" fill="url(#sky)"/>
  <circle cx="1050" cy="145" r="52" fill="#f4e6b8" opacity=".92"/>
  <circle cx="1074" cy="127" r="52" fill="#111c39"/>
  <g fill="#fff6d9">
    <circle cx="112" cy="112" r="2.7"/><circle cx="228" cy="210" r="2"/>
    <circle cx="345" cy="83" r="2.4"/><circle cx="485" cy="150" r="1.8"/>
    <circle cx="766" cy="92" r="2.5"/><circle cx="869" cy="215" r="1.7"/>
    <circle cx="1170" cy="292" r="2.4"/><circle cx="94" cy="330" r="1.8"/>
    <circle cx="285" cy="350" r="2.3"/><circle cx="970" cy="80" r="1.7"/>
    <circle cx="1186" cy="170" r="1.6"/><circle cx="730" cy="250" r="1.8"/>
    <circle cx="427" cy="265" r="1.6"/><circle cx="177" cy="65" r="1.5"/>
  </g>
  <g fill="#b9e8ff" filter="url(#glow)">
    <path d="M195 145v16m-8-8h16" stroke="#b9e8ff" stroke-width="2"/>
    <path d="M900 116v13m-7-6.5h14" stroke="#b9e8ff" stroke-width="2"/>
    <path d="M1150 370v14m-7-7h14" stroke="#b9e8ff" stroke-width="2"/>
  </g>
  <path d="M0 500 Q170 455 340 495T685 480T1020 480T1280 470V800H0Z" fill="#7487a5" opacity=".42"/>
  <path d="M0 560 Q160 510 345 555T705 530T1030 548T1280 520V800H0Z" fill="url(#moon)"/>

  <!-- Far lunar craters -->
  <g fill="none" stroke="#7185a2" opacity=".55">
    <ellipse cx="168" cy="585" rx="58" ry="15" stroke-width="5"/>
    <ellipse cx="1085" cy="572" rx="77" ry="20" stroke-width="6"/>
    <ellipse cx="946" cy="640" rx="34" ry="9" stroke-width="4"/>
  </g>
  <g fill="#8193ae" opacity=".5">
    <circle cx="85" cy="631" r="5"/><circle cx="1100" cy="690" r="7"/>
    <circle cx="1010" cy="620" r="4"/><circle cx="270" cy="700" r="6"/>
    <circle cx="1177" cy="625" r="4"/><circle cx="419" cy="645" r="3"/>
  </g>

  <!-- Motion streaks -->
  <g stroke="#b9d2ed" stroke-width="3" stroke-linecap="round" opacity=".7">
    <path d="M310 491h90"/><path d="M275 518h66"/><path d="M370 460h48"/>
  </g>

  <!-- Cat tail behind suit -->
  <path d="M732 453 C814 435 820 363 781 354 C755 348 744 378 766 389"
        fill="none" stroke="#f6a85c" stroke-width="25" stroke-linecap="round"/>
  <path d="M732 453 C814 435 820 363 781 354 C755 348 744 378 766 389"
        fill="none" stroke="#ffe0a7" stroke-width="8" stroke-linecap="round" stroke-dasharray="2 25"/>

  <!-- Flying scarf / motion accent -->
  <path d="M565 389 C512 367 485 336 458 324 Q481 365 517 391 Q478 385 450 365 Q488 412 554 422Z"
        fill="#ff6f76" stroke="#ffd3ce" stroke-width="3"/>
  <path d="M490 365q26 16 50 18" fill="none" stroke="#ffb4ae" stroke-width="3" opacity=".75"/>

  <!-- Skateboard -->
  <g transform="rotate(-8 640 640)">
    <path d="M461 632 Q472 620 491 620 H793 Q812 620 820 632 Q812 648 792 649 H489 Q469 648 461 632Z"
          fill="#ff755f" stroke="#282946" stroke-width="7"/>
    <path d="M492 631h297" stroke="#ffd38a" stroke-width="5" stroke-linecap="round"/>
    <path d="M528 650v13m223-13v13" stroke="#35334e" stroke-width="7"/>
    <path d="M509 664h38m194 0h38" stroke="#35334e" stroke-width="6" stroke-linecap="round"/>
    <circle cx="523" cy="671" r="13" fill="#26314d" stroke="#dce7f7" stroke-width="4"/>
    <circle cx="759" cy="671" r="13" fill="#26314d" stroke="#dce7f7" stroke-width="4"/>
    <circle cx="523" cy="671" r="4" fill="#ffbf71"/><circle cx="759" cy="671" r="4" fill="#ffbf71"/>
    <path d="M610 629l19 10 19-10" fill="none" stroke="#292b4b" stroke-width="4"/>
  </g>

  <!-- Suit legs -->
  <path d="M583 483 Q565 527 553 572 L598 593 Q628 557 645 520Z"
        fill="#f1f4f7" stroke="#606f87" stroke-width="7"/>
  <path d="M665 490 Q691 529 723 558 L758 529 Q741 485 713 454Z"
        fill="#f1f4f7" stroke="#606f87" stroke-width="7"/>
  <path d="M548 566l52 17-8 25-56-18z" fill="#e3edf6" stroke="#65758d" stroke-width="5"/>
  <path d="M718 551l43-35 20 21-44 39z" fill="#e3edf6" stroke="#65758d" stroke-width="5"/>
  <path d="M541 588q20 13 48 16l8 18q-30 12-63-3l-11-14z"
        fill="#4c5c77" stroke="#26334d" stroke-width="5"/>
  <path d="M744 568q19-21 42-34l19 8q-12 30-38 49l-20-6z"
        fill="#4c5c77" stroke="#26334d" stroke-width="5"/>
  <path d="M538 605l42 10m181-40 33 16" stroke="#f6c765" stroke-width="5" stroke-linecap="round"/>

  <!-- Suit torso -->
  <path d="M565 369 Q586 345 631 344 Q688 344 715 379 L737 474
           Q708 507 658 510 Q597 507 562 478Z"
        fill="#f4f6f8" stroke="#66758e" stroke-width="8"/>
  <path d="M585 391 Q628 376 696 397" fill="none" stroke="#d4dce7" stroke-width="6"/>
  <rect x="611" y="424" width="74" height="57" rx="12" fill="#344362" stroke="#7889a4" stroke-width="5"/>
  <rect x="621" y="434" width="54" height="28" rx="6" fill="#73d6db"/>
  <path d="M629 451l9-10 9 7 8-11 12 14" fill="none" stroke="#fff2bc" stroke-width="3"/>
  <circle cx="631" cy="473" r="4" fill="#ff6f76"/><circle cx="647" cy="473" r="4" fill="#f6c765"/>
  <path d="M576 423l-24 20 16 47 34-8" fill="#f4f6f8" stroke="#66758e" stroke-width="7"/>
  <path d="M560 484q-16 12-23 28l13 13q18-7 31-22" fill="#e8edf2" stroke="#66758e" stroke-width="6"/>
  <path d="M708 405l28 14 9 39-28 4" fill="#f4f6f8" stroke="#66758e" stroke-width="7"/>
  <path d="M742 452q24 1 37 16l-6 17q-22 2-39-12" fill="#e8edf2" stroke="#66758e" stroke-width="6"/>
  <path d="M579 381l-20 10 11 17 22-9m104-7 20 13-11 17-20-12"
        fill="#f7c765" stroke="#66758e" stroke-width="4"/>

  <!-- Helmet, bubble and ears -->
  <path d="M558 249l-20-47q-6-15 9-12l62 34M687 228l43-36q12-10 15 6l-4 68"
        fill="#f7f8fa" stroke="#718099" stroke-width="8" stroke-linejoin="round"/>
  <path d="M559 227l-9-22 38 21m99-1 33-27-3 42"
        fill="#f5a4a8" stroke="#d77f8b" stroke-width="4"/>
  <circle cx="635" cy="300" r="139" fill="#b7d2e4" fill-opacity=".25" stroke="#eaf5ff" stroke-width="12"/>
  <circle cx="635" cy="300" r="128" fill="url(#visor)" stroke="#93b4d1" stroke-width="5"/>
  <g clip-path="url(#helmetClip)">
    <!-- Cat head -->
    <path d="M565 309l-14-48q-3-12 9-7l43 25q31-15 65 0l44-26q12-7 10 8l-9 49
             Q722 375 644 382Q575 376 565 309Z"
          fill="#f5ad68" stroke="#b56f57" stroke-width="6"/>
    <path d="M564 276l-4-12 31 19m111-1 23-17-4 22" fill="#fa8f9a"/>
    <path d="M587 312q12-15 25 0m45 0q12-15 25 0" fill="none" stroke="#40354b" stroke-width="7" stroke-linecap="round"/>
    <ellipse cx="636" cy="337" rx="8" ry="6" fill="#5a3c4b"/>
    <path d="M636 343q-10 15-23 3m23-3q10 15 23 3" fill="none" stroke="#653d4a" stroke-width="4" stroke-linecap="round"/>
    <path d="M592 334h-31m32 7-29 8m107-15h31m-32 7 29 8" stroke="#fff2d9" stroke-width="3" stroke-linecap="round"/>
    <path d="M573 331q-18-10-25 3 8 17 28 10m116-13q18-10 25 3-8 17-28 10"
          fill="#f08a91" opacity=".8"/>
  </g>
  <!-- Helmet shine -->
  <path d="M552 276q12-46 49-61" fill="none" stroke="#fff" stroke-width="9" stroke-linecap="round" opacity=".76"/>
  <path d="M724 325q-5 35-29 51" fill="none" stroke="#d7f4ff" stroke-width="5" stroke-linecap="round" opacity=".75"/>
  <circle cx="565" cy="286" r="5" fill="#fff" opacity=".9"/>
  <path d="M631 162v-17m-9 8h18" stroke="#f6d27c" stroke-width="3" stroke-linecap="round"/>
  <path d="M794 286v-13m-7 6.5h14" stroke="#f6d27c" stroke-width="3" stroke-linecap="round"/>

  <!-- Foreground lunar surface -->
  <path d="M0 710 Q210 675 413 708T822 701T1280 686V800H0Z" fill="#788aa6" opacity=".68"/>
  <ellipse cx="652" cy="704" rx="255" ry="18" fill="#43546f" opacity=".33"/>
  <g fill="none" stroke="#596d89" opacity=".55">
    <ellipse cx="130" cy="746" rx="74" ry="17" stroke-width="6"/>
    <ellipse cx="1048" cy="738" rx="96" ry="20" stroke-width="7"/>
    <ellipse cx="892" cy="775" rx="44" ry="10" stroke-width="4"/>
  </g>
  <g fill="#536680" opacity=".65">
    <circle cx="356" cy="750" r="5"/><circle cx="435" cy="722" r="4"/>
    <circle cx="840" cy="738" r="5"/><circle cx="1176" cy="711" r="5"/>
    <circle cx="238" cy="784" r="4"/><circle cx="988" cy="785" r="4"/>
  </g>

  <text x="640" y="764" text-anchor="middle" fill="#f0f4fb" opacity=".82"
        font-family="Arial, sans-serif" font-size="17" letter-spacing="4">LUNAR SKATE CLUB</text>
</svg>