Skateboarding astronaut catOne-line

Claude Haiku 5.5

by AnthropicReasoning1 console error

Open in new window

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

How it went

Total time: 53.9 s
Cost: $0.0060
Output tokens: 11,856
Spent thinking: 6,239 tokens
Speed: 227.3 tok/s
Console errors: 1

First token after: 1.8 s
First visible text after: 37.7 s
Prompt tokens: 531
Code size: 9.7 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"high"}
Max output: 32,000 tokens
Generated: Nov 10, 2026

Console errors

Caught in the first 3 seconds after load, in a sandboxed iframe like the one above.

Error: <svg> attribute height: Expected length, "auto".

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 · 218 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="auto" style="max-width:800px;display:block;margin:0 auto">
  <defs>
    <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0b0f2a"/>
      <stop offset="1" stop-color="#1d1245"/>
    </linearGradient>
    <linearGradient id="groundGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#9a9aa8"/>
      <stop offset="1" stop-color="#4b4b59"/>
    </linearGradient>
    <radialGradient id="earthGrad" cx="0.35" cy="0.35" r="0.7">
      <stop offset="0" stop-color="#b5e3ff"/>
      <stop offset="0.6" stop-color="#3f86d8"/>
      <stop offset="1" stop-color="#1b3f8a"/>
    </radialGradient>
    <linearGradient id="helmetGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="1" stop-color="#cfd8e6"/>
    </linearGradient>
    <linearGradient id="visorGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#4a6fb3"/>
      <stop offset="1" stop-color="#0d1a3a"/>
    </linearGradient>
    <clipPath id="visorClip">
      <ellipse cx="390" cy="258" rx="54" ry="48"/>
    </clipPath>
  </defs>

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

  <!-- Stars -->
  <g fill="#ffffff">
    <circle cx="40" cy="50" r="1.5" opacity="0.9"/>
    <circle cx="120" cy="90" r="1" opacity="0.7"/>
    <circle cx="210" cy="40" r="1.2" opacity="0.8"/>
    <circle cx="300" cy="120" r="1" opacity="0.6"/>
    <circle cx="90" cy="180" r="1.4" opacity="0.9"/>
    <circle cx="180" cy="200" r="0.9" opacity="0.6"/>
    <circle cx="260" cy="30" r="1.3" opacity="0.8"/>
    <circle cx="470" cy="60" r="1" opacity="0.7"/>
    <circle cx="520" cy="150" r="1.2" opacity="0.8"/>
    <circle cx="610" cy="40" r="1" opacity="0.6"/>
    <circle cx="760" cy="70" r="1.5" opacity="0.9"/>
    <circle cx="740" cy="220" r="1" opacity="0.7"/>
    <circle cx="560" cy="250" r="0.9" opacity="0.6"/>
    <circle cx="40" cy="300" r="1.1" opacity="0.8"/>
    <circle cx="150" cy="330" r="0.8" opacity="0.6"/>
    <circle cx="20" cy="400" r="1.3" opacity="0.9"/>
    <circle cx="760" cy="330" r="1" opacity="0.7"/>
    <circle cx="700" cy="380" r="0.9" opacity="0.6"/>
    <circle cx="470" cy="300" r="0.8" opacity="0.5"/>
    <circle cx="350" cy="250" r="0.9" opacity="0.6"/>
    <circle cx="230" cy="260" r="1" opacity="0.7"/>
    <circle cx="770" cy="160" r="0.8" opacity="0.6"/>
    <circle cx="330" cy="170" r="0.7" opacity="0.5"/>
    <circle cx="600" cy="300" r="1" opacity="0.6"/>
  </g>

  <!-- Earth -->
  <g transform="translate(680 130)">
    <circle r="70" fill="#7ab8ff" opacity="0.15"/>
    <circle r="58" fill="url(#earthGrad)"/>
    <path d="M-30 -20 Q-10 -36 8 -26 Q20 -10 6 4 Q-6 14 -20 4 Q-34 -6 -30 -20Z" fill="#5fbf6a" opacity="0.9"/>
    <path d="M14 18 Q28 14 34 28 Q24 40 14 30Z" fill="#5fbf6a" opacity="0.9"/>
    <path d="M-40 30 Q-30 26 -24 36 Q-34 44 -42 38Z" fill="#5fbf6a" opacity="0.8"/>
    <ellipse cx="-14" cy="-38" rx="16" ry="5" fill="#ffffff" opacity="0.5"/>
  </g>

  <!-- Moon ground -->
  <path d="M0 468 C120 440 260 452 400 462 C540 472 660 438 800 452 L800 600 L0 600 Z" fill="url(#groundGrad)"/>
  <g fill="#3a3a46" opacity="0.55">
    <ellipse cx="120" cy="500" rx="40" ry="8"/>
    <ellipse cx="640" cy="530" rx="60" ry="10"/>
    <ellipse cx="700" cy="490" rx="20" ry="5"/>
    <ellipse cx="200" cy="560" rx="30" ry="7"/>
    <ellipse cx="520" cy="575" rx="45" ry="9"/>
    <ellipse cx="60" cy="545" rx="18" ry="4"/>
  </g>
  <g fill="#c4c4d0" opacity="0.35">
    <ellipse cx="120" cy="496" rx="34" ry="3"/>
    <ellipse cx="640" cy="524" rx="50" ry="3"/>
    <ellipse cx="200" cy="554" rx="24" ry="2"/>
  </g>

  <!-- Flag planted on the moon -->
  <line x1="560" y1="468" x2="560" y2="380" stroke="#dddddd" stroke-width="3" stroke-linecap="round"/>
  <path d="M560 382 L600 390 L560 400 Z" fill="#ff5a5a"/>

  <!-- Speed lines -->
  <g stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.4">
    <line x1="190" y1="420" x2="256" y2="420"/>
    <line x1="220" y1="440" x2="286" y2="440"/>
    <line x1="170" y1="456" x2="240" y2="456"/>
  </g>

  <!-- Skateboard -->
  <g transform="translate(390 448) rotate(-4)">
    <!-- Motion trail -->
    <rect x="-150" y="-6" width="260" height="8" rx="4" fill="#ff5e7e" opacity="0.15"/>
    <!-- Trucks -->
    <rect x="-92" y="4" width="20" height="6" rx="2" fill="#bbbbbb"/>
    <rect x="72" y="4" width="20" height="6" rx="2" fill="#bbbbbb"/>
    <!-- Wheels -->
    <g fill="#1a1a1a">
      <circle cx="-88" cy="16" r="8"/>
      <circle cx="-68" cy="16" r="8"/>
      <circle cx="68" cy="16" r="8"/>
      <circle cx="88" cy="16" r="8"/>
    </g>
    <g fill="#f5f5f5">
      <circle cx="-88" cy="16" r="2.5"/>
      <circle cx="-68" cy="16" r="2.5"/>
      <circle cx="68" cy="16" r="2.5"/>
      <circle cx="88" cy="16" r="2.5"/>
    </g>
    <!-- Deck -->
    <rect x="-130" y="-10" width="260" height="14" rx="7" fill="#ff5e7e"/>
    <rect x="-120" y="-6" width="240" height="2" rx="1" fill="#ffffff" opacity="0.5"/>
    <rect x="-128" y="-10" width="14" height="14" rx="6" fill="#ff8fa6" opacity="0.6"/>
    <rect x="114" y="-10" width="14" height="14" rx="6" fill="#ff8fa6" opacity="0.6"/>
  </g>

  <!-- Dust puffs kicked up by the wheels -->
  <g fill="#d8d8e0" opacity="0.5">
    <circle cx="330" cy="462" r="10"/>
    <circle cx="352" cy="466" r="7"/>
    <circle cx="446" cy="462" r="9"/>
    <circle cx="470" cy="458" r="6"/>
    <circle cx="316" cy="470" r="5"/>
  </g>

  <!-- Tail -->
  <path d="M322 392 C270 400 236 360 250 318 C256 300 274 298 276 314" fill="none" stroke="#f29a3b" stroke-width="14" stroke-linecap="round"/>
  <g stroke="#8a4515" stroke-width="4" stroke-linecap="round" fill="none">
    <path d="M262 352 L274 346"/>
    <path d="M250 336 L262 332"/>
    <path d="M256 370 L268 362"/>
  </g>

  <!-- Backpack (life support) -->
  <rect x="298" y="300" width="42" height="104" rx="12" fill="#b7bfcc" stroke="#8d97a8" stroke-width="2"/>
  <circle cx="313" cy="322" r="4" fill="#7cff9e"/>
  <circle cx="325" cy="322" r="4" fill="#ffe066"/>

  <!-- Suit body -->
  <ellipse cx="392" cy="362" rx="50" ry="66" fill="#f4f6fa" stroke="#c3cad6" stroke-width="3"/>
  <rect x="372" y="338" width="40" height="28" rx="6" fill="#ff8a3d"/>
  <circle cx="382" cy="352" r="3" fill="#7cffb2"/>
  <circle cx="392" cy="352" r="3" fill="#ffe066"/>
  <circle cx="402" cy="352" r="3" fill="#7cc7ff"/>
  <rect x="352" y="394" width="80" height="8" rx="4" fill="#aab3c2"/>

  <!-- Legs -->
  <rect x="358" y="398" width="24" height="38" rx="10" fill="#f4f6fa" stroke="#c3cad6" stroke-width="2"/>
  <rect x="398" y="398" width="24" height="38" rx="10" fill="#f4f6fa" stroke="#c3cad6" stroke-width="2"/>
  <!-- Boots -->
  <ellipse cx="370" cy="434" rx="18" ry="9" fill="#4d5669"/>
  <ellipse cx="410" cy="434" rx="18" ry="9" fill="#4d5669"/>

  <!-- Arms -->
  <path d="M356 348 L306 322" stroke="#f4f6fa" stroke-width="20" stroke-linecap="round"/>
  <path d="M428 350 L454 388" stroke="#f4f6fa" stroke-width="20" stroke-linecap="round"/>
  <circle cx="300" cy="318" r="12" fill="#e6ebf3" stroke="#9aa5b8" stroke-width="1.5"/>
  <circle cx="458" cy="394" r="11" fill="#e6ebf3" stroke="#9aa5b8" stroke-width="1.5"/>

  <!-- Neck ring -->
  <rect x="362" y="290" width="56" height="14" rx="5" fill="#aab3c2"/>

  <!-- Antenna -->
  <line x1="430" y1="190" x2="446" y2="168" stroke="#aab3c2" stroke-width="4" stroke-linecap="round"/>
  <circle cx="448" cy="166" r="4" fill="#ff5a5a"/>

  <!-- Helmet -->
  <circle cx="390" cy="255" r="72" fill="url(#helmetGrad)" stroke="#c3cad6" stroke-width="3"/>

  <!-- Visor with cat -->
  <ellipse cx="390" cy="258" rx="54" ry="48" fill="url(#visorGrad)"/>
  <g clip-path="url(#visorClip)">
    <!-- Ears -->
    <polygon points="357,246 352,214 380,236" fill="#f29a3b"/>
    <polygon points="423,246 428,214 400,236" fill="#f29a3b"/>
    <polygon points="360,240 358,222 374,236" fill="#ffb3a7"/>
    <polygon points="420,240 422,222 406,236" fill="#ffb3a7"/>
    <!-- Head -->
    <ellipse cx="390" cy="266" rx="36" ry="32" fill="#f29a3b"/>
    <!-- Forehead stripes -->
    <path d="M384 240 L387 250 M396 240 L393 250 M390 238 L390 250" stroke="#b8601c" stroke-width="3" stroke-linecap="round" fill="none"/>
    <!-- Muzzle -->
    <ellipse cx="390" cy="280" rx="18" ry="12" fill="#fff3e0"/>
    <!-- Eyes -->
    <ellipse cx="377" cy="262" rx="5" ry="6.5" fill="#1e2b1e"/>
    <ellipse cx="403" cy="262" rx="5" ry="6.5" fill="#1e2b1e"/>
    <circle cx="378.5" cy="260" r="1.8" fill="#ffffff"/>
    <circle cx="404.5" cy="260" r="1.8" fill="#ffffff"/>
    <!-- Nose -->
    <path d="M386 274 L394 274 L390 279 Z" fill="#ff7fa0"/>
    <!-- Mouth -->
    <path d="M390 279 Q386 284 382 282 M390 279 Q394 284 398 282" stroke="#7a3a1a" stroke-width="1.6" fill="none" stroke-linecap="round"/>
    <!-- Whiskers -->
    <g stroke="#ffffff" stroke-width="1.2" stroke-linecap="round">
      <line x1="372" y1="278" x2="350" y2="274"/>
      <line x1="372" y1="283" x2="350" y2="286"/>
      <line x1="408" y1="278" x2="430" y2="274"/>
      <line x1="408" y1="283" x2="430" y2="286"/>
    </g>
  </g>
  <!-- Visor rim -->
  <ellipse cx="390" cy="258" rx="54" ry="48" fill="none" stroke="#6b7385" stroke-width="4"/>
  <!-- Visor shine -->
  <path d="M352 236 Q372 214 404 212 Q370 226 358 252 Z" fill="#ffffff" opacity="0.35"/>
  <!-- Helmet highlight -->
  <path d="M330 226 Q340 190 372 186" stroke="#ffffff" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.6"/>

  <!-- Title -->
  <text x="30" y="50" font-family="Helvetica, Arial, sans-serif" font-size="22" font-weight="bold" fill="#ffffff" opacity="0.9">Lunar Kickflip Club</text>
  <text x="30" y="74" font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#9fb0d8" opacity="0.8">Gravity optional. Style mandatory.</text>
</svg>

Reasoning trace (6,239 tokens)

I'm working out an SVG of an astronaut cat skateboarding on the moon, as one self-contained fenced block with nothing around it. I'm planning a 800x600 viewBox with a starfield, Earth in a corner, and gray crater hills across the moon's surface, keeping the scene moderate, and I'm starting to design the cat in a white spacesuit with a helmet.

Continuing the SVG, I'm detailing the cat's helmet, with its visor and reflection, and deciding how the tail and motion effects fit in. Then I'm moving on to the ground, the craters, and the skateboard, which I'm placing under the cat's feet.

Still writing the cat's visor and tail...

Still writing the cat's head and ears...

Still writing the SVG code...

Still writing the skateboard and its wheels...

Still writing the cat's body and backpack...

Still working on the cat's boots and legs, and I'm adjusting the skateboard's position so the feet sit just on the deck.

Still working on the SVG's boots and legs, placing them so the feet sit on the deck.

Still writing the cat's arms and helmet...

Still working on the cat's visor and the placement of its head, checking that the ears fit inside the visor's outline.

Still writing the cat's head and ears...

Still working on the cat's face, adding the forehead stripes, muzzle, eyes, nose and mouth...

Still writing the cat's visor shine and whiskers...

Still writing the SVG's helmet shine, antenna and dust puffs...

Still writing the SVG's ground, dust and motion lines...

Still writing the Earth's continents and glow...

Still writing the SVG's defs and gradients...

Still writing the SVG's visor gradient and clip...

Still writing the SVG's moon ground, dust and the stars...

Still writing the Earth's continents and the moon's backpack and tail...

Still writing the cat's tail and arms...

Still working on the cat's legs and boots, placing them so they sit on the skateboard's deck.

Still working on the cat's body and chest panel, adjusting the legs so they sit over the body's lower edge.

Still writing the cat's chest panel lights and belt...