Claude Haiku 5.5

by AnthropicReasoningClean

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

How it went

Total time: 1 min 5 s
Cost: $0.0073
Output tokens: 14,377
Spent thinking: 8,109 tokens
Speed: 228.9 tok/s
Console errors: 0

First token after: 1.9 s
First visible text after: 46.7 s
Prompt tokens: 796
Code size: 11.5 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"medium"}
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 · 162 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" role="img" aria-label="A fox sitting on a hill gazing at the moon on a starry night">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0a0f2e"/>
      <stop offset="0.55" stop-color="#241d4e"/>
      <stop offset="0.85" stop-color="#5a3a6e"/>
      <stop offset="1" stop-color="#9a5a7a"/>
    </linearGradient>
    <radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#fff6d8" stop-opacity="0.9"/>
      <stop offset="0.35" stop-color="#ffe3a0" stop-opacity="0.35"/>
      <stop offset="1" stop-color="#ffe3a0" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moonGrad" cx="0.4" cy="0.35" r="0.7">
      <stop offset="0" stop-color="#fffbef"/>
      <stop offset="0.7" stop-color="#f3e3b4"/>
      <stop offset="1" stop-color="#d9c48e"/>
    </radialGradient>
    <linearGradient id="farHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#4a3c7a"/>
      <stop offset="1" stop-color="#2e2758"/>
    </linearGradient>
    <linearGradient id="midHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2d3566"/>
      <stop offset="1" stop-color="#1c2249"/>
    </linearGradient>
    <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2f5a48"/>
      <stop offset="0.6" stop-color="#1d3d33"/>
      <stop offset="1" stop-color="#11241f"/>
    </linearGradient>
    <linearGradient id="shoot" 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="1"/>
    </linearGradient>
  </defs>

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

  <!-- Stars -->
  <g fill="#ffffff">
    <circle cx="40" cy="40" r="1.2"><animate attributeName="opacity" values="0.2;1;0.2" dur="3s" begin="0s" repeatCount="indefinite"/></circle>
    <circle cx="90" cy="120" r="0.9" fill="#cfe3ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.5s" begin="-1s" repeatCount="indefinite"/></circle>
    <circle cx="150" cy="70" r="1.5"><animate attributeName="opacity" values="0.2;1;0.2" dur="4s" begin="-2s" repeatCount="indefinite"/></circle>
    <circle cx="210" cy="30" r="1" fill="#ffe9c4"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.2s" begin="-0.5s" repeatCount="indefinite"/></circle>
    <circle cx="260" cy="110" r="1.3"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.8s" begin="-1.7s" repeatCount="indefinite"/></circle>
    <circle cx="330" cy="60" r="0.8" fill="#cfe3ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.6s" begin="-2.2s" repeatCount="indefinite"/></circle>
    <circle cx="380" cy="150" r="1.1"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.4s" begin="-0.3s" repeatCount="indefinite"/></circle>
    <circle cx="450" cy="40" r="1.6" fill="#ffe9c4"><animate attributeName="opacity" values="0.2;1;0.2" dur="4.2s" begin="-1.1s" repeatCount="indefinite"/></circle>
    <circle cx="520" cy="90" r="0.9"><animate attributeName="opacity" values="0.2;1;0.2" dur="3s" begin="-2.6s" repeatCount="indefinite"/></circle>
    <circle cx="470" cy="200" r="1" fill="#cfe3ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.7s" begin="-0.8s" repeatCount="indefinite"/></circle>
    <circle cx="560" cy="30" r="1.2"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.4s" begin="-1.9s" repeatCount="indefinite"/></circle>
    <circle cx="720" cy="50" r="1.4" fill="#ffe9c4"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.9s" begin="-0.4s" repeatCount="indefinite"/></circle>
    <circle cx="760" cy="140" r="0.9"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.8s" begin="-2.4s" repeatCount="indefinite"/></circle>
    <circle cx="700" cy="220" r="1.1" fill="#cfe3ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.6s" begin="-1.4s" repeatCount="indefinite"/></circle>
    <circle cx="780" cy="260" r="1.3"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.1s" begin="-0.7s" repeatCount="indefinite"/></circle>
    <circle cx="640" cy="270" r="0.8" fill="#ffe9c4"><animate attributeName="opacity" values="0.2;1;0.2" dur="4s" begin="-3s" repeatCount="indefinite"/></circle>
    <circle cx="540" cy="300" r="1"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.5s" begin="-2s" repeatCount="indefinite"/></circle>
    <circle cx="60" cy="220" r="1" fill="#cfe3ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.5s" begin="-1.2s" repeatCount="indefinite"/></circle>
    <circle cx="120" cy="300" r="1.4"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.2s" begin="-0.6s" repeatCount="indefinite"/></circle>
    <circle cx="180" cy="250" r="0.8" fill="#ffe9c4"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.9s" begin="-2.8s" repeatCount="indefinite"/></circle>
    <circle cx="30" cy="330" r="1.2"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.8s" begin="-1.5s" repeatCount="indefinite"/></circle>
    <circle cx="230" cy="360" r="0.9" fill="#cfe3ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.3s" begin="-0.2s" repeatCount="indefinite"/></circle>
    <circle cx="300" cy="300" r="1.1"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.6s" begin="-2.1s" repeatCount="indefinite"/></circle>
    <circle cx="90" cy="400" r="0.7" fill="#ffe9c4"><animate attributeName="opacity" values="0.2;1;0.2" dur="3s" begin="-1.8s" repeatCount="indefinite"/></circle>
    <circle cx="760" cy="380" r="1" fill="#cfe3ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.6s" begin="-0.9s" repeatCount="indefinite"/></circle>
    <circle cx="690" cy="340" r="0.8"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.3s" begin="-2.5s" repeatCount="indefinite"/></circle>
    <circle cx="640" cy="400" r="0.9" fill="#ffe9c4"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.7s" begin="-1.3s" repeatCount="indefinite"/></circle>
    <circle cx="480" cy="360" r="0.7"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.9s" begin="-0.1s" repeatCount="indefinite"/></circle>
    <circle cx="180" cy="170" r="0.7" fill="#cfe3ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.1s" begin="-1.6s" repeatCount="indefinite"/></circle>
    <circle cx="410" cy="95" r="0.9"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.5s" begin="-2.9s" repeatCount="indefinite"/></circle>
    <circle cx="250" cy="200" r="0.8" fill="#ffe9c4"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.4s" begin="-1.1s" repeatCount="indefinite"/></circle>
    <circle cx="350" cy="230" r="0.7"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.1s" begin="-2.3s" repeatCount="indefinite"/></circle>
    <circle cx="15" cy="120" r="0.9" fill="#cfe3ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.9s" begin="-0.4s" repeatCount="indefinite"/></circle>
    <circle cx="560" cy="380" r="0.8"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.4s" begin="-1.7s" repeatCount="indefinite"/></circle>
    <circle cx="110" cy="30" r="0.7" fill="#ffe9c4"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.6s" begin="-2.7s" repeatCount="indefinite"/></circle>
    <circle cx="740" cy="310" r="0.6"><animate attributeName="opacity" values="0.2;1;0.2" dur="4.1s" begin="-0.3s" repeatCount="indefinite"/></circle>
    <circle cx="400" cy="20" r="0.6" fill="#cfe3ff"><animate attributeName="opacity" values="0.2;1;0.2" dur="2.2s" begin="-1.9s" repeatCount="indefinite"/></circle>
  </g>

  <!-- Moon with soft glow -->
  <circle cx="600" cy="130" r="150" fill="url(#glow)">
    <animate attributeName="opacity" values="0.75;1;0.75" dur="6s" repeatCount="indefinite"/>
  </circle>
  <circle cx="600" cy="130" r="58" fill="url(#moonGrad)"/>
  <g fill="#b8a070" opacity="0.18">
    <circle cx="585" cy="115" r="9"/>
    <circle cx="618" cy="145" r="12"/>
    <circle cx="604" cy="98" r="6"/>
    <circle cx="630" cy="110" r="4"/>
  </g>

  <!-- Shooting star: first at 0.8s, repeats every 4s -->
  <g opacity="0">
    <animateTransform attributeName="transform" type="translate" values="0 0;380 190;380 190" keyTimes="0;0.25;1" dur="4s" begin="0.8s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;0.02;0.18;0.25;1" dur="4s" begin="0.8s" repeatCount="indefinite"/>
    <line x1="60" y1="50" x2="150" y2="80" stroke="url(#shoot)" stroke-width="2" stroke-linecap="round"/>
    <circle cx="150" cy="80" r="2" fill="#ffffff"/>
  </g>

  <!-- Distant hills -->
  <path d="M0,430 C120,380 220,400 320,420 C440,440 560,380 680,400 C740,410 780,395 800,390 L800,600 L0,600 Z" fill="url(#farHill)"/>
  <path d="M0,470 C150,440 260,455 380,460 C520,465 640,430 800,455 L800,600 L0,600 Z" fill="url(#midHill)"/>

  <!-- Foreground hill -->
  <path d="M0,500 C100,470 220,450 300,440 C360,432 420,436 480,450 C580,470 680,440 800,470 L800,600 L0,600 Z" fill="url(#hillGrad)"/>

  <!-- Trees -->
  <g fill="#0b1a1a">
    <path d="M60,372 L74,402 L68,402 L82,432 L72,432 L88,492 L32,492 L48,432 L38,432 L52,402 L46,402 Z"/>
    <path d="M115,410 L126,434 L121,434 L133,458 L124,458 L138,495 L92,495 L106,458 L97,458 L109,434 L104,434 Z"/>
    <path d="M10,410 L20,432 L16,432 L26,456 L18,456 L30,500 L-10,500 L2,456 L-6,456 L4,432 L0,432 Z"/>
    <path d="M745,390 L755,412 L751,412 L761,434 L753,434 L766,470 L724,470 L737,434 L729,434 L739,412 L735,412 Z"/>
  </g>

  <!-- Fox sitting on the hill, gazing up-right at the moon -->
  <g id="fox">
    <!-- Tail (sways around its base) -->
    <g>
      <animateTransform attributeName="transform" type="rotate" values="-4 300 428;4 300 428;-4 300 428" dur="5s" repeatCount="indefinite"/>
      <path d="M302,426 C262,402 214,418 204,462" fill="none" stroke="#e0701f" stroke-width="30" stroke-linecap="round"/>
      <path d="M222,440 C214,446 208,452 204,462" fill="none" stroke="#fff8ee" stroke-width="30" stroke-linecap="round"/>
    </g>

    <!-- Back legs and haunch -->
    <path d="M352,410 L356,446 L368,446 L366,410 Z" fill="#8f3b13"/>
    <ellipse cx="326" cy="396" rx="40" ry="44" fill="#c85a1c"/>

    <!-- Body -->
    <path d="M348,318 C372,310 398,328 405,362 C411,392 410,418 404,440 L296,442 C286,410 296,368 322,342 C330,332 338,322 348,318 Z" fill="#e0701f"/>

    <!-- Chest -->
    <path d="M396,344 C408,370 408,405 404,440 L388,440 C394,405 394,372 396,344 Z" fill="#fff1dc"/>

    <!-- Front leg -->
    <path d="M370,400 L376,442 L390,442 L388,400 Z" fill="#b44e17"/>
    <path d="M372,438 L376,446 L392,446 L390,438 Z" fill="#2a1410"/>

    <!-- Neck -->
    <path d="M352,330 C360,318 372,312 386,314 L400,330 L396,350 C384,336 368,334 352,340 Z" fill="#e0701f"/>

    <!-- Far ear -->
    <path d="M386,284 L392,232 L406,278 Z" fill="#c85a1c"/>
    <path d="M391,270 L393,248 L401,272 Z" fill="#3a1608"/>

    <!-- Head -->
    <path d="M360,310 C362,290 378,280 392,284 C404,276 416,270 432,262 C430,272 424,282 418,288 C418,300 414,310 404,316 C390,324 366,322 360,310 Z" fill="#e0701f"/>

    <!-- Near ear -->
    <path d="M372,290 L368,240 L390,280 Z" fill="#e0701f"/>
    <path d="M374,284 L371,256 L385,280 Z" fill="#3a1608"/>

    <!-- Cheek / muzzle underside -->
    <path d="M404,300 C412,302 418,298 420,292 C416,306 408,314 398,318 C402,312 404,306 404,300 Z" fill="#fff1dc"/>

    <!-- Eye (looking up at the moon) and nose -->
    <path d="M404,289 Q410,283 417,287 Q411,292 404,289 Z" fill="#140b12"/>
    <circle cx="412" cy="287" r="0.8" fill="#ffffff" opacity="0.9"/>
    <circle cx="431" cy="262" r="3.5" fill="#120a14"/>
  </g>
</svg>

Reasoning trace (8,109 tokens)

I'm planning a standalone SVG in a single code block, with no scripts or animations, on an 800x600 canvas. I'm sketching the sky gradient, a glowing moon in the upper right, and twinkling stars, with hills and trees to follow.

Still writing SVG code...

Still writing the head path for the fox...

Still writing the fox's ears and body...

Still writing the fox's chest, front legs, haunch, and neck...

Still working on the tail, a bushy shape that sweeps back from the base and curls around, drawn as a filled path with a stroked alternative.

Still working on the tail, a tip at its end drawn as a white stroke over the orange tail, then the sway animation around the base.

Still working on the ground: a foreground hill with a dark green gradient, and I'm planning distant hills in a lighter purple-blue behind it.

Still placing the trees and the moon: pine silhouettes on the left foreground hill, and a glowing moon at the upper right with a soft halo and a few craters.

Still writing the stars and the shooting star...

Still writing the shooting star's animation, timing its fade so it stays hidden most of the time and only flashes briefly.

Still working on the shooting star's keyframes, with the line starting near the top left and sliding diagonally while its opacity holds briefly and then fades out.

Still writing the fox's colors and remaining details...

Still writing the SVG gradient definitions for the sky, moon, and hills.

Still writing the layers: sky, stars, moon glow, moon, shooting star, then the far hills.

Still writing the foreground hill and where the fox sits on it.

Still writing the fox's body and the tree layout on the foreground hill.

Still writing the fox's body shapes...

Still writing the fox's leg and head shapes...

Still writing the fox's tail and neck shapes...

Still writing the fox's tail stroke...

Still writing the fox's tail placement and the stars.

Still writing the star positions...

Still placing the star coordinates...

Still placing star coordinates...

Still writing the star coordinates and their twinkle animation...

Still writing the shooting star and its gradient, with a white head circle at the leading end.

Still writing the shooting star's opacity and motion keyframes...

Still working on the trees, placing a pine on the right foreground hill near the bottom edge and sketching the layered tiers of the left ones.

Still working on the tree shapes, a pine with layered tiers placed at the left and a second smaller one beside it.

Still working on the tree shapes, placing the smaller pine at the left edge and a pine on the right hill.

Still writing the tree shapes and tiers...