Claude Haiku 5.5

by AnthropicReasoningClean

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

How it went

Total time: 27.8 s
Cost: $0.0032
Output tokens: 6,285
Spent thinking: 1,352 tokens
Speed: 243.2 tok/s
Console errors: 0

First token after: 1.9 s
First visible text after: 9.8 s
Prompt tokens: 796
Code size: 9.0 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"low"}
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 · 216 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="#1d1f4a"/>
      <stop offset="1" stop-color="#3b2a5c"/>
    </linearGradient>
    <radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#fff3c4" stop-opacity="0.55"/>
      <stop offset="0.4" stop-color="#ffd98a" stop-opacity="0.18"/>
      <stop offset="1" stop-color="#ffd98a" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moonGrad" cx="0.35" cy="0.35" r="0.7">
      <stop offset="0" stop-color="#fffdf2"/>
      <stop offset="1" stop-color="#f1dfae"/>
    </radialGradient>
    <linearGradient id="far" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#4b3b70"/>
      <stop offset="1" stop-color="#2a2150"/>
    </linearGradient>
    <linearGradient id="mid" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2d3a5e"/>
      <stop offset="1" stop-color="#18203a"/>
    </linearGradient>
    <linearGradient id="hill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2f4a3a"/>
      <stop offset="1" stop-color="#14231d"/>
    </linearGradient>
    <linearGradient id="fox" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f08a3c"/>
      <stop offset="1" stop-color="#c25a25"/>
    </linearGradient>
    <linearGradient id="shootG" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <style>
    .tw { animation: twinkle 3s ease-in-out infinite; }
    .tw2 { animation: twinkle 4.5s ease-in-out infinite; }
    .tw3 { animation: twinkle 2.2s ease-in-out infinite; }
    @keyframes twinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
    .tail { transform-origin: 252px 430px; animation: sway 5s ease-in-out infinite; }
    @keyframes sway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } }
    .shoot { animation: fly 4s linear infinite; }
    @keyframes fly {
      0% { transform: translate(60px,40px); opacity: 0; }
      3% { opacity: 1; }
      12% { transform: translate(330px,170px); opacity: 0; }
      100% { transform: translate(330px,170px); opacity: 0; }
    }
    .breathe { animation: breathe 6s ease-in-out infinite; transform-origin: 325px 300px; }
    @keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012); } }
    .moonpulse { animation: mp 6s ease-in-out infinite; transform-origin: 620px 130px; }
    @keyframes mp { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
  </style>

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

  <!-- Stars -->
  <g fill="#fff">
    <circle class="tw" cx="40" cy="50" r="1.5"/>
    <circle class="tw2" cx="95" cy="120" r="1"/>
    <circle class="tw3" cx="150" cy="30" r="1.2"/>
    <circle class="tw" cx="210" cy="90" r="1.8"/>
    <circle class="tw2" cx="260" cy="40" r="1"/>
    <circle class="tw3" cx="330" cy="110" r="1.4"/>
    <circle class="tw" cx="380" cy="30" r="1"/>
    <circle class="tw2" cx="450" cy="70" r="1.6"/>
    <circle class="tw3" cx="520" cy="25" r="1.1"/>
    <circle class="tw" cx="720" cy="40" r="1.6"/>
    <circle class="tw2" cx="760" cy="110" r="1.1"/>
    <circle class="tw3" cx="700" cy="200" r="1"/>
    <circle class="tw" cx="30" cy="200" r="1.2"/>
    <circle class="tw2" cx="120" cy="220" r="1"/>
    <circle class="tw3" cx="185" cy="170" r="1.5"/>
    <circle class="tw" cx="250" cy="200" r="1"/>
    <circle class="tw2" cx="300" cy="240" r="1.3"/>
    <circle class="tw3" cx="410" cy="170" r="1"/>
    <circle class="tw" cx="470" cy="230" r="1.4"/>
    <circle class="tw2" cx="520" cy="150" r="1"/>
    <circle class="tw3" cx="545" cy="290" r="1.2"/>
    <circle class="tw" cx="760" cy="290" r="1.3"/>
    <circle class="tw2" cx="680" cy="330" r="1"/>
    <circle class="tw3" cx="60" cy="300" r="1.1"/>
    <circle class="tw" cx="160" cy="330" r="1"/>
    <circle class="tw2" cx="230" cy="290" r="1.5"/>
    <circle class="tw3" cx="500" cy="340" r="1"/>
    <circle class="tw" cx="580" cy="60" r="1.2"/>
    <circle class="tw2" cx="640" cy="20" r="1"/>
    <circle class="tw3" cx="350" cy="190" r="1"/>
    <circle class="tw" cx="90" cy="410" r="1"/>
    <circle class="tw2" cx="470" cy="10" r="1.2"/>
    <circle class="tw3" cx="10" cy="90" r="1"/>
    <circle class="tw" cx="735" cy="240" r="1"/>
    <circle class="tw2" cx="420" cy="290" r="1.4"/>
    <circle class="tw3" cx="290" cy="150" r="1"/>
    <circle class="tw" cx="550" cy="200" r="1.1"/>
    <circle class="tw2" cx="200" cy="130" r="1"/>
    <circle class="tw3" cx="740" cy="520" r="1"/>
    <circle class="tw" cx="25" cy="500" r="1"/>
  </g>

  <!-- Shooting star -->
  <g class="shoot">
    <line x1="0" y1="0" x2="-120" y2="-50" stroke="url(#shootG)" stroke-width="2" stroke-linecap="round"/>
    <circle cx="0" cy="0" r="2" fill="#fff"/>
  </g>

  <!-- Moon -->
  <g class="moonpulse">
    <circle cx="620" cy="130" r="150" fill="url(#glow)"/>
  </g>
  <circle cx="620" cy="130" r="56" fill="url(#moonGrad)"/>
  <g fill="#e6cf95" opacity="0.7">
    <circle cx="602" cy="115" r="9"/>
    <circle cx="638" cy="145" r="6"/>
    <circle cx="612" cy="152" r="4"/>
    <circle cx="640" cy="112" r="3"/>
  </g>

  <!-- Distant hills -->
  <path d="M0 380 C80 330 160 340 240 370 C320 400 400 330 480 345 C560 360 640 320 720 340 C760 350 790 345 800 350 L800 600 L0 600 Z" fill="url(#far)"/>

  <!-- Distant pines -->
  <g fill="#1f1a3d">
    <polygon points="520,380 532,330 544,380"/>
    <polygon points="528,365 536,315 544,365"/>
    <polygon points="552,372 562,322 572,372"/>
    <polygon points="700,355 712,300 724,355"/>
    <polygon points="708,340 716,290 724,340"/>
  </g>

  <!-- Middle hills -->
  <path d="M0 430 C100 390 200 400 300 440 C380 470 460 420 540 430 C620 440 700 400 800 420 L800 600 L0 600 Z" fill="url(#mid)"/>

  <!-- Left trees -->
  <g fill="#0e1628">
    <rect x="40" y="420" width="6" height="40"/>
    <polygon points="43,330 20,400 66,400"/>
    <polygon points="43,350 14,420 72,420"/>
    <rect x="95" y="440" width="5" height="34"/>
    <polygon points="97,380 78,440 116,440"/>
  </g>

  <!-- Foreground hill where fox sits -->
  <path d="M0 470 C90 440 170 430 250 440 C320 448 380 432 460 445 C560 460 660 440 800 455 L800 600 L0 600 Z" fill="url(#hill)"/>

  <!-- Right foreground trees -->
  <g fill="#0b1420">
    <rect x="740" y="470" width="7" height="60"/>
    <polygon points="743,380 715,470 771,470"/>
    <polygon points="743,410 710,490 776,490"/>
    <rect x="675" y="500" width="5" height="40"/>
    <polygon points="677,450 658,505 696,505"/>
  </g>

  <!-- Fox -->
  <g class="breathe">
    <!-- Tail (sways) -->
    <g class="tail">
      <path d="M262,418 C230,400 190,405 176,430 C166,452 182,470 200,462 C220,452 240,440 262,440 Z" fill="url(#fox)"/>
      <path d="M176,430 C166,452 182,470 200,462 C192,452 186,440 176,430 Z" fill="#fbf3e4"/>
    </g>

    <!-- Body -->
    <path d="M262,440 C246,392 268,342 306,334 C342,328 362,368 356,440 Z" fill="url(#fox)"/>
    <!-- Chest fur -->
    <path d="M330,350 C345,365 350,400 348,438 C340,410 332,380 322,360 Z" fill="#fbf3e4"/>
    <!-- Haunch -->
    <ellipse cx="282" cy="410" rx="36" ry="30" fill="#d96d2f"/>
    <!-- Hind foot -->
    <ellipse cx="300" cy="440" rx="22" ry="8" fill="#3a2418"/>

    <!-- Front legs -->
    <rect x="318" y="380" width="12" height="60" rx="5" fill="#d96d2f"/>
    <rect x="334" y="380" width="12" height="60" rx="5" fill="#d96d2f"/>
    <rect x="316" y="432" width="16" height="10" rx="3" fill="#3a2418"/>
    <rect x="332" y="432" width="16" height="10" rx="3" fill="#3a2418"/>

    <!-- Neck -->
    <path d="M308,320 C312,300 330,292 340,300 L350,330 C340,340 318,342 306,334 Z" fill="url(#fox)"/>

    <!-- Ears -->
    <path d="M300,292 L302,238 L324,276 Z" fill="#c25a25"/>
    <path d="M304,284 L305,252 L318,277 Z" fill="#2a1a12"/>
    <path d="M326,276 L340,234 L346,286 Z" fill="#c25a25"/>
    <path d="M331,277 L340,248 L342,281 Z" fill="#2a1a12"/>

    <!-- Head -->
    <ellipse cx="326" cy="296" rx="28" ry="23" fill="url(#fox)"/>

    <!-- Snout -->
    <path d="M340,290 C356,292 370,298 380,304 C370,310 356,312 340,310 Z" fill="#e4773a"/>
    <!-- Cheek white -->
    <path d="M330,306 C342,302 356,308 368,308 C358,316 342,318 330,314 Z" fill="#fbf3e4"/>
    <!-- Nose -->
    <circle cx="380" cy="304" r="3" fill="#1a1010"/>

    <!-- Eye (looking up at moon) -->
    <path d="M330,289 Q338,283 346,288 Q338,293 330,289 Z" fill="#1a1010"/>
    <circle cx="340" cy="288" r="1" fill="#ffd98a"/>

    <!-- Moonlight rim -->
    <path d="M340,266 Q352,272 354,286" fill="none" stroke="#ffe6a8" stroke-width="1.2" opacity="0.7"/>
  </g>

  <!-- Grass tufts -->
  <g stroke="#1d3327" stroke-width="2" fill="none">
    <path d="M230 455 l-4 -10 M234 455 l0 -12 M238 455 l4 -9"/>
    <path d="M390 470 l-3 -9 M394 470 l1 -12 M398 470 l4 -8"/>
    <path d="M120 500 l-4 -10 M124 500 l0 -12"/>
  </g>
</svg>

Reasoning trace (1,352 tokens)

Writing SVG code...

Still writing SVG code...

Still writing SVG code...

Still writing SVG code...

Still writing SVG code...