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.9 s
Cost: $0.0020
Output tokens: 3,858
Spent thinking: 0 tokens
Speed: 269.1 tok/s
Console errors: 0

First token after: 576 ms
First visible text after: 576 ms
Prompt tokens: 531
Code size: 6.6 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"low"}
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 · 133 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="#05071a"/>
      <stop offset="0.6" stop-color="#14204a"/>
      <stop offset="1" stop-color="#2b3a6e"/>
    </linearGradient>
    <radialGradient id="moon" cx="0.35" cy="0.35" r="0.7">
      <stop offset="0" stop-color="#f4f4ee"/>
      <stop offset="0.7" stop-color="#c9c9c2"/>
      <stop offset="1" stop-color="#9a9a94"/>
    </radialGradient>
    <radialGradient id="helmet" cx="0.35" cy="0.3" r="0.8">
      <stop offset="0" stop-color="#e8f7ff" stop-opacity="0.9"/>
      <stop offset="0.5" stop-color="#7fc4ec" stop-opacity="0.5"/>
      <stop offset="1" stop-color="#1d4e78" stop-opacity="0.7"/>
    </radialGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#f5f5f7"/>
      <stop offset="1" stop-color="#b8bcc6"/>
    </linearGradient>
    <linearGradient id="deck" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#e8492f"/>
      <stop offset="0.5" stop-color="#ff7a3d"/>
      <stop offset="1" stop-color="#e8492f"/>
    </linearGradient>
  </defs>

  <!-- Sky & stars -->
  <rect width="1280" height="800" fill="url(#sky)"/>
  <g fill="#ffffff">
    <circle cx="80" cy="90" r="1.5"/><circle cx="220" cy="180" r="1"/>
    <circle cx="390" cy="60" r="1.8"/><circle cx="520" cy="150" r="1.2"/>
    <circle cx="700" cy="80" r="1.4"/><circle cx="860" cy="200" r="1"/>
    <circle cx="1000" cy="110" r="1.6"/><circle cx="1150" cy="60" r="1.2"/>
    <circle cx="1220" cy="240" r="1"/><circle cx="310" cy="280" r="1"/>
    <circle cx="640" cy="260" r="1.3"/><circle cx="1080" cy="320" r="1"/>
    <circle cx="150" cy="340" r="1.2"/><circle cx="960" cy="400" r="1.1"/>
  </g>

  <!-- Earth in the distance -->
  <circle cx="1100" cy="160" r="70" fill="#3f7fd1"/>
  <path d="M1060 130 q25 -10 40 10 q10 20 -10 30 q-25 5 -30 -15 z" fill="#5fbf6a"/>
  <path d="M1110 170 q30 -5 35 20 q-5 20 -30 15 q-15 -10 -5 -35 z" fill="#5fbf6a"/>
  <circle cx="1100" cy="160" r="70" fill="none" stroke="#9fd4ff" stroke-opacity="0.35" stroke-width="3"/>

  <!-- Moon surface -->
  <path d="M0 560 Q200 500 420 540 T820 520 T1280 540 L1280 800 L0 800 Z" fill="url(#moon)"/>
  <path d="M0 600 Q260 570 500 610 T1000 600 T1280 620 L1280 800 L0 800 Z" fill="#b5b5ae"/>

  <!-- Craters -->
  <g fill="#9d9d96" opacity="0.8">
    <ellipse cx="180" cy="650" rx="60" ry="14"/>
    <ellipse cx="960" cy="690" rx="90" ry="18"/>
    <ellipse cx="620" cy="740" rx="45" ry="10"/>
    <ellipse cx="1180" cy="600" rx="30" ry="7"/>
  </g>
  <g fill="#c8c8c1">
    <ellipse cx="180" cy="646" rx="52" ry="8"/>
    <ellipse cx="960" cy="684" rx="80" ry="12"/>
  </g>

  <!-- Rocks -->
  <path d="M300 580 l20 -30 l25 10 l10 30 z" fill="#8e8e88"/>
  <path d="M1040 560 l18 -22 l22 8 l8 22 z" fill="#8e8e88"/>

  <!-- Skateboard shadow -->
  <ellipse cx="640" cy="642" rx="170" ry="8" fill="#000" opacity="0.3"/>

  <!-- Skateboard -->
  <g>
    <path d="M470 620 Q640 606 810 620 Q825 628 810 634 Q640 644 470 634 Q455 628 470 620 Z" fill="url(#deck)"/>
    <path d="M475 634 Q640 644 805 634" stroke="#3a1a10" stroke-width="2" fill="none"/>
    <!-- Trucks & wheels -->
    <rect x="520" y="634" width="60" height="6" fill="#444"/>
    <rect x="700" y="634" width="60" height="6" fill="#444"/>
    <circle cx="535" cy="646" r="9" fill="#e6e6e6" stroke="#333" stroke-width="2"/>
    <circle cx="567" cy="646" r="9" fill="#e6e6e6" stroke="#333" stroke-width="2"/>
    <circle cx="715" cy="646" r="9" fill="#e6e6e6" stroke="#333" stroke-width="2"/>
    <circle cx="747" cy="646" r="9" fill="#e6e6e6" stroke="#333" stroke-width="2"/>
  </g>

  <!-- Dust puffs behind wheels -->
  <g fill="#ffffff" opacity="0.5">
    <circle cx="460" cy="652" r="6"/><circle cx="440" cy="648" r="9"/><circle cx="418" cy="656" r="5"/>
  </g>

  <!-- Astronaut cat -->
  <g transform="translate(640 420)">
    <!-- Tail -->
    <path d="M-60 110 Q-130 100 -120 40 Q-115 20 -100 30" stroke="#f4f4f4" stroke-width="16" fill="none" stroke-linecap="round"/>
    <!-- Legs -->
    <path d="M-25 150 L-35 205" stroke="url(#suit)" stroke-width="30" stroke-linecap="round"/>
    <path d="M25 150 L40 205" stroke="url(#suit)" stroke-width="30" stroke-linecap="round"/>
    <ellipse cx="-38" cy="212" rx="22" ry="12" fill="#e0e3ea"/>
    <ellipse cx="44" cy="212" rx="22" ry="12" fill="#e0e3ea"/>
    <!-- Body / suit -->
    <rect x="-70" y="-20" width="140" height="180" rx="60" fill="url(#suit)" stroke="#8a8f9b" stroke-width="3"/>
    <!-- Chest panel -->
    <rect x="-35" y="20" width="70" height="46" rx="8" fill="#2d3a5c"/>
    <circle cx="-20" cy="43" r="5" fill="#6cff9a"/>
    <circle cx="0" cy="43" r="5" fill="#ffd166"/>
    <circle cx="20" cy="43" r="5" fill="#ff6b6b"/>
    <!-- Arms -->
    <path d="M-60 20 Q-110 60 -95 110" stroke="url(#suit)" stroke-width="28" fill="none" stroke-linecap="round"/>
    <path d="M60 20 Q105 40 115 -5" stroke="url(#suit)" stroke-width="28" fill="none" stroke-linecap="round"/>
    <ellipse cx="-95" cy="118" rx="16" ry="14" fill="#e0e3ea"/>
    <ellipse cx="117" cy="-8" rx="16" ry="14" fill="#e0e3ea"/>
    <!-- Oxygen tank -->
    <rect x="-55" y="-60" width="110" height="50" rx="22" fill="#5b6478"/>
    <rect x="-40" y="-52" width="10" height="34" fill="#89a0c9"/>
    <!-- Helmet -->
    <circle cx="0" cy="-110" r="72" fill="url(#suit)" stroke="#8a8f9b" stroke-width="3"/>
    <ellipse cx="0" cy="-110" rx="58" ry="52" fill="url(#helmet)" stroke="#1d4e78" stroke-width="2"/>
    <path d="M-35 -135 Q-20 -152 -5 -140" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.8"/>
    <!-- Cat head inside helmet -->
    <g>
      <path d="M-34 -100 L-30 -134 L-12 -116 Z" fill="#f2a65a"/>
      <path d="M34 -100 L30 -134 L12 -116 Z" fill="#f2a65a"/>
      <ellipse cx="0" cy="-100" rx="36" ry="32" fill="#f2a65a"/>
      <ellipse cx="-13" cy="-104" rx="5" ry="7" fill="#1b1b1b"/>
      <ellipse cx="13" cy="-104" rx="5" ry="7" fill="#1b1b1b"/>
      <circle cx="-11" cy="-106" r="1.5" fill="#fff"/>
      <circle cx="15" cy="-106" r="1.5" fill="#fff"/>
      <path d="M-4 -92 L4 -92 L0 -87 Z" fill="#e0707a"/>
      <path d="M0 -87 Q-4 -82 -8 -84 M0 -87 Q4 -82 8 -84" stroke="#1b1b1b" stroke-width="1.5" fill="none"/>
      <path d="M-30 -94 L-50 -98 M-30 -90 L-50 -88 M30 -94 L50 -98 M30 -90 L50 -88" stroke="#fff" stroke-width="1.5"/>
    </g>
  </g>

  <!-- Caption -->
  <text x="640" y="770" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="26" fill="#ffffff" opacity="0.85">Astronaut Cat Shreds the Moon</text>
</svg>