Claude Opus 5.5

by Anthropicreasoning defaultClean

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

How it went

Total time: 1 min 25 s
Cost: $0.180
Output tokens: 8,836
Spent thinking: 2,746 tokens
Speed: 108.3 tok/s
Console errors: 0

First token after: 3.6 s
First visible text after: 37.0 s
Prompt tokens: 796
Code size: 11.0 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-opus-5.5
Reasoning sent: model default
Max output: 128,000 tokens
Generated: Nov 12, 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 · 212 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
  <title>Fox gazing at the moon</title>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#070a1f"/>
      <stop offset="0.55" stop-color="#1a1f4a"/>
      <stop offset="1" stop-color="#3b2f5e"/>
    </linearGradient>
    <radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#fff6d5" stop-opacity="0.55"/>
      <stop offset="0.35" stop-color="#ffe9b0" stop-opacity="0.18"/>
      <stop offset="1" stop-color="#ffe9b0" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moonFill" cx="0.4" cy="0.38" r="0.65">
      <stop offset="0" stop-color="#fffdf0"/>
      <stop offset="0.7" stop-color="#f6ebc6"/>
      <stop offset="1" stop-color="#e5d29e"/>
    </radialGradient>
    <linearGradient id="hillFront" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#1b2045"/>
      <stop offset="1" stop-color="#0a0c1d"/>
    </linearGradient>
    <linearGradient id="hillFar" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#3a3f72"/>
      <stop offset="1" stop-color="#262a55"/>
    </linearGradient>
    <linearGradient id="hillMid" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#252a54"/>
      <stop offset="1" stop-color="#171b3b"/>
    </linearGradient>
    <linearGradient id="furGrad" x1="1" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f29a4a"/>
      <stop offset="1" stop-color="#c4601f"/>
    </linearGradient>
    <linearGradient id="streak" gradientUnits="userSpaceOnUse" x1="-110" y1="-44" x2="0" y2="0">
      <stop offset="0" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="1"/>
    </linearGradient>
    <path id="pine" d="M0 0 L-13 0 L-5 -11 L-10 -11 L-3 -23 L-7 -23 L0 -38 L7 -23 L3 -23 L10 -11 L5 -11 L13 0 Z M-1.5 0 h3 v5 h-3 Z"/>
    <path id="spark" d="M0 -6 L1.2 -1.2 L6 0 L1.2 1.2 L0 6 L-1.2 1.2 L-6 0 L-1.2 -1.2 Z"/>
    <clipPath id="tailClip">
      <path d="M272 440 C245 428 214 406 188 414 C166 421 164 448 183 456 C210 464 246 456 276 448 Z"/>
    </clipPath>
    <style>
      .tw1{animation:tw 3s ease-in-out infinite}
      .tw2{animation:tw 4.2s ease-in-out -1.3s infinite}
      .tw3{animation:tw 2.4s ease-in-out -0.7s infinite}
      .tw4{animation:tw 5s ease-in-out -2.5s infinite}
      @keyframes tw{0%,100%{opacity:1}50%{opacity:.2}}
      .glowPulse{animation:gp 6s ease-in-out infinite}
      @keyframes gp{0%,100%{opacity:1}50%{opacity:.8}}
    </style>
  </defs>

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

  <!-- Stars -->
  <g fill="#fff">
    <g class="tw1">
      <circle cx="40" cy="40" r="1.4"/><circle cx="120" cy="90" r="1"/><circle cx="210" cy="30" r="1.6"/>
      <circle cx="300" cy="110" r="1.1"/><circle cx="390" cy="45" r="1.3"/><circle cx="470" cy="140" r="1"/>
      <circle cx="540" cy="30" r="1.5"/><circle cx="740" cy="60" r="1.2"/><circle cx="770" cy="210" r="1"/>
      <circle cx="80" cy="200" r="1.2"/><circle cx="250" cy="230" r="0.9"/><circle cx="430" cy="250" r="1"/>
      <circle cx="700" cy="270" r="0.9"/><circle cx="160" cy="280" r="0.8"/>
    </g>
    <g class="tw2">
      <circle cx="70" cy="120" r="1"/><circle cx="170" cy="55" r="1.2"/><circle cx="260" cy="160" r="1.4"/>
      <circle cx="340" cy="20" r="1"/><circle cx="420" cy="95" r="1.6"/><circle cx="500" cy="200" r="1.1"/>
      <circle cx="590" cy="250" r="0.9"/><circle cx="760" cy="130" r="1.4"/><circle cx="20" cy="260" r="1"/>
      <circle cx="350" cy="200" r="1"/><circle cx="520" cy="80" r="1"/><circle cx="660" cy="20" r="1.1"/>
      <circle cx="120" cy="320" r="0.8"/>
    </g>
    <g class="tw3">
      <circle cx="25" cy="160" r="0.9"/><circle cx="140" cy="150" r="1.3"/><circle cx="230" cy="100" r="0.9"/>
      <circle cx="320" cy="60" r="1.2"/><circle cx="455" cy="20" r="1"/><circle cx="560" cy="150" r="1.2"/>
      <circle cx="720" cy="240" r="1.1"/><circle cx="790" cy="20" r="1"/><circle cx="200" cy="200" r="1.1"/>
      <circle cx="390" cy="170" r="0.9"/><circle cx="480" cy="290" r="0.8"/><circle cx="610" cy="300" r="0.8"/>
      <circle cx="60" cy="300" r="0.9"/>
    </g>
    <g class="tw4">
      <circle cx="100" cy="20" r="1"/><circle cx="190" cy="120" r="0.8"/><circle cx="280" cy="270" r="0.9"/>
      <circle cx="370" cy="130" r="1"/><circle cx="440" cy="210" r="1.2"/><circle cx="510" cy="250" r="0.9"/>
      <circle cx="580" cy="60" r="1"/><circle cx="745" cy="300" r="0.8"/><circle cx="780" cy="90" r="0.9"/>
      <circle cx="10" cy="80" r="1.1"/><circle cx="330" cy="250" r="0.8"/><circle cx="700" cy="10" r="0.9"/>
    </g>
    <g fill="#fff8dc">
      <use href="#spark" transform="translate(150 70)" class="tw2"/>
      <use href="#spark" transform="translate(405 75) scale(0.8)" class="tw1"/>
      <use href="#spark" transform="translate(500 110) scale(0.7)" class="tw3"/>
      <use href="#spark" transform="translate(60 230) scale(0.7)" class="tw4"/>
      <use href="#spark" transform="translate(755 175) scale(0.9)" class="tw3"/>
      <use href="#spark" transform="translate(290 190) scale(0.6)" class="tw1"/>
    </g>
  </g>

  <!-- Shooting star -->
  <g opacity="0">
    <animateTransform attributeName="transform" type="translate" values="140 50; 460 178; 460 178" keyTimes="0;0.22;1" dur="4s" begin="0.8s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;0.04;0.16;0.22;1" dur="4s" begin="0.8s" repeatCount="indefinite"/>
    <line x1="-110" y1="-44" x2="0" y2="0" stroke="url(#streak)" stroke-width="2.2" stroke-linecap="round"/>
    <circle r="2.4" fill="#fff"/>
    <circle r="6" fill="#fff" opacity="0.25"/>
  </g>

  <!-- Moon -->
  <g class="glowPulse">
    <circle cx="620" cy="140" r="180" fill="url(#glow)"/>
  </g>
  <circle cx="620" cy="140" r="56" fill="url(#moonFill)"/>
  <g fill="#d9c58f" opacity="0.45">
    <circle cx="600" cy="125" r="9"/>
    <circle cx="640" cy="160" r="12"/>
    <circle cx="635" cy="118" r="5"/>
    <circle cx="598" cy="160" r="5"/>
    <circle cx="655" cy="135" r="4"/>
  </g>

  <!-- Far hills -->
  <path d="M0 360 C120 322 220 342 320 332 C450 316 560 300 680 320 C740 330 780 325 800 330 L800 600 L0 600 Z" fill="url(#hillFar)"/>
  <g fill="#2c3163">
    <use href="#pine" transform="translate(560 316) scale(0.6)"/>
    <use href="#pine" transform="translate(575 314) scale(0.75)"/>
    <use href="#pine" transform="translate(592 316) scale(0.55)"/>
    <use href="#pine" transform="translate(90 340) scale(0.6)"/>
    <use href="#pine" transform="translate(104 338) scale(0.5)"/>
  </g>

  <!-- Mid hills with trees -->
  <path d="M0 405 C150 372 300 396 450 382 C600 366 700 382 800 372 L800 600 L0 600 Z" fill="url(#hillMid)"/>
  <g fill="#141834">
    <use href="#pine" transform="translate(40 396) scale(1.1)"/>
    <use href="#pine" transform="translate(64 392) scale(1.4)"/>
    <use href="#pine" transform="translate(88 392) scale(0.9)"/>
    <use href="#pine" transform="translate(470 382) scale(1)"/>
    <use href="#pine" transform="translate(495 378) scale(1.3)"/>
    <use href="#pine" transform="translate(640 375) scale(1.2)"/>
    <use href="#pine" transform="translate(662 377) scale(0.9)"/>
    <use href="#pine" transform="translate(690 376) scale(1.5)"/>
    <use href="#pine" transform="translate(718 375) scale(1)"/>
    <use href="#pine" transform="translate(760 372) scale(1.3)"/>
  </g>

  <!-- Front hill -->
  <path d="M0 600 L0 470 C120 450 220 440 320 442 C450 444 560 480 680 520 C740 540 780 555 800 560 L800 600 Z" fill="url(#hillFront)"/>
  <path d="M120 455 C220 440 320 442 320 442 C450 444 560 480 680 520" fill="none" stroke="#5a5f9a" stroke-width="1.5" opacity="0.5"/>
  <g stroke="#2a3060" stroke-width="1.5" stroke-linecap="round" fill="none">
    <path d="M150 455 l-3 -9 M154 455 l2 -10 M158 454 l4 -7"/>
    <path d="M420 452 l-2 -8 M424 453 l3 -9 M428 454 l5 -6"/>
    <path d="M560 484 l-3 -9 M564 486 l2 -10"/>
    <path d="M230 446 l-2 -7 M234 446 l3 -8"/>
  </g>

  <!-- Fox -->
  <g id="fox">
    <!-- shadow -->
    <ellipse cx="300" cy="447" rx="95" ry="6" fill="#05060f" opacity="0.45"/>

    <!-- Tail (swaying) -->
    <g>
      <animateTransform attributeName="transform" type="rotate" values="-3 272 442; 6 272 442; -3 272 442" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.45 0 0.55 1;0.45 0 0.55 1" dur="4s" repeatCount="indefinite"/>
      <path d="M272 440 C245 428 214 406 188 414 C166 421 164 448 183 456 C210 464 246 456 276 448 Z" fill="url(#furGrad)"/>
      <g clip-path="url(#tailClip)">
        <path d="M195 405 C210 420 212 445 200 466 L150 466 L150 400 Z" fill="#f7efe2"/>
        <path d="M240 430 C220 432 200 438 188 440" stroke="#b5561c" stroke-width="2" fill="none" opacity="0.5"/>
      </g>
    </g>

    <!-- Body -->
    <path d="M268 445 C255 415 265 375 295 355 C310 345 318 325 320 305 L352 300 C350 330 356 370 366 445 Z" fill="url(#furGrad)"/>
    <!-- Chest -->
    <path d="M343 303 C360 330 363 372 358 412 C350 380 340 345 330 312 Z" fill="#f7efe2"/>
    <!-- Haunch -->
    <ellipse cx="292" cy="418" rx="32" ry="28" fill="#c9631f"/>
    <path d="M268 420 C272 400 290 392 310 398" fill="none" stroke="#e98a3c" stroke-width="2" opacity="0.6"/>
    <!-- Hind paw -->
    <ellipse cx="308" cy="443" rx="14" ry="5" fill="#3a2418"/>
    <!-- Front legs -->
    <path d="M338 380 L346 380 L348 445 L336 445 Z" fill="#8f4516"/>
    <path d="M336 425 L348 425 L349 445 L334 445 Z" fill="#2d1b12"/>
    <path d="M352 378 L362 378 L366 445 L352 445 Z" fill="#d8742c"/>
    <path d="M352 422 L364 422 L367 445 L350 445 Z" fill="#3a2418"/>

    <!-- Head -->
    <g>
      <!-- ears -->
      <path d="M320 284 L314 246 L341 272 Z" fill="#c9631f"/>
      <path d="M321 280 L317 254 L334 272 Z" fill="#4a2414"/>
      <path d="M334 276 L341 242 L355 273 Z" fill="#e07a2e"/>
      <path d="M337 272 L341 251 L350 271 Z" fill="#4a2414"/>
      <!-- head shape -->
      <path d="M314 302 C310 282 324 268 343 269 C356 270 368 268 381 266 C379 275 371 285 357 295 C346 306 324 314 314 302 Z" fill="url(#furGrad)"/>
      <!-- cheek / muzzle -->
      <path d="M336 298 C350 296 366 284 378 274 C370 290 354 303 334 307 C328 306 328 300 336 298 Z" fill="#f7efe2"/>
      <!-- nose -->
      <circle cx="380" cy="267" r="3.4" fill="#1a0f0a"/>
      <!-- eye -->
      <path d="M344 281 Q350 275 356 278 Q351 284 344 281 Z" fill="#1a0f0a"/>
      <circle cx="352" cy="279" r="0.9" fill="#fff"/>
      <!-- moonlit rim -->
      <path d="M343 269 C356 270 368 268 381 266" fill="none" stroke="#ffe3b0" stroke-width="1.2" opacity="0.7"/>
    </g>
    <!-- rim light on back -->
    <path d="M341 242 L355 273" stroke="#ffd9a0" stroke-width="1" opacity="0.6"/>
    <path d="M352 300 C350 330 356 370 366 445" fill="none" stroke="#ffc98a" stroke-width="1.2" opacity="0.45"/>
  </g>

  <!-- foreground grass in front of fox -->
  <g stroke="#1b2045" stroke-width="1.8" stroke-linecap="round" fill="none">
    <path d="M290 449 l-2 -8 M294 449 l3 -9 M372 449 l-2 -7 M376 449 l4 -8 M250 449 l-3 -7"/>
  </g>
</svg>

Reasoning trace (2,746 tokens)

Still designing the SVG layout...

Still writing the fox's body shape...

Still writing the SVG code...

Still working on the tail shape, adjusting its curve so it sweeps out to the left.

Still refining the tail, tip, and the shooting star streak.

Still placing the moon glow and the star field.

Still placing the distant hill layers and the pine trees along the mid ridge...

Still writing the SVG code...

Still working on the fox's legs and paws, and the rest of the body shape.

Still writing the SVG code...

Still writing the CSS for the twinkling stars, then sketching out the star positions.