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: 20.0 s
Cost: $0.029
Output tokens: 5,650
Spent thinking: 2,789 tokens
Speed: 294.4 tok/s
Console errors: 0

First token after: 845 ms
First visible text after: 15.9 s
Prompt tokens: 399
Code size: 7.0 KB
Finish reason: stop
Served by: Amazon Bedrock
Model id: anthropic/claude-haiku-4.5
Reasoning sent: {"enabled":true}
Max output: 64,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 · 162 lines

Download

<html>
<head>
<style>
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to bottom, #0a0e27 0%, #1a1a2e 50%, #a9a9a9 100%);
  font-family: Arial, sans-serif;
}
svg {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>
<svg viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
  <!-- Deep space background -->
  <defs>
    <radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:white;stop-opacity:1" />
      <stop offset="100%" style="stop-color:white;stop-opacity:0" />
    </radialGradient>
  </defs>
  
  <!-- Stars -->
  <circle cx="80" cy="50" r="2" fill="white"/>
  <circle cx="180" cy="100" r="1.5" fill="white"/>
  <circle cx="300" cy="40" r="2" fill="white"/>
  <circle cx="450" cy="80" r="1" fill="white"/>
  <circle cx="650" cy="60" r="2" fill="white"/>
  <circle cx="800" cy="120" r="1.5" fill="white"/>
  <circle cx="920" cy="70" r="2" fill="white"/>
  <circle cx="150" cy="180" r="1.5" fill="white"/>
  <circle cx="550" cy="150" r="2" fill="white"/>
  <circle cx="900" cy="250" r="1" fill="white"/>
  
  <!-- Twinkling star effects -->
  <circle cx="300" cy="40" r="2.5" fill="url(#starGlow)" opacity="0.4"/>
  
  <!-- Moon surface with craters -->
  <ellipse cx="500" cy="750" rx="700" ry="120" fill="#c0c0c0"/>
  <ellipse cx="500" cy="770" rx="650" ry="80" fill="#a9a9a9"/>
  
  <!-- Large craters -->
  <circle cx="150" cy="700" r="45" fill="#808080" opacity="0.7"/>
  <circle cx="170" cy="720" r="28" fill="#696969" opacity="0.8"/>
  
  <circle cx="850" cy="710" r="55" fill="#808080" opacity="0.7"/>
  <circle cx="880" cy="735" r="35" fill="#696969" opacity="0.8"/>
  
  <!-- Small rocks -->
  <circle cx="250" cy="735" r="12" fill="#999"/>
  <circle cx="420" cy="745" r="9" fill="#888"/>
  <circle cx="700" cy="740" r="15" fill="#999"/>
  <circle cx="950" cy="750" r="10" fill="#888"/>
  
  <!-- Skateboard (tilted, in motion) -->
  <g transform="translate(460, 520) rotate(-20)">
    <!-- Board deck with wood texture -->
    <rect x="-95" y="-18" width="190" height="36" rx="10" fill="#c85a3a" stroke="#8b3a1f" stroke-width="2"/>
    
    <!-- Skateboard stripes -->
    <rect x="-85" y="-12" width="170" height="8" fill="#ff6b35" opacity="0.6"/>
    <rect x="-85" y="0" width="170" height="8" fill="#ff8555" opacity="0.6"/>
    
    <!-- Wheels (4) -->
    <circle cx="-70" cy="22" r="15" fill="#222" stroke="#000" stroke-width="2"/>
    <circle cx="-15" cy="22" r="15" fill="#222" stroke="#000" stroke-width="2"/>
    <circle cx="40" cy="22" r="15" fill="#222" stroke="#000" stroke-width="2"/>
    <circle cx="95" cy="22" r="15" fill="#222" stroke="#000" stroke-width="2"/>
    
    <!-- Wheel rims -->
    <circle cx="-70" cy="22" r="8" fill="#555"/>
    <circle cx="-15" cy="22" r="8" fill="#555"/>
    <circle cx="40" cy="22" r="8" fill="#555"/>
    <circle cx="95" cy="22" r="8" fill="#555"/>
  </g>
  
  <!-- Astronaut Cat -->
  <g id="cat">
    <!-- Space suit body -->
    <ellipse cx="500" cy="500" rx="55" ry="70" fill="#ffffff" stroke="#d0d0d0" stroke-width="3"/>
    
    <!-- Suit details -->
    <rect x="475" y="510" width="50" height="40" rx="5" fill="#e8f4f8" stroke="#b0d0e0" stroke-width="2"/>
    
    <!-- Arms (suit) -->
    <ellipse cx="420" cy="460" rx="22" ry="55" fill="#ffffff" stroke="#d0d0d0" stroke-width="2" transform="rotate(-35 420 460)"/>
    <ellipse cx="580" cy="460" rx="22" ry="55" fill="#ffffff" stroke="#d0d0d0" stroke-width="2" transform="rotate(35 580 460)"/>
    
    <!-- Gloves -->
    <circle cx="395" cy="415" r="22" fill="#ffd699" stroke="#d4a574" stroke-width="2"/>
    <circle cx="605" cy="415" r="22" fill="#ffd699" stroke="#d4a574" stroke-width="2"/>
    
    <!-- Legs -->
    <rect x="475" y="560" width="20" height="85" rx="10" fill="#ffffff" stroke="#d0d0d0" stroke-width="2"/>
    <rect x="505" y="560" width="20" height="85" rx="10" fill="#ffffff" stroke="#d0d0d0" stroke-width="2"/>
    
    <!-- Boots -->
    <ellipse cx="485" cy="655" rx="17" ry="20" fill="#333" stroke="#111" stroke-width="2"/>
    <ellipse cx="515" cy="655" rx="17" ry="20" fill="#333" stroke="#111" stroke-width="2"/>
    
    <!-- Helmet (spherical) -->
    <circle cx="500" cy="370" r="65" fill="#87ceeb" opacity="0.75" stroke="#5090d9" stroke-width="4"/>
    
    <!-- Helmet shine/reflection -->
    <ellipse cx="475" cy="340" rx="25" ry="35" fill="white" opacity="0.35"/>
    
    <!-- Helmet glass inner edge -->
    <circle cx="500" cy="370" r="60" fill="none" stroke="#90d0f0" stroke-width="1" opacity="0.5"/>
    
    <!-- Cat head inside helmet -->
    <circle cx="500" cy="375" r="40" fill="#ff9966" stroke="#ff7744" stroke-width="2"/>
    
    <!-- Cat ears -->
    <polygon points="468,340 455,295 480,345" fill="#ff9966" stroke="#ff7744" stroke-width="2" stroke-linejoin="round"/>
    <polygon points="532,340 545,295 520,345" fill="#ff9966" stroke="#ff7744" stroke-width="2" stroke-linejoin="round"/>
    
    <!-- Inner ears -->
    <polygon points="470,335 463,315 477,340" fill="#ffccaa"/>
    <polygon points="530,335 537,315 523,340" fill="#ffccaa"/>
    
    <!-- Eyes with shine -->
    <circle cx="485" cy="370" r="7" fill="#000"/>
    <circle cx="515" cy="370" r="7" fill="#000"/>
    <circle cx="487" cy="367" r="3" fill="#fff"/>
    <circle cx="517" cy="367" r="3" fill="#fff"/>
    
    <!-- Happy mouth -->
    <path d="M 495 390 Q 500 398 505 390" stroke="#ff5544" stroke-width="3" fill="none" stroke-linecap="round"/>
    
    <!-- Nose -->
    <polygon points="500,383 497,388 503,388" fill="#ff7744"/>
    
    <!-- Whiskers -->
    <line x1="450" y1="375" x2="465" y2="370" stroke="#ffddcc" stroke-width="2" stroke-linecap="round"/>
    <line x1="450" y1="385" x2="465" y2="385" stroke="#ffddcc" stroke-width="2" stroke-linecap="round"/>
    <line x1="535" y1="370" x2="550" y2="375" stroke="#ffddcc" stroke-width="2" stroke-linecap="round"/>
    <line x1="535" y1="385" x2="550" y2="385" stroke="#ffddcc" stroke-width="2" stroke-linecap="round"/>
    
    <!-- Chest patch -->
    <rect x="480" y="495" width="40" height="40" rx="5" fill="#ff6b35" stroke="#ff9500" stroke-width="2"/>
    <text x="500" y="523" font-size="28" text-anchor="middle" fill="#fff">🚀</text>
  </g>
  
  <!-- Motion lines (speed streaks) -->
  <line x1="200" y1="490" x2="350" y2="500" stroke="#ff6b35" stroke-width="4" opacity="0.6" stroke-linecap="round"/>
  <line x1="230" y1="540" x2="360" y2="550" stroke="#ff6b35" stroke-width="3" opacity="0.4" stroke-linecap="round"/>
  <line x1="650" y1="505" x2="800" y2="495" stroke="#ff6b35" stroke-width="4" opacity="0.6" stroke-linecap="round"/>
  <line x1="670" y1="555" x2="800" y2="545" stroke="#ff6b35" stroke-width="3" opacity="0.4" stroke-linecap="round"/>
  
  <!-- Title -->
  <text x="500" y="60" font-size="52" font-weight="bold" fill="#ff6b35" text-anchor="middle" font-family="Arial, sans-serif">🐱 Skateboarding 🛹</text>
  <text x="500" y="120" font-size="42" fill="#87ceeb" text-anchor="middle" font-family="Arial, sans-serif">On The Moon 🌙</text>
</svg>
</body>
</html>

Reasoning trace (2,789 tokens)

The user wants me to create an SVG drawing of an astronaut cat skateboarding on the moon. This should be a self-contained HTML file with SVG graphics. Let me create a fun, visually appealing illustration.

I need to include:
1. An astronaut cat - cat with astronaut helmet/suit
2. A skateboard
3. The moon setting - moon surface, maybe stars
4. Make it look nice and engaging

Let me create this as an SVG within an HTML file. I should make it look good and be creative with the design.

```html
<html>
<head>
<style>
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to bottom, #000814 0%, #001d3d 100%);
  font-family: Arial, sans-serif;
}
svg {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>
<svg viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="1000" height="800" fill="#0a0e27"/>
  
  <!-- Stars -->
  <circle cx="100" cy="50" r="2" fill="white"/>
  <circle cx="200" cy="100" r="1.5" fill="white"/>
  <circle cx="300" cy="30" r="2" fill="white"/>
  <circle cx="450" cy="80" r="1" fill="white"/>
  <circle cx="600" cy="40" r="2" fill="white"/>
  <circle cx="750" cy="90" r="1.5" fill="white"/>
  <circle cx="850" cy="60" r="2" fill="white"/>
  <circle cx="920" cy="120" r="1" fill="white"/>
  <circle cx="150" cy="150" r="1.5" fill="white"/>
  <circle cx="500" cy="150" r="2" fill="white"/>
  <circle cx="800" cy="200" r="1" fill="white"/>
  
  <!-- Moon surface (craters and texture) -->
  <ellipse cx="200" cy="700" rx="150" ry="50" fill="#888888" opacity="0.3"/>
```
I'm scattering stars across the dark sky backdrop, then starting the lunar ground with soft gray crater shapes to give it texture.

For the surface itself I'm layering multiple gray tones - craters with darker shadow circles, an overall ground ellipse, then small rock details scattered on top for that bumpy moon terrain feel.

Now building the skateboard itself, positioned at an angle, starting with an orange deck using rounded corners and a black outline, adding pattern details to the board surface.

Finishing the dashed stripe pattern on the deck, then placing dark wheels at both ends with contrasting center circles for that rubber-and-hub look.

Moving to the astronaut cat character - starting with a white oval body for the suit, angled arm ovals, and tan-colored glove circles at the hands.

Building out the legs with rounded rectangles and dark boot ovals, then adding the signature helmet dome with sky-blue tint and a glass shine effect.

For the cat's face peeking through the helmet, I'm going with pink fur, triangular ears with inner pink details, friendly black eyes with white shine dots, a curved smile, triangle nose, and whisker lines extending outward.

Topping it off with an orange chest emblem containing a rocket emoji, speed lines trailing behind the skateboard on both sides, and bold title text overlaying the top of the scene.

This seems like a solid, playful illustration — I'm satisfied delivering it as a complete HTML file since the demo context calls for a full page rather than bare SVG markup, and the visual is cohesive enough to ship as-is.

Raw response

```html
<html>
<head>
<style>
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to bottom, #0a0e27 0%, #1a1a2e 50%, #a9a9a9 100%);
  font-family: Arial, sans-serif;
}
svg {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>
<svg viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
  <!-- Deep space background -->
  <defs>
    <radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:white;stop-opacity:1" />
      <stop offset="100%" style="stop-color:white;stop-opacity:0" />
    </radialGradient>
  </defs>
  
  <!-- Stars -->
  <circle cx="80" cy="50" r="2" fill="white"/>
  <circle cx="180" cy="100" r="1.5" fill="white"/>
  <circle cx="300" cy="40" r="2" fill="white"/>
  <circle cx="450" cy="80" r="1" fill="white"/>
  <circle cx="650" cy="60" r="2" fill="white"/>
  <circle cx="800" cy="120" r="1.5" fill="white"/>
  <circle cx="920" cy="70" r="2" fill="white"/>
  <circle cx="150" cy="180" r="1.5" fill="white"/>
  <circle cx="550" cy="150" r="2" fill="white"/>
  <circle cx="900" cy="250" r="1" fill="white"/>
  
  <!-- Twinkling star effects -->
  <circle cx="300" cy="40" r="2.5" fill="url(#starGlow)" opacity="0.4"/>
  
  <!-- Moon surface with craters -->
  <ellipse cx="500" cy="750" rx="700" ry="120" fill="#c0c0c0"/>
  <ellipse cx="500" cy="770" rx="650" ry="80" fill="#a9a9a9"/>
  
  <!-- Large craters -->
  <circle cx="150" cy="700" r="45" fill="#808080" opacity="0.7"/>
  <circle cx="170" cy="720" r="28" fill="#696969" opacity="0.8"/>
  
  <circle cx="850" cy="710" r="55" fill="#808080" opacity="0.7"/>
  <circle cx="880" cy="735" r="35" fill="#696969" opacity="0.8"/>
  
  <!-- Small rocks -->
  <circle cx="250" cy="735" r="12" fill="#999"/>
  <circle cx="420" cy="745" r="9" fill="#888"/>
  <circle cx="700" cy="740" r="15" fill="#999"/>
  <circle cx="950" cy="750" r="10" fill="#888"/>
  
  <!-- Skateboard (tilted, in motion) -->
  <g transform="translate(460, 520) rotate(-20)">
    <!-- Board deck with wood texture -->
    <rect x="-95" y="-18" width="190" height="36" rx="10" fill="#c85a3a" stroke="#8b3a1f" stroke-width="2"/>
    
    <!-- Skateboard stripes -->
    <rect x="-85" y="-12" width="170" height="8" fill="#ff6b35" opacity="0.6"/>
    <rect x="-85" y="0" width="170" height="8" fill="#ff8555" opacity="0.6"/>
    
    <!-- Wheels (4) -->
    <circle cx="-70" cy="22" r="15" fill="#222" stroke="#000" stroke-width="2"/>
    <circle cx="-15" cy="22" r="15" fill="#222" stroke="#000" stroke-width="2"/>
    <circle cx="40" cy="22" r="15" fill="#222" stroke="#000" stroke-width="2"/>
    <circle cx="95" cy="22" r="15" fill="#222" stroke="#000" stroke-width="2"/>
    
    <!-- Wheel rims -->
    <circle cx="-70" cy="22" r="8" fill="#555"/>
    <circle cx="-15" cy="22" r="8" fill="#555"/>
    <circle cx="40" cy="22" r="8" fill="#555"/>
    <circle cx="95" cy="22" r="8" fill="#555"/>
  </g>
  
  <!-- Astronaut Cat -->
  <g id="cat">
    <!-- Space suit body -->
    <ellipse cx="500" cy="500" rx="55" ry="70" fill="#ffffff" stroke="#d0d0d0" stroke-width="3"/>
    
    <!-- Suit details -->
    <rect x="475" y="510" width="50" height="40" rx="5" fill="#e8f4f8" stroke="#b0d0e0" stroke-width="2"/>
    
    <!-- Arms (suit) -->
    <ellipse cx="420" cy="460" rx="22" ry="55" fill="#ffffff" stroke="#d0d0d0" stroke-width="2" transform="rotate(-35 420 460)"/>
    <ellipse cx="580" cy="460" rx="22" ry="55" fill="#ffffff" stroke="#d0d0d0" stroke-width="2" transform="rotate(35 580 460)"/>
    
    <!-- Gloves -->
    <circle cx="395" cy="415" r="22" fill="#ffd699" stroke="#d4a574" stroke-width="2"/>
    <circle cx="605" cy="415" r="22" fill="#ffd699" stroke="#d4a574" stroke-width="2"/>
    
    <!-- Legs -->
    <rect x="475" y="560" width="20" height="85" rx="10" fill="#ffffff" stroke="#d0d0d0" stroke-width="2"/>
    <rect x="505" y="560" width="20" height="85" rx="10" fill="#ffffff" stroke="#d0d0d0" stroke-width="2"/>
    
    <!-- Boots -->
    <ellipse cx="485" cy="655" rx="17" ry="20" fill="#333" stroke="#111" stroke-width="2"/>
    <ellipse cx="515" cy="655" rx="17" ry="20" fill="#333" stroke="#111" stroke-width="2"/>
    
    <!-- Helmet (spherical) -->
    <circle cx="500" cy="370" r="65" fill="#87ceeb" opacity="0.75" stroke="#5090d9" stroke-width="4"/>
    
    <!-- Helmet shine/reflection -->
    <ellipse cx="475" cy="340" rx="25" ry="35" fill="white" opacity="0.35"/>
    
    <!-- Helmet glass inner edge -->
    <circle cx="500" cy="370" r="60" fill="none" stroke="#90d0f0" stroke-width="1" opacity="0.5"/>
    
    <!-- Cat head inside helmet -->
    <circle cx="500" cy="375" r="40" fill="#ff9966" stroke="#ff7744" stroke-width="2"/>
    
    <!-- Cat ears -->
    <polygon points="468,340 455,295 480,345" fill="#ff9966" stroke="#ff7744" stroke-width="2" stroke-linejoin="round"/>
    <polygon points="532,340 545,295 520,345" fill="#ff9966" stroke="#ff7744" stroke-width="2" stroke-linejoin="round"/>
    
    <!-- Inner ears -->
    <polygon points="470,335 463,315 477,340" fill="#ffccaa"/>
    <polygon points="530,335 537,315 523,340" fill="#ffccaa"/>
    
    <!-- Eyes with shine -->
    <circle cx="485" cy="370" r="7" fill="#000"/>
    <circle cx="515" cy="370" r="7" fill="#000"/>
    <circle cx="487" cy="367" r="3" fill="#fff"/>
    <circle cx="517" cy="367" r="3" fill="#fff"/>
    
    <!-- Happy mouth -->
    <path d="M 495 390 Q 500 398 505 390" stroke="#ff5544" stroke-width="3" fill="none" stroke-linecap="round"/>
    
    <!-- Nose -->
    <polygon points="500,383 497,388 503,388" fill="#ff7744"/>
    
    <!-- Whiskers -->
    <line x1="450" y1="375" x2="465" y2="370" stroke="#ffddcc" stroke-width="2" stroke-linecap="round"/>
    <line x1="450" y1="385" x2="465" y2="385" stroke="#ffddcc" stroke-width="2" stroke-linecap="round"/>
    <line x1="535" y1="370" x2="550" y2="375" stroke="#ffddcc" stroke-width="2" stroke-linecap="round"/>
    <line x1="535" y1="385" x2="550" y2="385" stroke="#ffddcc" stroke-width="2" stroke-linecap="round"/>
    
    <!-- Chest patch -->
    <rect x="480" y="495" width="40" height="40" rx="5" fill="#ff6b35" stroke="#ff9500" stroke-width="2"/>
    <text x="500" y="523" font-size="28" text-anchor="middle" fill="#fff">🚀</text>
  </g>
  
  <!-- Motion lines (speed streaks) -->
  <line x1="200" y1="490" x2="350" y2="500" stroke="#ff6b35" stroke-width="4" opacity="0.6" stroke-linecap="round"/>
  <line x1="230" y1="540" x2="360" y2="550" stroke="#ff6b35" stroke-width="3" opacity="0.4" stroke-linecap="round"/>
  <line x1="650" y1="505" x2="800" y2="495" stroke="#ff6b35" stroke-width="4" opacity="0.6" stroke-linecap="round"/>
  <line x1="670" y1="555" x2="800" y2="545" stroke="#ff6b35" stroke-width="3" opacity="0.4" stroke-linecap="round"/>
  
  <!-- Title -->
  <text x="500" y="60" font-size="52" font-weight="bold" fill="#ff6b35" text-anchor="middle" font-family="Arial, sans-serif">🐱 Skateboarding 🛹</text>
  <text x="500" y="120" font-size="42" fill="#87ceeb" text-anchor="middle" font-family="Arial, sans-serif">On The Moon 🌙</text>
</svg>
</body>
</html>
```