Skateboarding astronaut catOne-line

gpt-oss-120b

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.8 s
Cost: $0.0008
Output tokens: 1,168
Spent thinking: 230 tokens
Speed: 473.4 tok/s
Console errors: 0

First token after: 316 ms
First visible text after: 817 ms
Prompt tokens: 411
Code size: 2.4 KB
Finish reason: stop
Served by: Groq
Model id: openai/gpt-oss-120b
Reasoning sent: {"effort":"medium"}
Max output: 64,000 tokens
Generated: Nov 11, 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 · 59 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 400" width="500" height="400">
  <!-- Space background -->
  <rect width="100%" height="100%" fill="#0b0d17"/>
  <!-- Stars -->
  <g fill="#fff" opacity="0.8">
    <circle cx="50" cy="30" r="1.5"/>
    <circle cx="120" cy="80" r="2"/>
    <circle cx="200" cy="20" r="1.2"/>
    <circle cx="280" cy="70" r="1.8"/>
    <circle cx="350" cy="40" r="1.3"/>
    <circle cx="420" cy="90" r="2.1"/>
    <circle cx="460" cy="30" r="1"/>
    <circle cx="90"  cy="150" r="1.7"/>
    <circle cx="160" cy="130" r="1.4"/>
    <circle cx="230" cy="160" r="1.9"/>
    <circle cx="310" cy="130" r="1.5"/>
    <circle cx="380" cy="150" r="1.2"/>
    <circle cx="440" cy="120" r="1.6"/>
  </g>

  <!-- Moon surface -->
  <circle cx="250" cy="420" r="300" fill="#c2b280"/>

  <!-- Astronaut cat group -->
  <g id="astronaut-cat" transform="translate(250,250) scale(0.8)">
    <!-- Skateboard -->
    <g id="skateboard" transform="translate(0,70)">
      <rect x="-70" y="-5" width="140" height="10" fill="#555" rx="2"/>
      <circle cx="-50" cy="7" r="6" fill="#222"/>
      <circle cx="50"  cy="7" r="6" fill="#222"/>
    </g>

    <!-- Cat body -->
    <ellipse cx="0" cy="-20" rx="30" ry="40" fill="#ffcc99"/>
    <!-- Tail -->
    <path d="M30,-20 q15,10 10,30" stroke="#ffcc99" stroke-width="8" fill="none" stroke-linecap="round"/>
    <!-- Arms -->
    <line x1="-30" y1="-20" x2="-55" y2="0" stroke="#ffcc99" stroke-width="10" stroke-linecap="round"/>
    <line x1="30" y1="-20" x2="55" y2="0" stroke="#ffcc99" stroke-width="10" stroke-linecap="round"/>
    <!-- Legs (attached to skateboard) -->
    <line x1="-20" y1="30" x2="-20" y2="60" stroke="#ffcc99" stroke-width="10" stroke-linecap="round"/>
    <line x1="20" y1="30" x2="20" y2="60" stroke="#ffcc99" stroke-width="10" stroke-linecap="round"/>

    <!-- Head -->
    <g id="head" transform="translate(0,-70)">
      <!-- Helmet outer -->
      <circle cx="0" cy="0" r="35" fill="#e0e0e0" stroke="#999" stroke-width="2"/>
      <!-- Visor -->
      <ellipse cx="0" cy="5" rx="20" ry="10" fill="#4a90e2"/>
      <!-- Cat ears -->
      <polygon points="-22,-28 -30,-55 -14,-45" fill="#ffcc99"/>
      <polygon points="22,-28 30,-55 14,-45" fill="#ffcc99"/>
      <!-- Face -->
      <circle cx="-10" cy="2" r="4" fill="#000"/>
      <circle cx="10" cy="2" r="4" fill="#000"/>
      <path d="M -8,15 q10,10 20,0" stroke="#000" stroke-width="3" fill="none" stroke-linecap="round"/>
    </g>
  </g>
</svg>

Reasoning trace (230 tokens)

We need to output a single fenced code block with the complete file. Since the task asks for "draw me an SVG of an astronaut cat skateboarding on the moon". It's an SVG drawing. So we should output an SVG file content. According to instructions: reply with exactly ONE fenced code block containing the complete file: ```svg. No extra text.

Thus we produce an SVG depicting an astronaut cat on a skateboard on the moon. Use shapes, maybe simple but recognizable. Provide appropriate viewBox, dimensions. Ensure it's self-contained. Let's craft an SVG.

We'll create a dark space background (black), a moon surface (gray circle) at bottom, a cat with astronaut helmet (circle), cat body, and a skateboard (board). Use groups.

We'll ensure viewBox like 0 0 500 400.

Let's design.

Moon: large gray circle partially visible at bottom.

Cat: body as ellipse, head as circle with ears. Helmet: larger circle with visor. Skateboard: rectangle board with wheels.

Add some stars.

We'll use simple paths.

Alright. Provide final answer: fenced code block with ```svg and content.