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 49 s
Cost: $0.012
Output tokens: 23,536
Spent thinking: 17,628 tokens
Speed: 220 tok/s
Console errors: 0

First token after: 1.7 s
First visible text after: 1 min 33 s
Prompt tokens: 796
Code size: 10.8 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"high"}
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 · 249 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
  <defs>
    <style>
      .t1 { animation: tw 2.6s ease-in-out infinite; }
      .t2 { animation: tw 3.4s ease-in-out -1.1s infinite; }
      .t3 { animation: tw 4.2s ease-in-out -2.3s infinite; }
      .t4 { animation: tw 1.9s ease-in-out -0.6s infinite; }
      @keyframes tw {
        0%, 100% { opacity: 0.2; }
        50% { opacity: 1; }
      }
      .shoot {
        opacity: 0;
        animation: shoot 4s linear 1.5s infinite;
      }
      @keyframes shoot {
        0%   { transform: translate(0px, 0px);     opacity: 0; }
        2%   { opacity: 1; }
        10%  { transform: translate(260px, 110px); opacity: 0; }
        100% { transform: translate(260px, 110px); opacity: 0; }
      }
      .breath {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: breathe 4.8s ease-in-out infinite;
      }
      @keyframes breathe {
        0%, 100% { transform: scale(1, 1); }
        50%      { transform: scale(1.012, 1.018); }
      }
    </style>

    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#060b1c"/>
      <stop offset="0.55" stop-color="#15204a"/>
      <stop offset="0.8" stop-color="#2e3a72"/>
      <stop offset="1" stop-color="#5b4a84"/>
    </linearGradient>

    <radialGradient id="milky" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#9d8be0" stop-opacity="0.28"/>
      <stop offset="1" stop-color="#9d8be0" stop-opacity="0"/>
    </radialGradient>

    <radialGradient id="moonGlow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#fff4cf" stop-opacity="0.9"/>
      <stop offset="0.25" stop-color="#ffe9a8" stop-opacity="0.35"/>
      <stop offset="0.6" stop-color="#ffd98a" stop-opacity="0.08"/>
      <stop offset="1" stop-color="#ffd98a" stop-opacity="0"/>
    </radialGradient>

    <radialGradient id="moonFace" cx="0.35" cy="0.35" r="0.7">
      <stop offset="0" stop-color="#fffdf0"/>
      <stop offset="0.6" stop-color="#f6e6b4"/>
      <stop offset="1" stop-color="#e2c98a"/>
    </radialGradient>

    <radialGradient id="starHalo" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#ffffff" stop-opacity="0.6"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>

    <linearGradient id="farHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#34467f"/>
      <stop offset="1" stop-color="#1f2d5c"/>
    </linearGradient>

    <linearGradient id="midHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#223a6a"/>
      <stop offset="1" stop-color="#15244a"/>
    </linearGradient>

    <linearGradient id="mainHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2c6470"/>
      <stop offset="0.5" stop-color="#16354a"/>
      <stop offset="1" stop-color="#0a1a2c"/>
    </linearGradient>

    <linearGradient id="fur" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#f59a4a"/>
      <stop offset="1" stop-color="#d0602a"/>
    </linearGradient>

    <linearGradient id="tailGrad" 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>

    <g id="pine">
      <path fill="#0b1733" d="M0 -92 L-14 -62 L-8 -62 L-22 -34 L-14 -34 L-28 -6 L28 -6 L14 -34 L22 -34 L8 -62 L14 -62 Z"/>
    </g>
  </defs>

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

  <!-- Milky way band -->
  <ellipse cx="400" cy="110" rx="480" ry="70" transform="rotate(-18 400 110)" fill="url(#milky)"/>

  <!-- Stars with halos -->
  <circle cx="690" cy="64" r="6" fill="url(#starHalo)"/>
  <circle cx="152" cy="30" r="6" fill="url(#starHalo)"/>
  <circle cx="772" cy="110" r="6" fill="url(#starHalo)"/>

  <g fill="#ffffff">
    <circle class="t1" cx="38" cy="42" r="1.3"/>
    <circle class="t2" cx="96" cy="88" r="0.9"/>
    <circle class="t3" cx="152" cy="30" r="1.5"/>
    <circle class="t4" cx="212" cy="112" r="1"/>
    <circle class="t1" cx="262" cy="52" r="0.9"/>
    <circle class="t2" cx="322" cy="18" r="1.3"/>
    <circle class="t3" cx="384" cy="96" r="0.8"/>
    <circle class="t4" cx="432" cy="38" r="1.2"/>
    <circle class="t1" cx="474" cy="14" r="0.8"/>
    <circle class="t2" cx="502" cy="112" r="1.1"/>
    <circle class="t3" cx="40" cy="162" r="1"/>
    <circle class="t4" cx="72" cy="232" r="0.8"/>
    <circle class="t1" cx="122" cy="190" r="1.4"/>
    <circle class="t2" cx="182" cy="252" r="0.8"/>
    <circle class="t3" cx="236" cy="190" r="1"/>
    <circle class="t4" cx="292" cy="146" r="0.8"/>
    <circle class="t1" cx="20" cy="312" r="0.9"/>
    <circle class="t2" cx="92" cy="322" r="1.1"/>
    <circle class="t3" cx="160" cy="318" r="0.8"/>
    <circle class="t4" cx="24" cy="398" r="0.6"/>
    <circle class="t1" cx="640" cy="30" r="0.8"/>
    <circle class="t2" cx="690" cy="64" r="1.2"/>
    <circle class="t3" cx="742" cy="30" r="1"/>
    <circle class="t4" cx="772" cy="110" r="1.3"/>
    <circle class="t1" cx="748" cy="168" r="0.8"/>
    <circle class="t2" cx="700" cy="226" r="1.4"/>
    <circle class="t3" cx="648" cy="250" r="0.8"/>
    <circle class="t4" cx="574" cy="264" r="1"/>
    <circle class="t1" cx="520" cy="236" r="0.8"/>
    <circle class="t2" cx="470" cy="286" r="1.2"/>
    <circle class="t3" cx="560" cy="320" r="0.8"/>
    <circle class="t4" cx="640" cy="320" r="1"/>
    <circle class="t1" cx="720" cy="300" r="0.9"/>
    <circle class="t2" cx="776" cy="336" r="1.1"/>
    <circle class="t3" cx="700" cy="360" r="0.7"/>
    <circle class="t4" cx="500" cy="180" r="0.7"/>
    <circle class="t1" cx="440" cy="190" r="0.8"/>
    <circle class="t2" cx="560" cy="30" r="0.9"/>
    <circle class="t3" cx="600" cy="70" r="0.6"/>
    <circle class="t4" cx="120" cy="110" r="0.8"/>
    <circle class="t1" cx="330" cy="70" r="0.7"/>
    <circle class="t2" cx="250" cy="30" r="0.6"/>
    <circle class="t3" cx="20" cy="80" r="1"/>
    <circle class="t4" cx="196" cy="60" r="0.6"/>
    <circle class="t1" cx="350" cy="140" r="0.9"/>
    <circle class="t2" cx="460" cy="90" r="1.3"/>
    <circle class="t3" cx="530" cy="60" r="0.7"/>
    <circle class="t4" cx="240" cy="230" r="0.6"/>
    <circle class="t1" cx="300" cy="210" r="0.8"/>
    <circle class="t2" cx="100" cy="400" r="0.5"/>
  </g>

  <!-- Moon -->
  <circle cx="610" cy="140" r="190" fill="url(#moonGlow)">
    <animate attributeName="opacity" values="0.7;1;0.7" dur="6s" repeatCount="indefinite"/>
  </circle>
  <circle cx="610" cy="140" r="58" fill="url(#moonFace)"/>
  <g fill="#d4bb7a" opacity="0.45">
    <circle cx="595" cy="128" r="11"/>
    <circle cx="630" cy="158" r="8"/>
    <circle cx="622" cy="118" r="5"/>
    <circle cx="600" cy="165" r="6"/>
    <circle cx="645" cy="128" r="4"/>
  </g>

  <!-- Shooting star (first at 1.5s, then every 4s) -->
  <g transform="translate(170 60)">
    <g class="shoot">
      <line x1="-80" y1="-32" x2="0" y2="0" stroke="url(#tailGrad)" stroke-width="2" stroke-linecap="round"/>
      <circle r="4" fill="#ffffff" opacity="0.35"/>
      <circle r="1.6" fill="#ffffff"/>
    </g>
  </g>

  <!-- Distant hills -->
  <path d="M0 400 C100 330 180 340 260 380 C340 330 430 300 520 360 C600 320 700 330 800 380 L800 600 L0 600 Z" fill="url(#farHill)"/>

  <!-- Mid hills -->
  <path d="M0 470 C150 430 260 420 380 405 C500 390 600 415 800 395 L800 600 L0 600 Z" fill="url(#midHill)"/>

  <!-- Pine trees -->
  <g>
    <use href="#pine" transform="translate(26 462) scale(1.1)"/>
    <use href="#pine" transform="translate(60 458) scale(0.8)"/>
    <use href="#pine" transform="translate(96 456) scale(0.6)"/>
    <use href="#pine" transform="translate(520 398) scale(0.8)"/>
    <use href="#pine" transform="translate(548 404) scale(1)"/>
    <use href="#pine" transform="translate(578 410) scale(0.7)"/>
    <use href="#pine" transform="translate(676 404) scale(0.7)"/>
    <use href="#pine" transform="translate(706 400) scale(1)"/>
    <use href="#pine" transform="translate(742 394) scale(1.2)"/>
  </g>

  <!-- Main hill -->
  <path d="M0 500 C120 450 230 390 340 372 C420 360 500 390 600 420 C680 440 740 430 800 425 L800 600 L0 600 Z" fill="url(#mainHill)"/>
  <path d="M0 500 C120 450 230 390 340 372 C420 360 500 390 600 420 C680 440 740 430 800 425" fill="none" stroke="#5b9a9a" stroke-width="1.5" opacity="0.6"/>

  <!-- Fox ground shadow -->
  <ellipse cx="345" cy="377" rx="78" ry="7" fill="#050a18" opacity="0.55"/>

  <!-- Tail (swaying) -->
  <g>
    <animateTransform attributeName="transform" type="rotate"
      values="-4 318 366;5 318 366;-4 318 366" keyTimes="0;0.5;1"
      keySplines="0.45 0 0.55 1;0.45 0 0.55 1" calcMode="spline"
      dur="3.6s" repeatCount="indefinite"/>
    <path d="M322 364 C292 342 236 344 216 364 C204 378 214 392 238 390 C264 387 296 386 326 376 Z" fill="url(#fur)"/>
    <path d="M220 366 C206 376 209 392 238 390 C233 383 228 374 220 366 Z" fill="#fff6e6"/>
  </g>

  <!-- Fox body (gentle breathing) -->
  <g class="breath">
    <!-- Body -->
    <path d="M318 378 C300 350 306 312 330 296 C350 284 376 292 384 316 C390 340 386 362 372 378 Z" fill="url(#fur)"/>
    <!-- Chest -->
    <path d="M352 298 C374 302 386 320 386 342 C386 358 382 368 376 378 L362 378 C368 352 364 322 352 298 Z" fill="#fff1dc"/>
    <!-- Haunch -->
    <path d="M312 350 C306 330 318 318 336 320 C352 324 358 344 352 362 C346 374 326 380 316 374 C310 368 311 358 312 350 Z" fill="#c95f22"/>
    <ellipse cx="334" cy="377" rx="16" ry="4" fill="#3a1d12"/>
    <!-- Front leg -->
    <path d="M358 330 C364 346 366 360 364 378 L378 378 C380 360 380 344 376 330 Z" fill="#d86a2b"/>
    <ellipse cx="370" cy="377" rx="10" ry="4" fill="#3a1d12"/>

    <!-- Neck -->
    <path d="M344 262 C346 282 362 296 384 304 L390 276 L366 266 Z" fill="url(#fur)"/>

    <!-- Ears -->
    <path d="M354 240 L344 186 L382 226 Z" fill="#e8762f" stroke="#b5501d" stroke-width="1.5" stroke-linejoin="round"/>
    <path d="M358 232 L350 200 L374 226 Z" fill="#4a1d0c"/>
    <path d="M374 230 L386 178 L404 226 Z" fill="#e8762f" stroke="#b5501d" stroke-width="1.5" stroke-linejoin="round"/>
    <path d="M380 224 L387 192 L397 222 Z" fill="#4a1d0c"/>

    <!-- Head -->
    <path d="M350 262 C344 242 360 226 382 226 C398 226 408 234 416 240 L444 247 C448 249 448 255 443 257 L418 263 C406 273 386 279 368 275 C356 272 352 268 350 262 Z" fill="url(#fur)"/>
    <!-- Cheek fluff -->
    <path d="M386 264 C398 262 410 260 418 256 C414 270 400 278 384 280 C379 276 381 268 386 264 Z" fill="#fff1dc"/>
    <!-- Eye (looking up toward the moon) -->
    <path d="M398 244 Q404 234 416 236 Q410 247 398 244 Z" fill="#1a0c08"/>
    <circle cx="408" cy="240" r="1.2" fill="#fff6d0"/>
    <!-- Nose and mouth -->
    <ellipse cx="444" cy="250" rx="3.2" ry="2.6" fill="#1a0c08"/>
    <path d="M424 259 Q434 258 441 257" stroke="#3a1d12" stroke-width="1.3" fill="none" stroke-linecap="round"/>
  </g>
</svg>

Reasoning trace (17,628 tokens)

I'm working out the requirements for a single SVG in one code block, with a 800x600 viewBox, no JavaScript, and animations handled by SMIL or CSS. The shooting star needs a 4-second loop with the first one appearing within 2 seconds, so I'm planning a CSS keyframe animation for it.

I'm weighing a CSS keyframe animation with a 4-second duration and a 1.5-second delay, so the first shooting star appears inside the 2-second window and then repeats every 4 seconds. I'm also checking that the base style starts at zero opacity, so nothing shows before the delay ends.

Still working through the CSS and SMIL choices: the shooting star will use a keyframe animation with a 1.5-second delay so its first run lands within the 2-second window, and the tail sway will rotate around a fixed point on a looping timer.

Still writing the star styles: I'm using a CSS twinkle class with varied animation delays so I don't need dozens of separate animate elements. Then I'm laying out the sky gradient, moving from deep navy at the top to a warm peach glow near the horizon.

Still writing the SVG code...

Still writing SVG code...

Still writing the SVG layers...

Still writing the SVG code...

Still writing the shooting star's keyframes: it starts hidden, fades in quickly, then travels down-left while fading out. I'm checking whether its path crosses the moon at (610,140) as it moves from (680,60).

Still working on the shooting star's position: the moon sits in the way of the first path I considered, so I'm moving the star into the open sky to the upper left of the moon, where it won't cross it.

Still writing the shooting star: I'm placing it inside an outer group at (180,50) so the CSS animation doesn't override that position, and checking that its path to about (440,150) stays clear of the moon and the hill. Now I'm setting up the star twinkle keyframes.

Still writing the star twinkle keyframes, with varied durations and negative delays so the stars don't all pulse in unison.

Still writing the SVG code...

Still writing the SVG body path for the fox, checking that its bottom edge sits just into the hill crest.

Still writing the SVG code...

Still writing the fox's ears and eye: I'm setting the outer and inner ear shapes, then placing the almond-shaped eye angled up toward the moon.

Still writing the fox's neck and chest, placing the cream fluff so the head joins smoothly onto the body.

Still writing the fox's neck and body shapes, checking how the head joins the back.

Still writing the breathing motion for the fox, scaling the body and head group so it rises and falls slightly from the base.

Still writing the SVG code...

Still writing the star positions: I'm scattering about fifty stars across the open sky, keeping clear of the moon, the shooting star's path, and the hill below y=360.

Still placing the stars: I'm filling in the remaining positions across the upper sky, keeping them away from the moon and the hill.

Still writing the star classes: I'm setting up three twinkle timings with different durations and staggered negative delays.

Still writing the star classes and the shooting star's gradient tail, with the head as a small white dot and a soft glow behind it.

Still writing the shooting star's keyframes and positioning it so its path runs clear of the moon.

Still writing the shooting star's keyframes: it stays hidden at first, fades in quickly, then runs down-right while fading out, and I'm checking that the 1.5-second delay lands it inside the 2-second window.

Now I'm settling the shooting star's keyframes: it stays hidden at first, flashes to full opacity almost immediately, then travels down and to the right while fading out, with a linear timing so the motion stays even.

Now I'm settling the glow: a SMIL opacity animation on the moon's halo, cycling between 0.75 and 1 over six seconds so it pulses slowly. I'm also picking a sky gradient running from deep navy at the top through indigo to a muted violet near the horizon, with a soft glow ellipse where the hills meet the sky. The far hills will be a muted blue, probably kept flat.

Still writing the hill colors and the tree placement along the mid hill.

Still placing the trees: I'm putting a few pines on the mid hill near the right edge and the left side, where they'll show above the main hill.

Still writing the pine trees: I'm defining a reusable pine shape with a tiered silhouette, then placing it on the mid hill to peek above the main one.

Still writing the SVG code...

Still writing the SVG gradients...

Still writing the SVG code...

Still writing the SVG tail and fox body...

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

Still writing the fox's body and chest shapes, placing the haunch and chest so the fur gradient meets the cream underside.

Still writing the fox's hind leg and front leg shapes, and I'm checking whether the front leg overlaps the cream chest.

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

Still writing the fox's head shapes and face details...

Still writing the fox's face: I'm adding the nose, the mouth line, and checking the gap between the head and the body at the neck.

Still writing the fox's neck and head join, adding a neck shape so the head connects to the body.

Still writing the fox's shadow and checking the hill crest near x=318, where the feet should sit just on the slope.

Still writing the shooting star: I'm placing it in a group at (170,60) with a tail that trails up and to the left of the head, a small white dot for the glow, and a bright center point.

Still writing the star twinkle timings, with three durations and a staggered delay on one of them.

Still writing the star twinkle keyframes and the shooting star's animation timing.

Still writing the shooting star's keyframes and the breathing animation for the fox.

Still placing the stars: I'm listing their positions and sizes, and assigning each one a twinkle class in a repeating cycle.

Still placing the stars: I'm listing the remaining positions across the right side of the sky, each with its size and twinkle class.

Still placing the stars: I'm adding the last few positions along the upper right, keeping them clear of the moon.

Still placing the stars: I'm listing the last batch of positions near the moon and across the upper sky, each with a size and twinkle class.

Still placing the stars and halos: I'm adding a few larger halo stars and defining the pine shape for the trees.

Still placing the hills and trees: I'm drawing the far and mid hill paths behind the fox and positioning pines along the mid hill.

Still placing the trees: I'm positioning pines along the mid hill on both sides, checking that their bases sit on the hill and stay visible above the main one.

Still writing the hill and tree details: I'm adding a teal highlight along the main hill's crest and checking that the mid-hill trees stay visible above it.

Still writing the moon's rim light and the pine shape, setting the pine's fill to a dark navy in its definition.