Claude Haiku 5.5

by AnthropicReasoningClean

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

How it went

Total time: 17.0 s
Cost: $0.0023
Output tokens: 4,437
Spent thinking: 0 tokens
Speed: 270.7 tok/s
Console errors: 0

First token after: 651 ms
First visible text after: 651 ms
Prompt tokens: 795
Code size: 8.0 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

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

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0b1026"/>
      <stop offset="0.6" stop-color="#1d2b56"/>
      <stop offset="1" stop-color="#3a3f7a"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#fff6d6" stop-opacity="0.9"/>
      <stop offset="0.4" stop-color="#ffe9a8" stop-opacity="0.35"/>
      <stop offset="1" stop-color="#ffe9a8" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moonBody" cx="0.4" cy="0.4" r="0.6">
      <stop offset="0" stop-color="#fffbef"/>
      <stop offset="1" stop-color="#f1e2b0"/>
    </radialGradient>
    <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2c4a3e"/>
      <stop offset="1" stop-color="#14261f"/>
    </linearGradient>
    <linearGradient id="foxGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ff9a4a"/>
      <stop offset="1" stop-color="#d4601f"/>
    </linearGradient>
    <linearGradient id="trail" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="0.9"/>
    </linearGradient>
  </defs>

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

  <!-- Stars -->
  <g fill="#ffffff">
    <circle cx="60" cy="50" r="1.5"><animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/></circle>
    <circle cx="150" cy="120" r="1"><animate attributeName="opacity" values="1;0.2;1" dur="2.4s" repeatCount="indefinite"/></circle>
    <circle cx="230" cy="40" r="1.2"><animate attributeName="opacity" values="0.4;1;0.4" dur="4s" repeatCount="indefinite"/></circle>
    <circle cx="300" cy="160" r="1"><animate attributeName="opacity" values="1;0.3;1" dur="2.8s" repeatCount="indefinite"/></circle>
    <circle cx="90" cy="220" r="1.3"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.5s" repeatCount="indefinite"/></circle>
    <circle cx="380" cy="80" r="1"><animate attributeName="opacity" values="0.5;1;0.5" dur="2.2s" repeatCount="indefinite"/></circle>
    <circle cx="450" cy="30" r="1.4"><animate attributeName="opacity" values="1;0.3;1" dur="3.2s" repeatCount="indefinite"/></circle>
    <circle cx="520" cy="130" r="1"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.6s" repeatCount="indefinite"/></circle>
    <circle cx="600" cy="60" r="1.5"><animate attributeName="opacity" values="1;0.2;1" dur="3.8s" repeatCount="indefinite"/></circle>
    <circle cx="700" cy="150" r="1"><animate attributeName="opacity" values="0.4;1;0.4" dur="2.5s" repeatCount="indefinite"/></circle>
    <circle cx="760" cy="40" r="1.2"><animate attributeName="opacity" values="1;0.4;1" dur="3.4s" repeatCount="indefinite"/></circle>
    <circle cx="740" cy="260" r="1"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.9s" repeatCount="indefinite"/></circle>
    <circle cx="200" cy="300" r="0.9"><animate attributeName="opacity" values="1;0.2;1" dur="2.3s" repeatCount="indefinite"/></circle>
    <circle cx="420" cy="230" r="1"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.6s" repeatCount="indefinite"/></circle>
    <circle cx="560" cy="290" r="1.1"><animate attributeName="opacity" values="0.6;1;0.6" dur="2.7s" repeatCount="indefinite"/></circle>
    <circle cx="48" cy="350" r="1"><animate attributeName="opacity" values="1;0.3;1" dur="3.1s" repeatCount="indefinite"/></circle>
    <circle cx="340" cy="320" r="0.8"><animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite"/></circle>
    <circle cx="660" cy="360" r="1"><animate attributeName="opacity" values="1;0.2;1" dur="3.3s" repeatCount="indefinite"/></circle>
    <circle cx="120" cy="90" r="0.8"><animate attributeName="opacity" values="0.5;1;0.5" dur="2.1s" repeatCount="indefinite"/></circle>
    <circle cx="500" cy="200" r="0.9"><animate attributeName="opacity" values="1;0.4;1" dur="4.2s" repeatCount="indefinite"/></circle>
    <circle cx="280" cy="260" r="1"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.6s" repeatCount="indefinite"/></circle>
    <circle cx="770" cy="330" r="1.2"><animate attributeName="opacity" values="0.2;1;0.2" dur="3s" repeatCount="indefinite"/></circle>
  </g>

  <!-- Moon glow & moon -->
  <circle cx="600" cy="130" r="120" fill="url(#moonGlow)"/>
  <circle cx="600" cy="130" r="55" fill="url(#moonBody)"/>
  <g fill="#e6d59a" opacity="0.5">
    <circle cx="585" cy="115" r="8"/>
    <circle cx="615" cy="142" r="5"/>
    <circle cx="592" cy="150" r="3.5"/>
  </g>

  <!-- Shooting star: starts at 0.5s, repeats every 4s -->
  <g>
    <line x1="0" y1="0" x2="130" y2="40" stroke="url(#trail)" stroke-width="2" stroke-linecap="round" opacity="0">
      <animateTransform attributeName="transform" type="translate" values="-150,40; 620,-60" keyTimes="0;1" dur="4s" begin="0.5s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.6;1" dur="4s" begin="0.5s" repeatCount="indefinite"/>
    </line>
  </g>

  <!-- Distant hills -->
  <path d="M0 420 Q120 360 240 410 T480 400 T800 380 L800 600 L0 600 Z" fill="#2a3d6b" opacity="0.7"/>
  <path d="M0 450 Q160 400 320 445 T640 430 T800 440 L800 600 L0 600 Z" fill="#1f3157" opacity="0.85"/>

  <!-- Background trees on distant hills -->
  <g fill="#0f1d33">
    <path d="M60 420 L72 380 L84 420 Z"/>
    <path d="M70 420 L80 360 L90 420 Z"/>
    <path d="M100 425 L110 392 L120 425 Z"/>
    <path d="M520 418 L532 376 L544 418 Z"/>
    <path d="M536 418 L546 356 L556 418 Z"/>
    <path d="M700 410 L712 372 L724 410 Z"/>
  </g>

  <!-- Main hill -->
  <path d="M0 540 Q200 430 420 470 Q560 500 800 440 L800 600 L0 600 Z" fill="url(#hillGrad)"/>
  <path d="M0 560 Q240 500 460 530 Q620 550 800 510 L800 600 L0 600 Z" fill="#0c1a15"/>

  <!-- Fox sitting on the hill (centered near x=380, base at y~500) -->
  <g transform="translate(330,250)">
    <!-- Tail (behind body), sways gently -->
    <g>
      <animateTransform attributeName="transform" type="rotate" values="-6 40 230;6 40 230;-6 40 230" dur="3.5s" repeatCount="indefinite"/>
      <path d="M40 230 Q-30 220 -20 290 Q10 270 50 262 Z" fill="url(#foxGrad)"/>
      <path d="M-20 290 Q-8 270 6 268 Q0 280 -20 290 Z" fill="#ffffff"/>
    </g>

    <!-- Body -->
    <path d="M30 150 Q20 230 40 255 Q70 275 100 255 Q120 220 100 150 Z" fill="url(#foxGrad)"/>
    <!-- Chest (white) -->
    <path d="M60 165 Q52 220 62 258 Q78 262 88 240 Q80 190 80 165 Z" fill="#fff4e6"/>

    <!-- Hind leg and paws -->
    <path d="M40 240 Q28 262 34 272 L62 272 Q68 258 62 245 Z" fill="#c85a1c"/>
    <ellipse cx="46" cy="272" rx="14" ry="5" fill="#2a1a10"/>
    <!-- Front legs -->
    <path d="M70 245 L70 272 L80 272 L82 245 Z" fill="#e0722e"/>
    <ellipse cx="76" cy="272" rx="8" ry="4" fill="#2a1a10"/>

    <!-- Neck and head -->
    <path d="M52 160 Q60 130 78 118 L104 118 Q112 130 100 160 Z" fill="url(#foxGrad)"/>
    <!-- Ears (pointy) -->
    <path d="M70 70 L62 22 L92 56 Z" fill="#d4601f"/>
    <path d="M100 68 L112 18 L120 62 Z" fill="#d4601f"/>
    <path d="M72 62 L68 36 L86 56 Z" fill="#2a1a10"/>
    <path d="M104 60 L110 34 L114 58 Z" fill="#2a1a10"/>
    <!-- Head -->
    <ellipse cx="90" cy="98" rx="30" ry="26" fill="url(#foxGrad)"/>
    <!-- Snout -->
    <path d="M70 102 Q52 110 48 120 Q66 122 84 114 Z" fill="#ff9a4a"/>
    <path d="M48 120 Q56 128 72 124 Q62 130 48 120 Z" fill="#fff4e6"/>
    <!-- Nose -->
    <circle cx="48" cy="118" r="3" fill="#1a0f08"/>
    <!-- Cheek fluff (white) -->
    <path d="M86 112 Q96 128 108 116 Q104 124 92 124 Z" fill="#fff4e6"/>
    <!-- Eye (looking up at moon) -->
    <path d="M74 92 Q82 86 90 92 Q82 96 74 92 Z" fill="#1a0f08"/>
    <circle cx="83" cy="91" r="1" fill="#fff"/>
  </g>

  <!-- Foreground grass -->
  <g fill="#0c1a15">
    <path d="M300 560 Q305 540 310 560 Z"/>
    <path d="M320 565 Q328 542 334 565 Z"/>
    <path d="M470 570 Q476 548 482 570 Z"/>
    <path d="M500 575 Q506 552 512 575 Z"/>
  </g>
</svg>