Skateboarding astronaut catOne-line

Claude Haiku 5.5

by AnthropicReasoningClean

Open in new window

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

How it went

Total time: 32.4 s
Cost: $0.0037
Output tokens: 7,257
Spent thinking: 2,536 tokens
Speed: 236.7 tok/s
Console errors: 0

First token after: 1.8 s
First visible text after: 16.1 s
Prompt tokens: 531
Code size: 8.2 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"medium"}
Max output: 32,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 · 185 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#05061a"/>
      <stop offset="1" stop-color="#14123a"/>
    </linearGradient>
    <radialGradient id="earth" cx="0.35" cy="0.35" r="0.7">
      <stop offset="0" stop-color="#8fd3ff"/>
      <stop offset="0.5" stop-color="#2a7fd4"/>
      <stop offset="1" stop-color="#0b2e66"/>
    </radialGradient>
    <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#b7b7c2"/>
      <stop offset="0.4" stop-color="#8d8d99"/>
      <stop offset="1" stop-color="#4f4f5c"/>
    </linearGradient>
    <linearGradient id="visor" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1d3f7a"/>
      <stop offset="1" stop-color="#07142e"/>
    </linearGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#e3e8f0"/>
      <stop offset="1" stop-color="#ffffff"/>
    </linearGradient>
    <linearGradient id="deck" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ff7a95"/>
      <stop offset="1" stop-color="#d43d62"/>
    </linearGradient>
  </defs>

  <!-- Space background -->
  <rect width="800" height="600" fill="url(#sky)"/>

  <!-- Stars -->
  <g fill="#ffffff">
    <circle cx="40" cy="50" r="1.5"/>
    <circle cx="120" cy="90" r="1"/>
    <circle cx="210" cy="40" r="1.8"/>
    <circle cx="290" cy="120" r="1"/>
    <circle cx="350" cy="30" r="1.4"/>
    <circle cx="520" cy="60" r="1"/>
    <circle cx="600" cy="30" r="1.6"/>
    <circle cx="740" cy="70" r="1.2"/>
    <circle cx="770" cy="200" r="1"/>
    <circle cx="60" cy="210" r="1.2"/>
    <circle cx="180" cy="250" r="1"/>
    <circle cx="450" cy="170" r="1.3"/>
    <circle cx="520" cy="260" r="1"/>
    <circle cx="730" cy="330" r="1.5"/>
    <circle cx="25" cy="340" r="1"/>
    <circle cx="90" cy="400" r="1.2"/>
    <circle cx="240" cy="330" r="1"/>
    <circle cx="560" cy="380" r="1.1"/>
  </g>

  <!-- Earth -->
  <circle cx="660" cy="120" r="55" fill="url(#earth)"/>
  <path d="M630 95 Q648 88 660 100 Q670 115 655 125 Q640 130 635 115 Z" fill="#4caf6a" opacity="0.8"/>
  <path d="M672 140 Q690 135 700 150 Q695 165 680 160 Z" fill="#4caf6a" opacity="0.8"/>
  <circle cx="660" cy="120" r="55" fill="none" stroke="#9fdcff" stroke-opacity="0.35" stroke-width="3"/>

  <!-- Distant hills -->
  <path d="M0 470 Q90 400 190 455 Q280 395 380 450 Q470 390 580 452 Q680 405 800 462 L800 600 L0 600 Z" fill="#2c2c3d"/>

  <!-- Moon surface -->
  <path d="M0 500 Q200 470 400 490 T800 480 L800 600 L0 600 Z" fill="url(#ground)"/>

  <!-- Craters -->
  <g fill="#6f6f7c" opacity="0.7">
    <ellipse cx="80" cy="530" rx="34" ry="9"/>
    <ellipse cx="170" cy="560" rx="50" ry="12"/>
    <ellipse cx="610" cy="520" rx="42" ry="10"/>
    <ellipse cx="700" cy="565" rx="60" ry="13"/>
    <ellipse cx="540" cy="575" rx="22" ry="6"/>
  </g>
  <g fill="#9a9aa7" opacity="0.5">
    <ellipse cx="80" cy="527" rx="30" ry="4"/>
    <ellipse cx="170" cy="556" rx="44" ry="5"/>
    <ellipse cx="610" cy="516" rx="36" ry="4"/>
  </g>

  <!-- Motion lines -->
  <g stroke="#ffffff" stroke-opacity="0.45" stroke-width="3" stroke-linecap="round">
    <line x1="160" y1="455" x2="230" y2="455"/>
    <line x1="150" y1="472" x2="235" y2="472"/>
    <line x1="170" y1="489" x2="220" y2="489"/>
  </g>

  <!-- Dust puffs -->
  <g fill="#d8d8e0" opacity="0.45">
    <circle cx="300" cy="486" r="11"/>
    <circle cx="279" cy="482" r="8"/>
    <circle cx="262" cy="489" r="6"/>
    <circle cx="246" cy="481" r="4"/>
  </g>

  <!-- Cat tail -->
  <path d="M356 386 Q312 378 302 336 Q298 314 312 308" fill="none" stroke="#f0a04b" stroke-width="13" stroke-linecap="round"/>
  <path d="M302 336 Q298 322 306 314" fill="none" stroke="#b86a24" stroke-width="5" stroke-linecap="round"/>

  <!-- Legs -->
  <rect x="362" y="376" width="24" height="80" rx="10" fill="#e3e8f0" stroke="#aab4c4" stroke-width="2"/>
  <rect x="404" y="376" width="24" height="80" rx="10" fill="#e3e8f0" stroke="#aab4c4" stroke-width="2"/>
  <!-- Boots -->
  <ellipse cx="372" cy="452" rx="17" ry="8" fill="#4a4f5e"/>
  <ellipse cx="416" cy="452" rx="17" ry="8" fill="#4a4f5e"/>

  <!-- Skateboard -->
  <rect x="290" y="455" width="200" height="11" rx="5.5" fill="url(#deck)"/>
  <rect x="318" y="466" width="22" height="5" rx="2" fill="#c9ced8"/>
  <rect x="442" y="466" width="22" height="5" rx="2" fill="#c9ced8"/>
  <circle cx="329" cy="480" r="9" fill="#1e1e28"/>
  <circle cx="329" cy="480" r="3" fill="#9aa3b5"/>
  <circle cx="453" cy="480" r="9" fill="#1e1e28"/>
  <circle cx="453" cy="480" r="3" fill="#9aa3b5"/>
  <!-- Deck graphic -->
  <path d="M320 460 L460 460" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2" stroke-linecap="round"/>

  <!-- Right arm (waving) -->
  <path d="M434 322 Q470 300 482 268" fill="none" stroke="#e3e8f0" stroke-width="22" stroke-linecap="round"/>
  <path d="M434 322 Q470 300 482 268" fill="none" stroke="#aab4c4" stroke-width="2" stroke-dasharray="0" opacity="0"/>
  <circle cx="483" cy="260" r="12" fill="#f4f6fa" stroke="#aab4c4" stroke-width="2"/>

  <!-- Torso -->
  <rect x="352" y="300" width="86" height="104" rx="40" fill="url(#suit)" stroke="#aab4c4" stroke-width="3"/>
  <!-- Chest panel -->
  <rect x="372" y="322" width="46" height="26" rx="5" fill="#3a6fd8"/>
  <circle cx="382" cy="335" r="3" fill="#7dff9e"/>
  <circle cx="394" cy="335" r="3" fill="#ffd166"/>
  <circle cx="406" cy="335" r="3" fill="#ff6b8a"/>
  <!-- Backpack hint -->
  <rect x="330" y="312" width="26" height="60" rx="8" fill="#9aa6bb"/>

  <!-- Left arm (balancing) -->
  <path d="M358 322 Q326 306 316 272" fill="none" stroke="#e3e8f0" stroke-width="22" stroke-linecap="round"/>
  <circle cx="314" cy="264" r="12" fill="#f4f6fa" stroke="#aab4c4" stroke-width="2"/>

  <!-- Neck ring -->
  <rect x="366" y="268" width="58" height="36" rx="12" fill="#c9d1de" stroke="#8e9aae" stroke-width="2"/>

  <!-- Helmet shell -->
  <circle cx="395" cy="225" r="72" fill="#f4f7fb" stroke="#aab4c4" stroke-width="4"/>
  <path d="M345 170 Q375 150 415 152" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" opacity="0.8"/>

  <!-- Visor -->
  <circle cx="395" cy="232" r="54" fill="url(#visor)" stroke="#6f8fbf" stroke-width="3"/>

  <!-- Cat ears -->
  <polygon points="352,210 358,178 384,202" fill="#f0a04b"/>
  <polygon points="356,204 360,186 378,200" fill="#ffb8b8"/>
  <polygon points="438,210 432,178 406,202" fill="#f0a04b"/>
  <polygon points="434,204 430,186 412,200" fill="#ffb8b8"/>

  <!-- Cat head -->
  <ellipse cx="395" cy="240" rx="42" ry="36" fill="#f0a04b"/>
  <!-- Stripes -->
  <path d="M395 206 L395 218" stroke="#b86a24" stroke-width="4" stroke-linecap="round"/>
  <path d="M380 210 L384 221" stroke="#b86a24" stroke-width="3.5" stroke-linecap="round"/>
  <path d="M410 210 L406 221" stroke="#b86a24" stroke-width="3.5" stroke-linecap="round"/>
  <!-- Cheeks -->
  <ellipse cx="366" cy="252" rx="7" ry="5" fill="#ffb8b8" opacity="0.7"/>
  <ellipse cx="424" cy="252" rx="7" ry="5" fill="#ffb8b8" opacity="0.7"/>
  <!-- Eyes -->
  <ellipse cx="380" cy="236" rx="5.5" ry="6.5" fill="#14203a"/>
  <ellipse cx="410" cy="236" rx="5.5" ry="6.5" fill="#14203a"/>
  <circle cx="382" cy="233" r="2" fill="#ffffff"/>
  <circle cx="412" cy="233" r="2" fill="#ffffff"/>
  <!-- Nose and mouth -->
  <path d="M390 249 L400 249 L395 255 Z" fill="#ff7a9a"/>
  <path d="M395 255 Q390 262 384 258 M395 255 Q400 262 406 258" fill="none" stroke="#14203a" stroke-width="2" stroke-linecap="round"/>
  <!-- Whiskers -->
  <g stroke="#14203a" stroke-width="1.5" stroke-linecap="round" opacity="0.8">
    <line x1="352" y1="248" x2="368" y2="250"/>
    <line x1="352" y1="256" x2="368" y2="255"/>
    <line x1="438" y1="248" x2="422" y2="250"/>
    <line x1="438" y1="256" x2="422" y2="255"/>
  </g>

  <!-- Visor glare -->
  <path d="M356 205 Q372 180 408 182" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" opacity="0.45"/>
  <path d="M366 214 Q374 200 388 196" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>

  <!-- Title -->
  <text x="400" y="580" text-anchor="middle" font-family="Trebuchet MS, Arial, sans-serif" font-size="22" font-weight="bold" fill="#e8ecff" letter-spacing="3">MOON SKATE CLUB</text>
</svg>

Reasoning trace (2,536 tokens)

I'm sketching out an SVG of an astronaut cat skateboarding on the moon, with a single fenced svg block as the output. I'm planning a moon surface gradient with craters, Earth in the sky, and stars, plus an astronaut cat with a visor-glow helmet, ears, and a spacesuit body.

Continuing the SVG, I'm laying out coordinates in a 800x600 viewBox: a curved moon horizon, a skateboard with two wheels, and the astronaut cat standing on it with a white helmet and a visor overlay.

Still writing the SVG code...

Still writing SVG code...

Still writing SVG code...

Still writing SVG code...

Still writing SVG code...

Still writing SVG code...

Still writing SVG code...

Still writing SVG code...