Skateboarding astronaut catOne-line

GPT-6.1 Terra

by OpenAIReasoningClean

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 1 min 13 s
Cost: $0.028
Output tokens: 5,446
Spent thinking: 772 tokens
Speed: 80.5 tok/s
Console errors: 0

First token after: 5.6 s
First visible text after: 20.1 s
Prompt tokens: 347
Code size: 11.0 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: {"effort":"medium"}
Max output: 128,000 tokens
Generated: Nov 12, 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" width="100%" height="100%" role="img" aria-labelledby="title desc">
  <title id="title">Moonwalking? Moonboarding.</title>
  <desc id="desc">A cheerful astronaut cat rides a skateboard across the moon under a starry sky.</desc>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0.8" y2="1">
      <stop stop-color="#101633"/>
      <stop offset=".55" stop-color="#202c56"/>
      <stop offset="1" stop-color="#536383"/>
    </linearGradient>
    <linearGradient id="ground" x1="0" y1="0" x2="0.2" y2="1">
      <stop stop-color="#d9d7cf"/>
      <stop offset="1" stop-color="#a8b0b7"/>
    </linearGradient>
    <linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#c9f5ed"/>
      <stop offset=".5" stop-color="#9ed9dc"/>
      <stop offset="1" stop-color="#6ab4c5"/>
    </linearGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#fff9e9"/>
      <stop offset="1" stop-color="#b9d1d3"/>
    </linearGradient>
    <linearGradient id="planet" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#f4bc86"/>
      <stop offset="1" stop-color="#d77c77"/>
    </linearGradient>
    <filter id="blur"><feGaussianBlur stdDeviation="13"/></filter>
    <pattern id="grain" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="8" r="1" fill="#fff" opacity=".25"/>
      <circle cx="26" cy="22" r=".8" fill="#fff" opacity=".18"/>
      <circle cx="13" cy="34" r=".7" fill="#fff" opacity=".2"/>
    </pattern>
  </defs>

  <!-- Space -->
  <rect width="1280" height="800" fill="url(#sky)"/>
  <rect width="1280" height="800" fill="url(#grain)" opacity=".45"/>
  <circle cx="655" cy="316" r="245" fill="#70b7c3" opacity=".09" filter="url(#blur)"/>

  <!-- Distant planet -->
  <g transform="translate(1032 172)">
    <ellipse rx="135" ry="30" transform="rotate(-17)" fill="none" stroke="#eab48e" stroke-width="8" opacity=".6"/>
    <circle r="75" fill="url(#planet)"/>
    <path d="M-67-31c29 14 71 14 125-9M-72 6c34 15 86 15 141-5M-55 48c29 9 68 8 104-1" fill="none" stroke="#f7cf9f" stroke-width="9" opacity=".37"/>
    <path d="M-126 39c31 17 111 7 184-16 40-13 69-27 81-39" fill="none" stroke="#f1c99d" stroke-width="8" stroke-linecap="round"/>
  </g>

  <!-- Stars -->
  <g fill="#f7e8c5">
    <circle cx="116" cy="128" r="2.5"/><circle cx="202" cy="230" r="2"/>
    <circle cx="331" cy="92" r="2"/><circle cx="423" cy="196" r="2.5"/>
    <circle cx="818" cy="94" r="2"/><circle cx="887" cy="225" r="2"/>
    <circle cx="1176" cy="307" r="2.5"/><circle cx="1078" cy="405" r="2"/>
    <circle cx="212" cy="398" r="2"/><circle cx="350" cy="342" r="1.7"/>
    <circle cx="912" cy="358" r="2"/><circle cx="1150" cy="91" r="1.8"/>
    <circle cx="78" cy="346" r="1.6"/><circle cx="780" cy="418" r="1.7"/>
  </g>
  <g fill="#f8e9cb">
    <path d="M280 136l3 10 10 3-10 3-3 10-3-10-10-3 10-3z"/>
    <path d="M850 282l2.5 8 8 2.5-8 2.5-2.5 8-2.5-8-8-2.5 8-2.5z"/>
    <path d="M1144 451l3 10 10 3-10 3-3 10-3-10-10-3 10-3z"/>
    <path d="M153 481l2 7 7 2-7 2-2 7-2-7-7-2 7-2z"/>
  </g>

  <!-- Editorial lettering -->
  <g font-family="Arial, sans-serif" fill="#f5ead3">
    <text x="78" y="76" font-size="13" font-weight="700" letter-spacing="4">LUNAR SKATE CLUB</text>
    <path d="M78 92h112" stroke="#efb58d" stroke-width="2"/>
    <text x="79" y="559" font-size="13" font-weight="700" letter-spacing="3" opacity=".78">ZERO GRAVITY.</text>
    <text x="79" y="580" font-size="13" font-weight="700" letter-spacing="3" opacity=".78">MAXIMUM ZOOMIES.</text>
  </g>

  <!-- Moon horizon and surface -->
  <path d="M0 642c118-34 228-26 331-7 95 18 176 12 257-7 124-30 215-25 322-8 127 20 244-10 370-38v218H0z" fill="#899baa"/>
  <path d="M0 670c115-33 217-26 325-9 109 18 202 4 304-16 112-22 198-15 296 1 128 21 243-4 355-27v181H0z" fill="url(#ground)"/>
  <path d="M0 670c115-33 217-26 325-9 109 18 202 4 304-16 112-22 198-15 296 1 128 21 243-4 355-27" fill="none" stroke="#eff0df" stroke-width="4" opacity=".7"/>
  <g fill="none" stroke="#84959e" stroke-linecap="round">
    <path d="M93 735c22-14 71-18 104-7" stroke-width="5" opacity=".55"/>
    <path d="M102 742c23 5 56 6 79 1" stroke-width="3" opacity=".4"/>
    <path d="M908 720c24-15 72-16 100-5" stroke-width="5" opacity=".55"/>
    <path d="M920 728c23 5 52 5 72 0" stroke-width="3" opacity=".4"/>
    <path d="M1114 668c14-8 40-9 55-3" stroke-width="4" opacity=".48"/>
    <path d="M307 703c10-6 29-7 40-3" stroke-width="3" opacity=".48"/>
  </g>
  <g fill="#8d9da5" opacity=".55">
    <circle cx="258" cy="754" r="4"/><circle cx="287" cy="741" r="2.5"/>
    <circle cx="1057" cy="759" r="4"/><circle cx="1091" cy="746" r="2.5"/>
    <circle cx="393" cy="685" r="3"/><circle cx="1183" cy="708" r="3"/>
  </g>
  <ellipse cx="653" cy="654" rx="184" ry="17" fill="#647985" opacity=".28"/>

  <!-- Speed marks and floating moon dust -->
  <g fill="none" stroke="#f8e7c6" stroke-linecap="round" opacity=".7">
    <path d="M377 542h92M402 559h49M357 576h70" stroke-width="4"/>
    <path d="M838 572c25-3 43-13 54-29" stroke-width="3"/>
  </g>
  <g fill="#f4e3c5">
    <circle cx="435" cy="605" r="4"/><circle cx="413" cy="615" r="2.5"/>
    <circle cx="467" cy="621" r="3"/><circle cx="859" cy="611" r="3"/>
  </g>

  <!-- Cat and board, tilted together -->
  <g transform="rotate(-7 650 590)">
    <!-- Backpack -->
    <path d="M581 369l-26 1c-19 2-29 15-29 35v58c0 19 10 29 29 29h31z" fill="#ecaa79" stroke="#29384d" stroke-width="8" stroke-linejoin="round"/>
    <path d="M537 410h35M537 448h35" stroke="#d38368" stroke-width="5"/>

    <!-- Arms -->
    <path d="M586 391c-20 1-37 16-55 35l-31-17" fill="none" stroke="#29384d" stroke-width="42" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M586 391c-20 1-37 16-55 35l-31-17" fill="none" stroke="url(#suit)" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M715 392c20 2 34 19 47 34l35-28" fill="none" stroke="#29384d" stroke-width="42" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M715 392c20 2 34 19 47 34l35-28" fill="none" stroke="url(#suit)" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
    <!-- Gloves -->
    <g fill="#f6e9d4" stroke="#29384d" stroke-width="7" stroke-linejoin="round">
      <path d="M502 398c-9-10-22-9-28-2-7 8-3 21 9 27 8 4 17 3 24-3z"/>
      <path d="M791 390c4-12 14-19 24-15 11 4 12 16 6 25-5 8-13 12-22 10z"/>
    </g>
    <path d="M516 416l-8 13M784 412l9 12" stroke="#e99c76" stroke-width="8"/>

    <!-- Body -->
    <path d="M602 360c-19 5-31 19-34 42l-5 59c-2 24 14 42 38 45h102c23-3 39-21 37-45l-5-59c-3-23-15-37-34-42z" fill="url(#suit)" stroke="#29384d" stroke-width="8"/>
    <path d="M574 457c35 11 113 13 160 0" fill="none" stroke="#9fbac0" stroke-width="5"/>
    <rect x="609" y="394" width="86" height="48" rx="10" fill="#f8f4e4" stroke="#8da9af" stroke-width="4"/>
    <circle cx="628" cy="412" r="6" fill="#ed9a76"/>
    <circle cx="646" cy="412" r="6" fill="#71b8b5"/>
    <path d="M665 407h16M665 416h12M620 430h61" stroke="#9aafb0" stroke-width="3" stroke-linecap="round"/>
    <path d="M582 403h12M710 403h12" stroke="#edab82" stroke-width="7" stroke-linecap="round"/>

    <!-- Legs -->
    <path d="M603 489l-11 55-18 28h58l20-65" fill="url(#suit)" stroke="#29384d" stroke-width="8" stroke-linejoin="round"/>
    <path d="M687 489l13 55 20 28h-59l-18-65" fill="url(#suit)" stroke="#29384d" stroke-width="8" stroke-linejoin="round"/>
    <path d="M585 536h43M673 536h34" stroke="#9eb8bc" stroke-width="5"/>
    <!-- Boots -->
    <path d="M577 548c-9 4-17 13-18 25-1 8 4 12 13 12h62l2-24-8-12z" fill="#f8f1df" stroke="#29384d" stroke-width="8" stroke-linejoin="round"/>
    <path d="M667 550l-7 11 2 24h64c9 0 14-4 13-12-1-12-10-21-20-25z" fill="#f8f1df" stroke="#29384d" stroke-width="8" stroke-linejoin="round"/>
    <path d="M563 574h70M663 574h71" stroke="#edaa80" stroke-width="6"/>

    <!-- Helmet outer rim -->
    <ellipse cx="650" cy="240" rx="143" ry="139" fill="#e7f1e8" stroke="#29384d" stroke-width="9"/>
    <ellipse cx="650" cy="237" rx="126" ry="122" fill="url(#glass)" stroke="#85b7bd" stroke-width="5"/>
    <!-- Reflections behind cat -->
    <path d="M550 232c2-46 25-77 55-92" fill="none" stroke="#f4ffef" stroke-width="7" stroke-linecap="round" opacity=".75"/>
    <path d="M744 197c7 13 11 27 11 40" fill="none" stroke="#e7fff4" stroke-width="5" stroke-linecap="round" opacity=".6"/>

    <!-- Cat ears and face -->
    <path d="M568 232c0-18 4-53 11-70 3-7 8-8 15-4l35 25c14-3 28-3 42 0l34-25c7-4 12-3 15 4 7 17 11 52 11 70 5 47-26 78-81 78s-86-31-82-78z" fill="#f4bd82" stroke="#513e40" stroke-width="7" stroke-linejoin="round"/>
    <path d="M583 183l4 29 27-19-22-16c-4-3-7 0-9 6zM717 183l-4 29-27-19 22-16c4-3 7 0 9 6z" fill="#de8c83"/>
    <!-- Tabby stripes -->
    <path d="M637 185l5 19M650 183v20M663 185l-5 19" stroke="#ce895f" stroke-width="6" stroke-linecap="round"/>
    <path d="M574 239l21 7M574 251l18 5M726 239l-21 7M726 251l-18 5" stroke="#d08b65" stroke-width="5" stroke-linecap="round"/>
    <!-- Muzzle -->
    <ellipse cx="650" cy="271" rx="43" ry="25" fill="#ffe2b8"/>
    <path d="M596 240c6-7 14-7 20 0M684 240c6-7 14-7 20 0" fill="none" stroke="#513e40" stroke-width="6" stroke-linecap="round"/>
    <path d="M642 257c0-4 16-4 16 0 0 3-5 7-8 7s-8-4-8-7z" fill="#b96f70"/>
    <path d="M650 264v6c-4 7-11 8-16 3m16-3c4 7 11 8 16 3" fill="none" stroke="#785354" stroke-width="3" stroke-linecap="round"/>
    <g stroke="#785354" stroke-width="2.5" stroke-linecap="round">
      <path d="M613 263l-25-3M614 271l-26 4M687 263l25-3M686 271l26 4"/>
    </g>
    <ellipse cx="603" cy="258" rx="9" ry="5" fill="#e99986" opacity=".6"/>
    <ellipse cx="697" cy="258" rx="9" ry="5" fill="#e99986" opacity=".6"/>

    <!-- Visor shine and collar -->
    <path d="M544 260c4 23 12 39 23 51M741 285c-7 13-15 23-25 31" fill="none" stroke="#eafff5" stroke-width="5" stroke-linecap="round" opacity=".65"/>
    <path d="M578 344c19 16 43 24 72 24s53-8 72-24l8 17c-18 18-47 27-80 27s-62-9-80-27z" fill="#f2aa7d" stroke="#29384d" stroke-width="8" stroke-linejoin="round"/>
    <path d="M591 360c34 17 84 17 118 0" fill="none" stroke="#ffd4a9" stroke-width="5" stroke-linecap="round"/>

    <!-- Skateboard -->
    <path d="M487 580c15 0 23 9 34 10h258c12-1 20-10 34-10 2 12-5 25-23 28H510c-17-3-25-16-23-28z" fill="#e99470" stroke="#29384d" stroke-width="8" stroke-linejoin="round"/>
    <path d="M512 592h276" stroke="#f8d4a0" stroke-width="4" stroke-linecap="round"/>
    <path d="M555 607l8 12h29l8-12M701 607l8 12h29l8-12" fill="#93aeb0" stroke="#29384d" stroke-width="5" stroke-linejoin="round"/>
    <g fill="#f9dfaa" stroke="#29384d" stroke-width="6">
      <circle cx="566" cy="622" r="14"/><circle cx="735" cy="622" r="14"/>
    </g>
    <g fill="#d49371">
      <circle cx="566" cy="622" r="5"/><circle cx="735" cy="622" r="5"/>
    </g>
  </g>

  <!-- Small signature -->
  <g font-family="Arial, sans-serif" fill="#526873" opacity=".8">
    <text x="1128" y="765" font-size="11" font-weight="700" letter-spacing="2" text-anchor="end">EST. ON THE MOON</text>
  </g>
</svg>

Reasoning trace (772 tokens)

**Designing astronaut cat SVG**

I need to create an SVG as requested, focused on designing a polished, illustrative cat on a skateboard on the moon. I'll incorporate gradients, shapes, stars, and the crater landscape, aiming for a dynamic pose. The dimensions will be 1280x800, with a responsive viewBox. The cat will wear a space helmet and have its skateboard positioned beneath its feet, with tracks visible. I want to make sure to arrange the elements coherently for an attractive final design.**Refining astronaut cat design**

I’m working on the helmet's placement and sizing for the cat, ensuring its ears are clearly visible. The gradient night sky will set the mood, and I'll add a planet in the top right and star patterns. The moon's surface will contour prominently in the foreground. I'll rotate the skateboard slightly for better alignment with the cat's stance, aiming for an upright lean. The detailing needs to focus on the helmet and suit textures, with visible arms and paws, all while achieving a cohesive look.**Designing cat helmet features**

I need to draw the outer ring of the helmet as an ellipse without any glass overlays blocking visibility. The cat's head shape will be rounded, and I'll create the ears from a silhouette that connects the ears to the cheeks. The positioning is crucial, especially with coordinates around x650, y240 for the helmet and x570-730 for the head. I want the cat's face to show cute, happy eyes, and I also need to ensure the collar is a separate element on the helmet.**Designing a moon scene**

I'm thinking about including a large crater at the bottom of the backdrop. I could add decorative text, something like "THE MOON IS OUR PLAYGROUND," placed at the bottom left in a smaller font. The title might go at the top left. I need to position the cat roughly around 550x, and perhaps scatter some stars lower in the scene. Now, let’s get to generating this idea!