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: 46.2 s
Cost: $0.0021
Output tokens: 4,194
Spent thinking: 124 tokens
Speed: 125.9 tok/s
Console errors: 0

First token after: 12.9 s
First visible text after: 14.0 s
Prompt tokens: 347
Code size: 10.0 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"low"}
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 · 181 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" role="img" aria-labelledby="title desc">
  <title id="title">Moonboarder</title>
  <desc id="desc">A cheerful astronaut cat skateboards across a cratered moon beneath a starry sky.</desc>
  <defs>
    <linearGradient id="sky" x2="0" y2="1">
      <stop stop-color="#101b3c"/>
      <stop offset="1" stop-color="#292e58"/>
    </linearGradient>
    <linearGradient id="moon" x2=".2" y2="1">
      <stop stop-color="#e5e2dd"/>
      <stop offset="1" stop-color="#aaaebd"/>
    </linearGradient>
    <linearGradient id="visor" x2=".9" y2="1">
      <stop stop-color="#a8f1fa" stop-opacity=".86"/>
      <stop offset=".45" stop-color="#416c9d" stop-opacity=".92"/>
      <stop offset="1" stop-color="#17294f"/>
    </linearGradient>
    <linearGradient id="board" x2="0" y2="1">
      <stop stop-color="#ffb856"/>
      <stop offset="1" stop-color="#e85f64"/>
    </linearGradient>
    <filter id="shadow" x="-.3" y="-.3" width="1.6" height="1.7">
      <feGaussianBlur stdDeviation="8"/>
    </filter>
    <filter id="glow" x="-.5" y="-.5" width="2" height="2">
      <feGaussianBlur stdDeviation="2.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="1020" cy="185" r="78" fill="#fff3d3" opacity=".08"/>
  <circle cx="1020" cy="185" r="54" fill="#fff1d4" opacity=".9"/>
  <circle cx="1001" cy="171" r="11" fill="#d7d2c8" opacity=".5"/>
  <circle cx="1040" cy="201" r="7" fill="#d7d2c8" opacity=".4"/>
  <circle cx="1038" cy="160" r="4" fill="#d7d2c8" opacity=".55"/>

  <!-- Stars -->
  <g fill="#f8f5e9">
    <circle cx="106" cy="114" r="2"/><circle cx="216" cy="207" r="2.5"/>
    <circle cx="330" cy="92" r="1.8"/><circle cx="447" cy="158" r="2"/>
    <circle cx="548" cy="82" r="2.3"/><circle cx="700" cy="119" r="1.7"/>
    <circle cx="822" cy="75" r="2.5"/><circle cx="1164" cy="100" r="2"/>
    <circle cx="1194" cy="288" r="2.3"/><circle cx="89" cy="335" r="1.8"/>
    <circle cx="286" cy="303" r="2"/><circle cx="1106" cy="390" r="1.7"/>
    <circle cx="922" cy="325" r="2"/><circle cx="176" cy="435" r="1.6"/>
  </g>
  <g stroke="#fff3d3" stroke-width="2" opacity=".85">
    <path d="M168 278v18m-9-9h18"/><path d="M736 241v16m-8-8h16"/>
    <path d="M1144 332v14m-7-7h14"/><path d="M395 352v12m-6-6h12"/>
  </g>

  <!-- Distant ridgeline -->
  <path d="M0 552 Q120 491 248 543 Q379 477 513 542 Q673 469 829 537 Q1000 466 1137 523 Q1214 492 1280 520 L1280 800 0 800Z" fill="#737b9a"/>
  <path d="M0 591 Q155 526 286 575 Q419 518 548 578 Q716 513 872 571 Q1031 514 1170 565 Q1230 544 1280 560 L1280 800 0 800Z" fill="url(#moon)"/>

  <!-- Lunar ground details -->
  <g fill="#9298aa" opacity=".65">
    <ellipse cx="180" cy="669" rx="67" ry="13"/><ellipse cx="180" cy="665" rx="50" ry="7" fill="#c7c8ce"/>
    <ellipse cx="1070" cy="637" rx="87" ry="16"/><ellipse cx="1070" cy="632" rx="65" ry="8" fill="#d1d0d2"/>
    <ellipse cx="858" cy="730" rx="42" ry="9"/><ellipse cx="858" cy="727" rx="28" ry="4" fill="#c8c8ce"/>
    <ellipse cx="375" cy="741" rx="58" ry="10"/><ellipse cx="375" cy="738" rx="39" ry="5" fill="#c8c8ce"/>
  </g>
  <g fill="#8e95a8" opacity=".55">
    <circle cx="70" cy="615" r="3"/><circle cx="294" cy="642" r="4"/>
    <circle cx="981" cy="687" r="3"/><circle cx="1179" cy="716" r="4"/>
    <circle cx="748" cy="628" r="3"/><circle cx="465" cy="690" r="2.5"/>
  </g>

  <!-- Action swooshes -->
  <g fill="none" stroke-linecap="round">
    <path d="M351 414 Q432 366 508 392" stroke="#8adce8" stroke-width="5" opacity=".65"/>
    <path d="M314 448 Q410 404 483 422" stroke="#f6c96c" stroke-width="3" opacity=".75"/>
    <path d="M803 398 Q876 368 936 388" stroke="#8adce8" stroke-width="4" opacity=".5"/>
  </g>

  <!-- Soft cast shadow -->
  <ellipse cx="652" cy="680" rx="172" ry="24" fill="#454b68" opacity=".33" filter="url(#shadow)"/>

  <!-- Scooter-like flying dust -->
  <g fill="#f4d58c" opacity=".85">
    <circle cx="456" cy="629" r="5"/><circle cx="427" cy="613" r="3"/>
    <circle cx="470" cy="648" r="3"/><circle cx="883" cy="624" r="4"/>
  </g>

  <!-- Skateboard, tilted in motion -->
  <g transform="rotate(-5 648 638)">
    <path d="M482 624 Q500 610 530 615 L756 615 Q790 617 812 632 Q790 651 756 652 L529 650 Q497 650 482 638Z"
          fill="#262c4d"/>
    <path d="M485 615 Q498 603 529 607 L757 607 Q789 609 811 625 Q790 642 757 644 L529 642 Q498 641 485 630Z"
          fill="url(#board)" stroke="#ffe0a2" stroke-width="3"/>
    <path d="M528 616 Q646 608 770 618" fill="none" stroke="#ffd884" stroke-width="4" opacity=".85"/>
    <path d="M546 625 l19-8 19 9-18 10z" fill="#fff0c6" opacity=".8"/>
    <path d="M627 625 l19-8 19 9-18 10z" fill="#fff0c6" opacity=".8"/>
    <path d="M546 644v13m206-13v13" stroke="#3a3c55" stroke-width="7" stroke-linecap="round"/>
    <circle cx="548" cy="663" r="13" fill="#29304e"/><circle cx="548" cy="663" r="6" fill="#90d7df"/>
    <circle cx="751" cy="663" r="13" fill="#29304e"/><circle cx="751" cy="663" r="6" fill="#90d7df"/>
  </g>

  <!-- Back leg, boot -->
  <path d="M601 462 Q555 505 527 546 L494 590 Q477 605 491 617 Q511 627 532 610 L582 570 Q624 543 649 504Z"
        fill="#f6f2e9" stroke="#343b59" stroke-width="9" stroke-linejoin="round"/>
  <path d="M494 588 Q511 597 532 610 L520 625 Q501 635 480 621 Q468 612 482 597Z"
        fill="#dce8ef" stroke="#343b59" stroke-width="7"/>
  <path d="M482 620 Q499 628 520 622" fill="none" stroke="#66d6e2" stroke-width="5"/>

  <!-- Front leg -->
  <path d="M682 455 Q719 488 746 523 L722 568 Q712 583 728 597 Q745 609 764 594 L793 559 Q806 542 793 524 L738 444Z"
        fill="#fffaf0" stroke="#343b59" stroke-width="9" stroke-linejoin="round"/>
  <path d="M725 574 Q745 584 766 592 L759 610 Q739 621 717 606 Q704 596 716 582Z"
        fill="#dce8ef" stroke="#343b59" stroke-width="7"/>
  <path d="M719 605 Q739 615 759 608" fill="none" stroke="#66d6e2" stroke-width="5"/>

  <!-- Suit torso -->
  <path d="M575 330 Q619 307 674 326 Q715 342 725 390 L710 468 Q664 496 594 472 L561 405 Q555 359 575 330Z"
        fill="#f8f5ed" stroke="#343b59" stroke-width="10" stroke-linejoin="round"/>
  <path d="M575 350 Q621 369 711 352 L718 390 Q650 415 568 393Z" fill="#dfe8ec"/>
  <path d="M584 407 Q632 424 714 404 L706 456 Q654 477 599 456Z" fill="#e8e9e5"/>
  <!-- Chest panel -->
  <rect x="627" y="382" width="58" height="47" rx="10" fill="#344260" stroke="#8adce8" stroke-width="4" transform="rotate(-4 656 405)"/>
  <rect x="637" y="391" width="37" height="6" rx="3" fill="#8adce8"/>
  <circle cx="642" cy="411" r="5" fill="#ffbd5c"/><circle cx="660" cy="411" r="5" fill="#ee7881"/>
  <path d="M619 339 Q642 351 690 340" fill="none" stroke="#66d6e2" stroke-width="6"/>

  <!-- Arm reaching out -->
  <path d="M579 350 Q548 340 527 312 L484 287 Q465 278 453 296 Q449 310 467 321 L518 355 Q540 377 574 381Z"
        fill="#f8f5ed" stroke="#343b59" stroke-width="9" stroke-linejoin="round"/>
  <path d="M454 286 Q438 273 424 287 L411 301 Q404 315 421 324 L443 329 Q458 319 466 302Z"
        fill="#dfe8ec" stroke="#343b59" stroke-width="7"/>
  <path d="M421 302 Q438 299 452 313" fill="none" stroke="#66d6e2" stroke-width="4"/>

  <!-- Arm lifted -->
  <path d="M699 350 Q738 336 752 301 L772 261 Q782 242 800 252 Q815 263 804 281 L783 330 Q773 375 727 393Z"
        fill="#f8f5ed" stroke="#343b59" stroke-width="9" stroke-linejoin="round"/>
  <path d="M772 258 Q771 236 789 225 L805 216 Q824 218 824 237 L814 260 Q800 272 784 269Z"
        fill="#dfe8ec" stroke="#343b59" stroke-width="7"/>
  <path d="M790 229 Q806 237 814 252" fill="none" stroke="#66d6e2" stroke-width="4"/>

  <!-- Helmet rim -->
  <path d="M552 289 Q548 204 621 178 Q698 162 741 224 Q758 253 743 305 Q731 338 697 351 L580 338 Q554 322 552 289Z"
        fill="#f9f5eb" stroke="#343b59" stroke-width="12"/>
  <path d="M563 281 Q560 213 621 193 Q686 179 724 229 Q741 252 730 292 Q719 323 690 335 L586 325 Q566 310 563 281Z"
        fill="url(#visor)" stroke="#b9edf0" stroke-width="5"/>

  <!-- Cat ears inside helmet -->
  <path d="M588 225 L587 186 Q588 177 597 184 L623 208Z" fill="#f4e8d5" stroke="#313956" stroke-width="7" stroke-linejoin="round"/>
  <path d="M680 207 L705 183 Q714 176 716 187 L714 226Z" fill="#f4e8d5" stroke="#313956" stroke-width="7" stroke-linejoin="round"/>
  <path d="M596 196 L597 188 L610 205Z" fill="#e98b91"/>
  <path d="M704 191 L709 187 L708 207Z" fill="#e98b91"/>

  <!-- Cat face -->
  <path d="M609 258 Q614 249 622 258 Q632 269 643 258 Q652 249 660 258" fill="none" stroke="#28304e" stroke-width="5" stroke-linecap="round"/>
  <path d="M635 274 l7 0 -3.5 5z" fill="#e98591"/>
  <path d="M639 279 Q634 286 627 283 M639 279 Q644 286 651 282" fill="none" stroke="#28304e" stroke-width="3" stroke-linecap="round"/>
  <g stroke="#effbfa" stroke-width="2.5" stroke-linecap="round" opacity=".9">
    <path d="M612 276l-18-3"/><path d="M612 282l-18 3"/>
    <path d="M663 276l18-3"/><path d="M663 282l18 3"/>
  </g>
  <!-- Visor reflections -->
  <path d="M582 246 Q593 215 618 208" fill="none" stroke="#fff" stroke-width="7" opacity=".72" stroke-linecap="round"/>
  <path d="M695 224 Q707 232 713 246" fill="none" stroke="#fff" stroke-width="4" opacity=".55" stroke-linecap="round"/>

  <!-- Helmet side fittings -->
  <circle cx="557" cy="296" r="13" fill="#f6c365" stroke="#343b59" stroke-width="5"/>
  <circle cx="739" cy="294" r="13" fill="#f6c365" stroke="#343b59" stroke-width="5"/>
  <path d="M547 305 Q529 313 526 331" fill="none" stroke="#dce8ec" stroke-width="6"/>

  <!-- Tiny sparkle -->
  <g fill="#fff3c9" filter="url(#glow)">
    <path d="M858 260l5 14 14 5-14 5-5 14-5-14-14-5 14-5z"/>
    <path d="M472 227l3 8 8 3-8 3-3 8-3-8-8-3 8-3z"/>
  </g>

  <!-- Caption -->
  <g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
    <text x="640" y="93" fill="#f9f1d9" font-size="18" letter-spacing="7" opacity=".8">LUNAR FIELD NOTES · 04</text>
    <text x="640" y="137" fill="#fff8e7" font-size="30" font-weight="700" letter-spacing="2">ONE SMALL STEP</text>
    <text x="640" y="162" fill="#b8dce6" font-size="13" letter-spacing="5">ONE GIANT OLLIE</text>
  </g>
</svg>

Reasoning trace (124 tokens)

**Creating SVG Illustration**

I'm working on an output SVG to create a polished, self-contained illustration. I'll design it with an astronaut cat riding a skateboard on the moon’s surface. The dimensions will have a viewBox of 0 0 1280 800. I aim to include gradients, stars, and maybe some typography. The cat will be in a dynamic pose, positioned around the center for coherent anatomy, with the ground at y610. I'll remember to ensure all elements work together seamlessly!