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: 14.6 s
Cost: $0.0019
Output tokens: 3,708
Spent thinking: 0 tokens
Speed: 271.2 tok/s
Console errors: 0

First token after: 944 ms
First visible text after: 944 ms
Prompt tokens: 530
Code size: 6.4 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"none"}
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 · 122 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="1280" height="800">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#050816"/>
      <stop offset="60%" stop-color="#1a1f3d"/>
      <stop offset="100%" stop-color="#2b2f55"/>
    </linearGradient>
    <radialGradient id="earth" cx="0.35" cy="0.35" r="0.7">
      <stop offset="0%" stop-color="#7fd3ff"/>
      <stop offset="70%" stop-color="#2a6fb8"/>
      <stop offset="100%" stop-color="#0d2d55"/>
    </radialGradient>
    <radialGradient id="moonGrad" cx="0.4" cy="0.4" r="0.7">
      <stop offset="0%" stop-color="#f4f4f0"/>
      <stop offset="100%" stop-color="#9c9ca6"/>
    </radialGradient>
    <linearGradient id="visor" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#7fe0ff"/>
      <stop offset="100%" stop-color="#1d4e7a"/>
    </linearGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#c9d1dc"/>
    </linearGradient>
    <linearGradient id="deck" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ff5d8f"/>
      <stop offset="100%" stop-color="#b8325c"/>
    </linearGradient>
  </defs>

  <!-- Sky and stars -->
  <rect width="1280" height="800" fill="url(#sky)"/>
  <g fill="#ffffff">
    <circle cx="120" cy="90" r="2"/><circle cx="260" cy="60" r="1.5"/>
    <circle cx="410" cy="130" r="2"/><circle cx="560" cy="50" r="1.5"/>
    <circle cx="700" cy="150" r="2.5"/><circle cx="860" cy="80" r="1.5"/>
    <circle cx="1000" cy="180" r="2"/><circle cx="1120" cy="60" r="1.5"/>
    <circle cx="1200" cy="220" r="2"/><circle cx="180" cy="230" r="1.5"/>
    <circle cx="330" cy="290" r="1"/><circle cx="640" cy="260" r="1.5"/>
    <circle cx="930" cy="300" r="1"/><circle cx="1060" cy="340" r="2"/>
  </g>

  <!-- Earth -->
  <circle cx="1040" cy="170" r="90" fill="url(#earth)"/>
  <path d="M1000 140 q30 -20 60 0 q10 25 -15 35 q-30 5 -45 -35z" fill="#4caf50" opacity="0.8"/>
  <path d="M1060 200 q25 5 30 30 q-15 20 -35 5z" fill="#4caf50" opacity="0.8"/>

  <!-- Moon surface -->
  <path d="M0 560 Q200 520 420 555 T820 545 T1280 530 L1280 800 L0 800Z" fill="url(#moonGrad)"/>
  <!-- Craters -->
  <ellipse cx="180" cy="650" rx="60" ry="14" fill="#8a8a94" opacity="0.6"/>
  <ellipse cx="520" cy="700" rx="90" ry="18" fill="#8a8a94" opacity="0.6"/>
  <ellipse cx="960" cy="640" rx="70" ry="13" fill="#8a8a94" opacity="0.6"/>
  <ellipse cx="1120" cy="730" rx="45" ry="10" fill="#8a8a94" opacity="0.6"/>
  <circle cx="330" cy="620" r="14" fill="#8a8a94" opacity="0.5"/>
  <circle cx="760" cy="610" r="10" fill="#8a8a94" opacity="0.5"/>

  <!-- Skateboard -->
  <g transform="translate(640 565)">
    <ellipse cx="0" cy="12" rx="150" ry="6" fill="#000" opacity="0.25"/>
    <path d="M-170 -8 Q-160 -18 -140 -14 L140 -14 Q160 -18 170 -8 Q168 4 150 6 L-150 6 Q-168 4 -170 -8Z" fill="url(#deck)"/>
    <path d="M-160 -4 L160 -4" stroke="#ffb3c8" stroke-width="2" opacity="0.6"/>
    <!-- trucks -->
    <rect x="-110" y="6" width="34" height="6" fill="#888"/>
    <rect x="76" y="6" width="34" height="6" fill="#888"/>
    <!-- wheels -->
    <circle cx="-95" cy="20" r="11" fill="#222"/><circle cx="-95" cy="20" r="4" fill="#ffd166"/>
    <circle cx="93" cy="20" r="11" fill="#222"/><circle cx="93" cy="20" r="4" fill="#ffd166"/>
  </g>

  <!-- Astronaut cat -->
  <g transform="translate(640 380)">
    <!-- tail -->
    <path d="M-70 60 Q-130 40 -120 -10 Q-116 -30 -100 -20" fill="none" stroke="#f0a04b" stroke-width="16" stroke-linecap="round"/>
    <!-- legs -->
    <rect x="-40" y="100" width="28" height="90" rx="12" fill="url(#suit)" stroke="#8d97a6" stroke-width="2"/>
    <rect x="12" y="100" width="28" height="90" rx="12" fill="url(#suit)" stroke="#8d97a6" stroke-width="2"/>
    <!-- boots -->
    <ellipse cx="-26" cy="192" rx="22" ry="11" fill="#444"/>
    <ellipse cx="26" cy="192" rx="22" ry="11" fill="#444"/>
    <!-- torso / suit -->
    <rect x="-62" y="10" width="124" height="110" rx="40" fill="url(#suit)" stroke="#8d97a6" stroke-width="2"/>
    <rect x="-30" y="40" width="60" height="30" rx="6" fill="#ff8a3d"/>
    <circle cx="-20" cy="55" r="3" fill="#fff"/><circle cx="0" cy="55" r="3" fill="#fff"/><circle cx="20" cy="55" r="3" fill="#fff"/>
    <!-- arms -->
    <path d="M-55 40 Q-95 60 -90 100" fill="none" stroke="url(#suit)" stroke-width="26" stroke-linecap="round"/>
    <path d="M-55 40 Q-95 60 -90 100" fill="none" stroke="#8d97a6" stroke-width="2" transform="translate(0 0)" opacity="0"/>
    <path d="M55 40 Q90 20 100 -5" fill="none" stroke="url(#suit)" stroke-width="26" stroke-linecap="round"/>
    <!-- gloves -->
    <circle cx="-90" cy="104" r="14" fill="#ff8a3d"/>
    <circle cx="102" cy="-8" r="14" fill="#ff8a3d"/>
    <!-- helmet -->
    <circle cx="0" cy="-40" r="66" fill="url(#suit)" stroke="#8d97a6" stroke-width="3"/>
    <!-- visor -->
    <ellipse cx="0" cy="-38" rx="48" ry="38" fill="url(#visor)" stroke="#1d4e7a" stroke-width="2"/>
    <ellipse cx="-14" cy="-52" rx="12" ry="7" fill="#fff" opacity="0.6"/>
    <!-- cat ears poking from helmet -->
    <path d="M-44 -86 L-50 -128 L-14 -100Z" fill="#f0a04b" stroke="#c97a2a" stroke-width="2"/>
    <path d="M44 -86 L50 -128 L14 -100Z" fill="#f0a04b" stroke="#c97a2a" stroke-width="2"/>
    <path d="M-40 -92 L-44 -116 L-22 -100Z" fill="#ffc9a0"/>
    <path d="M40 -92 L44 -116 L22 -100Z" fill="#ffc9a0"/>
    <!-- whiskers on visor -->
    <g stroke="#0d2d55" stroke-width="2" opacity="0.5">
      <line x1="-30" y1="-30" x2="-6" y2="-26"/>
      <line x1="-30" y1="-20" x2="-6" y2="-22"/>
      <line x1="30" y1="-30" x2="6" y2="-26"/>
      <line x1="30" y1="-20" x2="6" y2="-22"/>
    </g>
    <!-- cat eyes -->
    <ellipse cx="-16" cy="-38" rx="5" ry="7" fill="#0d2d55"/>
    <ellipse cx="16" cy="-38" rx="5" ry="7" fill="#0d2d55"/>
    <circle cx="-14" cy="-40" r="2" fill="#fff"/>
    <circle cx="18" cy="-40" r="2" fill="#fff"/>
    <!-- nose and mouth -->
    <path d="M-4 -26 L4 -26 L0 -22Z" fill="#ff7aa2"/>
    <path d="M0 -22 Q-4 -16 -8 -20 M0 -22 Q4 -16 8 -20" fill="none" stroke="#0d2d55" stroke-width="2"/>
  </g>

  <!-- Title -->
  <text x="60" y="90" font-family="Georgia, serif" font-size="44" fill="#ffffff" font-weight="bold">Moon Kitty Skate Club</text>
  <text x="62" y="124" font-family="Helvetica, Arial, sans-serif" font-size="20" fill="#b8c4ff">Astronaut cat, one small step for cats.</text>
</svg>