Skateboarding astronaut catOne-line

Claude Haiku 4.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: 8.9 s
Cost: $0.013
Output tokens: 2,509
Spent thinking: 0 tokens
Speed: 315.4 tok/s
Console errors: 0

First token after: 920 ms
First visible text after: 920 ms
Prompt tokens: 369
Code size: 6.0 KB
Finish reason: stop
Served by: Amazon Bedrock
Model id: anthropic/claude-haiku-4.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 · 136 lines

Download

<svg viewBox="0 0 1280 800" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
      }
      @keyframes roll {
        0% { transform: rotateZ(0deg); }
        100% { transform: rotateZ(360deg); }
      }
      .skateboard-wheels {
        animation: roll 2s linear infinite;
        transform-origin: 640px 500px;
      }
      .astronaut-cat {
        animation: float 3s ease-in-out infinite;
      }
    </style>
  </defs>
  
  <!-- Star field -->
  <circle cx="100" cy="80" r="1.5" fill="white" opacity="0.8"/>
  <circle cx="250" cy="120" r="1" fill="white" opacity="0.6"/>
  <circle cx="450" cy="60" r="1.2" fill="white" opacity="0.7"/>
  <circle cx="620" cy="100" r="1" fill="white" opacity="0.5"/>
  <circle cx="800" cy="90" r="1.5" fill="white" opacity="0.8"/>
  <circle cx="950" cy="140" r="1" fill="white" opacity="0.6"/>
  <circle cx="1100" cy="70" r="1.2" fill="white" opacity="0.7"/>
  <circle cx="1200" cy="150" r="1" fill="white" opacity="0.5"/>
  <circle cx="180" cy="250" r="1" fill="white" opacity="0.6"/>
  <circle cx="1050" cy="300" r="1.2" fill="white" opacity="0.7"/>
  
  <!-- Moon surface -->
  <ellipse cx="640" cy="600" rx="800" ry="250" fill="#d3d3d3"/>
  
  <!-- Moon craters -->
  <circle cx="300" cy="550" r="80" fill="#a9a9a9" opacity="0.7"/>
  <circle cx="900" cy="620" r="120" fill="#a9a9a9" opacity="0.6"/>
  <circle cx="500" cy="680" r="60" fill="#a9a9a9" opacity="0.5"/>
  <circle cx="1000" cy="580" r="40" fill="#a9a9a9" opacity="0.6"/>
  
  <!-- Skateboard -->
  <g class="skateboard-wheels">
    <!-- Deck -->
    <rect x="520" y="470" width="240" height="40" rx="15" fill="#ff6b35"/>
    
    <!-- Grip tape pattern -->
    <line x1="540" y1="480" x2="740" y2="480" stroke="#333" stroke-width="2" opacity="0.3"/>
    <line x1="540" y1="490" x2="740" y2="490" stroke="#333" stroke-width="2" opacity="0.3"/>
    <line x1="540" y1="500" x2="740" y2="500" stroke="#333" stroke-width="2" opacity="0.3"/>
    
    <!-- Wheels -->
    <circle cx="560" cy="510" r="20" fill="#222"/>
    <circle cx="560" cy="510" r="15" fill="#444"/>
    <circle cx="560" cy="510" r="10" fill="#666"/>
    
    <circle cx="720" cy="510" r="20" fill="#222"/>
    <circle cx="720" cy="510" r="15" fill="#444"/>
    <circle cx="720" cy="510" r="10" fill="#666"/>
    
    <!-- Axles -->
    <line x1="540" y1="510" x2="740" y2="510" stroke="#333" stroke-width="4"/>
  </g>
  
  <!-- Astronaut Cat -->
  <g class="astronaut-cat">
    <!-- Spacesuit body -->
    <ellipse cx="640" cy="320" rx="85" ry="110" fill="#e8e8ff" stroke="#4a4a6a" stroke-width="3"/>
    
    <!-- Arms -->
    <ellipse cx="550" cy="290" rx="35" ry="70" fill="#e8e8ff" stroke="#4a4a6a" stroke-width="2" transform="rotate(-30 550 290)"/>
    <ellipse cx="730" cy="290" rx="35" ry="70" fill="#e8e8ff" stroke="#4a4a6a" stroke-width="2" transform="rotate(30 730 290)"/>
    
    <!-- Gloves -->
    <circle cx="520" cy="250" r="25" fill="#f5f5f5" stroke="#4a4a6a" stroke-width="2"/>
    <circle cx="760" cy="250" r="25" fill="#f5f5f5" stroke="#4a4a6a" stroke-width="2"/>
    
    <!-- Legs on skateboard -->
    <rect x="600" y="410" width="30" height="70" rx="15" fill="#e8e8ff" stroke="#4a4a6a" stroke-width="2"/>
    <rect x="650" y="410" width="30" height="70" rx="15" fill="#e8e8ff" stroke="#4a4a6a" stroke-width="2"/>
    
    <!-- Boots -->
    <ellipse cx="615" cy="485" rx="20" ry="15" fill="#222" stroke="#4a4a6a" stroke-width="2"/>
    <ellipse cx="665" cy="485" rx="20" ry="15" fill="#222" stroke="#4a4a6a" stroke-width="2"/>
    
    <!-- Helmet -->
    <circle cx="640" cy="180" r="90" fill="none" stroke="#4a4a6a" stroke-width="4"/>
    <circle cx="640" cy="180" r="85" fill="#b3d9ff" opacity="0.6"/>
    
    <!-- Helmet visor shine -->
    <ellipse cx="610" cy="150" rx="40" ry="50" fill="white" opacity="0.4"/>
    
    <!-- Cat head inside helmet -->
    <!-- Head -->
    <circle cx="640" cy="195" r="60" fill="#ff9d5c"/>
    
    <!-- Ears -->
    <polygon points="610,145 595,95 625,135" fill="#ff9d5c" stroke="#333" stroke-width="2"/>
    <polygon points="670,145 685,95 655,135" fill="#ff9d5c" stroke="#333" stroke-width="2"/>
    <polygon points="610,145 605,120 620,140" fill="#ffb88c"/>
    <polygon points="670,145 675,120 660,140" fill="#ffb88c"/>
    
    <!-- Eyes -->
    <circle cx="620" cy="185" r="8" fill="white" stroke="#333" stroke-width="1"/>
    <circle cx="660" cy="185" r="8" fill="white" stroke="#333" stroke-width="1"/>
    <circle cx="622" cy="185" r="5" fill="#333"/>
    <circle cx="662" cy="185" r="5" fill="#333"/>
    <circle cx="623" cy="183" r="2" fill="white"/>
    <circle cx="663" cy="183" r="2" fill="white"/>
    
    <!-- Nose -->
    <polygon points="640,210 635,225 645,225" fill="#ff69b4" stroke="#333" stroke-width="1"/>
    
    <!-- Mouth -->
    <path d="M 640 225 Q 630 240 625 235" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>
    <path d="M 640 225 Q 650 240 655 235" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>
    
    <!-- Whiskers -->
    <line x1="560" y1="195" x2="540" y2="190" stroke="#333" stroke-width="2" stroke-linecap="round"/>
    <line x1="560" y1="210" x2="540" y2="215" stroke="#333" stroke-width="2" stroke-linecap="round"/>
    <line x1="720" y1="195" x2="740" y2="190" stroke="#333" stroke-width="2" stroke-linecap="round"/>
    <line x1="720" y1="210" x2="740" y2="215" stroke="#333" stroke-width="2" stroke-linecap="round"/>
  </g>
  
  <!-- Earth in sky -->
  <circle cx="150" cy="120" r="60" fill="#4a90e2"/>
  <path d="M 120 90 Q 140 80 160 95" fill="#2d5a1e" opacity="0.8"/>
  <path d="M 130 120 Q 155 140 170 130" fill="#2d5a1e" opacity="0.8"/>
  <path d="M 145 100 Q 165 110 160 135" fill="#2d5a1e" opacity="0.7"/>
  
  <!-- Flag on moon -->
  <line x1="850" y1="500" x2="850" y2="650" stroke="#333" stroke-width="6"/>
  <rect x="860" y="470" width="80" height="50" fill="#ff0000" stroke="#333" stroke-width="2"/>
  <circle cx="900" cy="485" r="8" fill="white" stroke="#333" stroke-width="1"/>
</svg>