Claude Haiku 4.5

by AnthropicReasoningClean

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

How it went

Total time: 11.0 s
Cost: $0.016
Output tokens: 3,051
Spent thinking: 0 tokens
Speed: 299.1 tok/s
Console errors: 0

First token after: 839 ms
First visible text after: 839 ms
Prompt tokens: 560
Code size: 7.1 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

Create a standalone SVG illustration of a fox sitting on a hill, looking at the moon on a starry night, with a few subtle animations. Requirements: - Output a single valid .svg file (```svg code block) with a viewBox of 0 0 800 600. - Hand-written shapes and paths only: no embedded raster images, no external references, no JavaScript. - The fox must be clearly recognizable (pointy ears, snout, bushy tail with a white tip). - Include the moon with a soft glow, many stars, the hill and some background elements (trees, distant hills). - Use a coherent color palette and at least one gradient. - Animations (SMIL or CSS inside the SVG), all looping seamlessly: stars twinkling, the fox's tail swaying gently, and a shooting star crossing the sky every 4 seconds (the first one within 2 seconds).

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

Download

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      @keyframes twinkle {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 1; }
      }
      @keyframes sway {
        0%, 100% { transform: rotate(0deg); transform-origin: 280px 320px; }
        50% { transform: rotate(8deg); transform-origin: 280px 320px; }
      }
      @keyframes shootingStar {
        0% {
          opacity: 1;
          transform: translateX(-100px) translateY(0px);
        }
        100% {
          opacity: 0;
          transform: translateX(900px) translateY(400px);
        }
      }
      @keyframes moonGlow {
        0%, 100% { r: 58px; }
        50% { r: 62px; }
      }
      .star1 { animation: twinkle 3s infinite; }
      .star2 { animation: twinkle 4s infinite 0.5s; }
      .star3 { animation: twinkle 3.5s infinite 1s; }
      .star4 { animation: twinkle 4.5s infinite 0.2s; }
      .star5 { animation: twinkle 3.2s infinite 1.5s; }
      .tail { animation: sway 4s ease-in-out infinite; }
      .glow { animation: moonGlow 3s ease-in-out infinite; }
      .meteor { animation: shootingStar 3s ease-in 0s infinite; }
      .meteor2 { animation: shootingStar 3s ease-in 4s infinite; }
    </style>
    
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#0a0e27;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#1a2a4a;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2d3f5a;stop-opacity:1" />
    </linearGradient>
    
    <radialGradient id="moonGradient" cx="35%" cy="35%">
      <stop offset="0%" style="stop-color:#fff9e6;stop-opacity:1" />
      <stop offset="70%" style="stop-color:#ffe680;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#ffd633;stop-opacity:0.8" />
    </radialGradient>

    <filter id="moonBlur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>

    <filter id="glow">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
    </filter>
  </defs>

  <!-- Background sky -->
  <rect width="800" height="600" fill="url(#skyGradient)"/>

  <!-- Distant hills -->
  <path d="M 0 350 Q 200 300 400 340 T 800 350 L 800 600 L 0 600 Z" fill="#1a2a3a" opacity="0.6"/>
  <path d="M 0 380 Q 150 340 300 375 T 600 385 L 800 390 L 800 600 L 0 600 Z" fill="#243545" opacity="0.5"/>

  <!-- Background trees (silhouettes) -->
  <ellipse cx="100" cy="380" rx="25" ry="60" fill="#0a1520"/>
  <polygon points="100,320 80,380 120,380" fill="#0a1520"/>
  
  <ellipse cx="700" cy="390" rx="30" ry="70" fill="#0a1520"/>
  <polygon points="700,310 670,390 730,390" fill="#0a1520"/>

  <!-- Main hill -->
  <path d="M 0 450 Q 200 300 400 350 Q 600 400 800 450 L 800 600 L 0 600 Z" fill="#2a4a3a"/>
  <path d="M 0 450 Q 200 300 400 350 Q 600 400 800 450 L 800 500 L 0 500 Z" fill="#1a3a2a" opacity="0.7"/>

  <!-- Moon glow (outer) -->
  <circle cx="650" cy="120" r="70" fill="none" stroke="#ffd633" stroke-width="1" opacity="0.3" filter="url(#glow)"/>
  <circle cx="650" cy="120" r="65" fill="none" stroke="#ffeb99" stroke-width="2" opacity="0.2" filter="url(#glow)"/>

  <!-- Moon -->
  <circle cx="650" cy="120" r="58" fill="url(#moonGradient)" class="glow"/>
  
  <!-- Moon craters -->
  <circle cx="630" cy="100" r="6" fill="#e6cc00" opacity="0.4"/>
  <circle cx="665" cy="130" r="4" fill="#e6cc00" opacity="0.4"/>
  <circle cx="650" cy="110" r="3" fill="#e6cc00" opacity="0.3"/>

  <!-- Stars -->
  <circle cx="100" cy="80" r="1.5" fill="#ffffff" class="star1"/>
  <circle cx="150" cy="120" r="1" fill="#ffffff" class="star2"/>
  <circle cx="200" cy="60" r="1.2" fill="#ffffff" class="star3"/>
  <circle cx="300" cy="100" r="0.8" fill="#ffffff" class="star4"/>
  <circle cx="350" cy="50" r="1.5" fill="#ffffff" class="star1"/>
  <circle cx="420" cy="140" r="0.9" fill="#ffffff" class="star2"/>
  <circle cx="500" cy="70" r="1.3" fill="#ffffff" class="star3"/>
  <circle cx="550" cy="110" r="1" fill="#ffffff" class="star4"/>
  <circle cx="600" cy="60" r="1.2" fill="#ffffff" class="star1"/>
  <circle cx="720" cy="90" r="0.8" fill="#ffffff" class="star5"/>
  <circle cx="750" cy="140" r="1.1" fill="#ffffff" class="star2"/>
  <circle cx="780" cy="70" r="1.4" fill="#ffffff" class="star3"/>
  <circle cx="50" cy="150" r="0.9" fill="#ffffff" class="star4"/>
  <circle cx="250" cy="180" r="1" fill="#ffffff" class="star1"/>
  <circle cx="400" cy="200" r="0.8" fill="#ffffff" class="star5"/>
  <circle cx="580" cy="170" r="1.2" fill="#ffffff" class="star3"/>

  <!-- Shooting stars -->
  <g class="meteor">
    <line x1="0" y1="50" x2="30" y2="20" stroke="#ffff99" stroke-width="2" opacity="0.8"/>
    <line x1="0" y1="50" x2="15" y2="35" stroke="#ffffff" stroke-width="1" opacity="0.5"/>
  </g>

  <g class="meteor2">
    <line x1="0" y1="100" x2="35" y2="60" stroke="#ffff99" stroke-width="2" opacity="0.8"/>
    <line x1="0" y1="100" x2="20" y2="80" stroke="#ffffff" stroke-width="1" opacity="0.5"/>
  </g>

  <!-- Fox body -->
  <ellipse cx="280" cy="380" rx="60" ry="70" fill="#d97a3a"/>

  <!-- Fox back legs -->
  <ellipse cx="240" cy="440" rx="15" ry="35" fill="#c96a2a"/>
  <ellipse cx="320" cy="440" rx="15" ry="35" fill="#c96a2a"/>

  <!-- Fox front legs -->
  <ellipse cx="255" cy="435" rx="12" ry="40" fill="#d97a3a"/>
  <ellipse cx="305" cy="435" rx="12" ry="40" fill="#d97a3a"/>

  <!-- Fox paws -->
  <ellipse cx="255" cy="475" rx="10" ry="8" fill="#8b4513"/>
  <ellipse cx="305" cy="475" rx="10" ry="8" fill="#8b4513"/>
  <ellipse cx="240" cy="475" rx="10" ry="8" fill="#8b4513"/>
  <ellipse cx="320" cy="475" rx="10" ry="8" fill="#8b4513"/>

  <!-- Fox tail (swaying) -->
  <g class="tail">
    <path d="M 320 350 Q 380 320 420 340 Q 430 350 425 370" fill="none" stroke="#d97a3a" stroke-width="35" stroke-linecap="round"/>
    <!-- White tip of tail -->
    <path d="M 420 340 Q 425 345 430 360" fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round"/>
  </g>

  <!-- Fox head -->
  <ellipse cx="280" cy="300" rx="50" ry="55" fill="#d97a3a"/>

  <!-- Fox snout -->
  <ellipse cx="280" cy="330" rx="30" ry="25" fill="#e8996a"/>

  <!-- Fox nose -->
  <ellipse cx="280" cy="330" rx="8" ry="6" fill="#333333"/>

  <!-- Fox mouth -->
  <path d="M 280 330 Q 275 340 270 338" fill="none" stroke="#333333" stroke-width="1.5" stroke-linecap="round"/>
  <path d="M 280 330 Q 285 340 290 338" fill="none" stroke="#333333" stroke-width="1.5" stroke-linecap="round"/>

  <!-- Fox left ear -->
  <path d="M 250 260 L 240 200 L 265 250 Z" fill="#d97a3a"/>
  <path d="M 255 250 L 248 220 L 260 245 Z" fill="#e8996a"/>

  <!-- Fox right ear -->
  <path d="M 310 260 L 320 200 L 295 250 Z" fill="#d97a3a"/>
  <path d="M 305 250 L 312 220 L 300 245 Z" fill="#e8996a"/>

  <!-- Fox left eye -->
  <circle cx="260" cy="285" r="6" fill="#ffffff"/>
  <circle cx="260" cy="285" r="4" fill="#000000"/>
  <circle cx="261" cy="283" r="1.5" fill="#ffffff"/>

  <!-- Fox right eye -->
  <circle cx="300" cy="285" r="6" fill="#ffffff"/>
  <circle cx="300" cy="285" r="4" fill="#000000"/>
  <circle cx="301" cy="283" r="1.5" fill="#ffffff"/>

  <!-- Fox cheeks -->
  <ellipse cx="240" cy="310" rx="8" ry="5" fill="#e8996a" opacity="0.6"/>
  <ellipse cx="320" cy="310" rx="8" ry="5" fill="#e8996a" opacity="0.6"/>

</svg>