Skateboarding astronaut catOne-line

Claude Opus 5.5

by Anthropicreasoning defaultClean

Open in new window

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

How it went

Total time: 1 min 35 s
Cost: $0.221
Output tokens: 10,942
Spent thinking: 2,026 tokens
Speed: 118.6 tok/s
Console errors: 0

First token after: 3.1 s
First visible text after: 27.1 s
Prompt tokens: 531
Code size: 16.4 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

“draw me an SVG of an astronaut cat skateboarding on the moon”

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

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
  <defs>
    <radialGradient id="sky" cx="50%" cy="30%" r="80%">
      <stop offset="0" stop-color="#2a2160"/>
      <stop offset="0.55" stop-color="#120f33"/>
      <stop offset="1" stop-color="#05040f"/>
    </radialGradient>
    <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#d9d6e3"/>
      <stop offset="0.4" stop-color="#a9a5b8"/>
      <stop offset="1" stop-color="#6c6880"/>
    </linearGradient>
    <radialGradient id="earth" cx="35%" cy="35%" r="70%">
      <stop offset="0" stop-color="#6fc3ff"/>
      <stop offset="0.7" stop-color="#2d6fd1"/>
      <stop offset="1" stop-color="#173a7a"/>
    </radialGradient>
    <radialGradient id="earthGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0.7" stop-color="#5ab0ff" stop-opacity="0.5"/>
      <stop offset="1" stop-color="#5ab0ff" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="glass" cx="38%" cy="32%" r="75%">
      <stop offset="0" stop-color="#ffffff" stop-opacity="0.25"/>
      <stop offset="0.6" stop-color="#9fd8ff" stop-opacity="0.12"/>
      <stop offset="1" stop-color="#5ba8e8" stop-opacity="0.35"/>
    </radialGradient>
    <radialGradient id="crater" cx="50%" cy="40%" r="60%">
      <stop offset="0" stop-color="#7b778d"/>
      <stop offset="0.8" stop-color="#9a96aa"/>
      <stop offset="1" stop-color="#c9c6d4"/>
    </radialGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="1" stop-color="#cdd5e1"/>
    </linearGradient>
    <linearGradient id="deck" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#ff5f6d"/>
      <stop offset="0.5" stop-color="#ffb347"/>
      <stop offset="1" stop-color="#8e54e9"/>
    </linearGradient>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="3" result="b"/>
      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <clipPath id="earthClip"><circle cx="1060" cy="150" r="80"/></clipPath>
    <g id="craters">
      <ellipse cx="120" cy="640" rx="60" ry="14" fill="url(#crater)"/>
      <ellipse cx="380" cy="720" rx="95" ry="22" fill="url(#crater)"/>
      <ellipse cx="560" cy="625" rx="30" ry="7" fill="url(#crater)"/>
      <ellipse cx="760" cy="680" rx="70" ry="16" fill="url(#crater)"/>
      <ellipse cx="980" cy="760" rx="110" ry="25" fill="url(#crater)"/>
      <ellipse cx="1120" cy="630" rx="40" ry="9" fill="url(#crater)"/>
      <circle cx="250" cy="670" r="5" fill="#8a869c"/>
      <circle cx="660" cy="760" r="7" fill="#8a869c"/>
      <circle cx="900" cy="640" r="4" fill="#8a869c"/>
      <circle cx="1220" cy="700" r="6" fill="#8a869c"/>
    </g>
  </defs>

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

  <!-- Stars -->
  <g fill="#fff">
    <circle cx="60" cy="60" r="1.5"/><circle cx="140" cy="200" r="2"><animate attributeName="opacity" values="1;0.2;1" dur="2s" repeatCount="indefinite"/></circle>
    <circle cx="230" cy="90" r="1.2"/><circle cx="310" cy="300" r="1.8"><animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/></circle>
    <circle cx="400" cy="40" r="2.2"/><circle cx="470" cy="180" r="1.3"/>
    <circle cx="540" cy="80" r="1.6"><animate attributeName="opacity" values="1;0.3;1" dur="2.6s" repeatCount="indefinite"/></circle>
    <circle cx="620" cy="250" r="1.2"/><circle cx="700" cy="50" r="2"/><circle cx="780" cy="160" r="1.4"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.8s" repeatCount="indefinite"/></circle>
    <circle cx="860" cy="300" r="1.7"/><circle cx="900" cy="70" r="1.2"/><circle cx="960" cy="280" r="2"/>
    <circle cx="1180" cy="320" r="1.5"/><circle cx="1230" cy="60" r="2"><animate attributeName="opacity" values="1;0.2;1" dur="3.2s" repeatCount="indefinite"/></circle>
    <circle cx="30" cy="380" r="1.4"/><circle cx="190" cy="430" r="1.8"/><circle cx="1100" cy="420" r="1.3"/>
    <circle cx="350" cy="420" r="1.1"/><circle cx="1000" cy="460" r="1.6"/><circle cx="90" cy="300" r="1"/>
    <circle cx="1250" cy="230" r="1.2"/><circle cx="820" cy="400" r="1"/>
  </g>
  <!-- Sparkle stars -->
  <g fill="#fff8d0" filter="url(#glow)">
    <path d="M260 160 l4 12 12 4 -12 4 -4 12 -4 -12 -12 -4 12 -4z">
      <animateTransform attributeName="transform" type="rotate" values="0 260 176;90 260 176" dur="4s" repeatCount="indefinite"/>
    </path>
    <path d="M880 210 l3 9 9 3 -9 3 -3 9 -3 -9 -9 -3 9 -3z" opacity="0.9"/>
  </g>

  <!-- Shooting star -->
  <g opacity="0">
    <line x1="0" y1="0" x2="-120" y2="-40" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
    <circle r="3" fill="#fff" filter="url(#glow)"/>
    <animateTransform attributeName="transform" type="translate" values="200,40;700,210" dur="5s" keyTimes="0;1" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="0;1;0;0" keyTimes="0;0.08;0.18;1" dur="5s" repeatCount="indefinite"/>
  </g>

  <!-- Earth -->
  <circle cx="1060" cy="150" r="100" fill="url(#earthGlow)"/>
  <circle cx="1060" cy="150" r="80" fill="url(#earth)"/>
  <g clip-path="url(#earthClip)" fill="#4caf50" opacity="0.9">
    <g>
      <path d="M990 110 q20 -25 45 -10 q15 15 -5 30 q-20 10 -15 30 q-10 15 -25 0 q-10 -25 0 -50z"/>
      <path d="M1060 170 q25 -15 40 5 q10 25 -10 40 q-25 5 -30 -20z"/>
      <path d="M1080 90 q20 -5 30 10 q-5 15 -25 10z"/>
      <path d="M1150 110 q20 -25 45 -10 q15 15 -5 30 q-20 10 -15 30 q-10 15 -25 0 q-10 -25 0 -50z"/>
      <path d="M1220 170 q25 -15 40 5 q10 25 -10 40 q-25 5 -30 -20z"/>
      <path d="M1240 90 q20 -5 30 10 q-5 15 -25 10z"/>
      <animateTransform attributeName="transform" type="translate" values="0,0;-160,0" dur="20s" repeatCount="indefinite"/>
    </g>
    <ellipse cx="1040" cy="120" rx="40" ry="8" fill="#fff" opacity="0.5"/>
  </g>
  <path d="M1060 70 a80 80 0 0 1 0 160 a60 80 0 0 0 0 -160z" fill="#000" opacity="0.35"/>

  <!-- Moon ground -->
  <path d="M0,560 Q320,520 640,530 T1280,555 L1280,800 L0,800Z" fill="url(#ground)"/>
  <ellipse cx="200" cy="560" rx="40" ry="6" fill="#bdb9cb"/>
  <ellipse cx="1050" cy="560" rx="55" ry="7" fill="#bdb9cb"/>

  <!-- Scrolling craters -->
  <g>
    <use href="#craters"/>
    <use href="#craters" x="1280"/>
    <animateTransform attributeName="transform" type="translate" values="0,0;-1280,0" dur="8s" repeatCount="indefinite"/>
  </g>

  <!-- Speed lines -->
  <g stroke="#ffffff" stroke-linecap="round" stroke-width="4" opacity="0.6">
    <line x1="380" y1="420" x2="300" y2="420"><animate attributeName="opacity" values="0;1;0" dur="0.8s" repeatCount="indefinite"/></line>
    <line x1="360" y1="470" x2="250" y2="470"><animate attributeName="opacity" values="1;0;1" dur="0.8s" repeatCount="indefinite"/></line>
    <line x1="400" y1="520" x2="320" y2="520"><animate attributeName="opacity" values="0;1;0" dur="0.6s" repeatCount="indefinite"/></line>
  </g>

  <!-- Shadow -->
  <ellipse cx="640" cy="608" rx="150" ry="12" fill="#000" opacity="0.25">
    <animate attributeName="rx" values="150;135;150" dur="1.2s" repeatCount="indefinite"/>
  </ellipse>

  <!-- Dust puffs -->
  <g fill="#e6e3ef">
    <circle cx="500" cy="595" r="6">
      <animate attributeName="cx" values="500;380" dur="1s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="595;570" dur="1s" repeatCount="indefinite"/>
      <animate attributeName="r" values="6;20" dur="1s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.9;0" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="500" cy="598" r="5">
      <animate attributeName="cx" values="500;400" dur="1.3s" begin="0.4s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="598;585" dur="1.3s" begin="0.4s" repeatCount="indefinite"/>
      <animate attributeName="r" values="5;16" dur="1.3s" begin="0.4s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.8;0" dur="1.3s" begin="0.4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="700" cy="598" r="4">
      <animate attributeName="cx" values="690;600" dur="1.1s" begin="0.2s" repeatCount="indefinite"/>
      <animate attributeName="r" values="4;14" dur="1.1s" begin="0.2s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.7;0" dur="1.1s" begin="0.2s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Astronaut cat -->
  <g transform="translate(640,400)">
    <g>
      <animateTransform attributeName="transform" type="translate" values="0,0;0,-14;0,0" dur="1.2s" repeatCount="indefinite"/>
      <g>
        <animateTransform attributeName="transform" type="rotate" values="-3 0 150;3 0 150;-3 0 150" dur="2.4s" repeatCount="indefinite"/>

        <!-- Skateboard -->
        <rect x="-112" y="162" width="24" height="12" rx="3" fill="#8d97a6"/>
        <rect x="88" y="162" width="24" height="12" rx="3" fill="#8d97a6"/>
        <g>
          <circle cx="-100" cy="184" r="15" fill="#ffd54a" stroke="#c99a16" stroke-width="3"/>
          <g stroke="#c99a16" stroke-width="3">
            <line x1="-100" y1="174" x2="-100" y2="194"/><line x1="-110" y1="184" x2="-90" y2="184"/>
            <animateTransform attributeName="transform" type="rotate" values="0 -100 184;360 -100 184" dur="0.5s" repeatCount="indefinite"/>
          </g>
          <circle cx="100" cy="184" r="15" fill="#ffd54a" stroke="#c99a16" stroke-width="3"/>
          <g stroke="#c99a16" stroke-width="3">
            <line x1="100" y1="174" x2="100" y2="194"/><line x1="90" y1="184" x2="110" y2="184"/>
            <animateTransform attributeName="transform" type="rotate" values="0 100 184;360 100 184" dur="0.5s" repeatCount="indefinite"/>
          </g>
        </g>
        <path d="M-150,150 L150,150 Q178,148 180,128 Q186,138 178,152 Q168,168 145,168 L-145,168 Q-168,168 -178,152 Q-186,138 -180,128 Q-178,148 -150,150Z" fill="url(#deck)" stroke="#3a2b55" stroke-width="3"/>
        <g fill="#fff" opacity="0.85">
          <path d="M-20 155 l5 -3 5 3 -5 3z"/><circle cx="-60" cy="159" r="3"/><circle cx="40" cy="159" r="3"/>
        </g>

        <!-- Tail -->
        <path d="M50,90 C130,115 170,60 140,10" fill="none" stroke="#f08a2c" stroke-width="20" stroke-linecap="round"/>
        <path d="M50,90 C130,115 170,60 140,10" fill="none" stroke="#c9631a" stroke-width="20" stroke-dasharray="8 22" stroke-linecap="butt"/>
        <circle cx="140" cy="10" r="10" fill="#fff4e6"/>

        <!-- Backpack -->
        <rect x="-92" y="-25" width="184" height="120" rx="22" fill="#b9c3d1" stroke="#8d97a6" stroke-width="3"/>
        <rect x="-84" y="-35" width="14" height="30" rx="5" fill="#8d97a6"/>

        <!-- Legs -->
        <path d="M-30,85 L-70,140" stroke="url(#suit)" stroke-width="40" stroke-linecap="round" fill="none"/>
        <path d="M30,85 L68,140" stroke="url(#suit)" stroke-width="40" stroke-linecap="round" fill="none"/>
        <path d="M-30,85 L-70,140" stroke="#b8c2cf" stroke-width="40" stroke-linecap="round" fill="none" opacity="0.25" stroke-dasharray="0 30 4 100"/>
        <ellipse cx="-78" cy="142" rx="32" ry="13" fill="#5a6372"/>
        <ellipse cx="76" cy="142" rx="32" ry="13" fill="#5a6372"/>

        <!-- Body -->
        <ellipse cx="0" cy="40" rx="70" ry="72" fill="url(#suit)" stroke="#b8c2cf" stroke-width="3"/>
        <rect x="-70" y="78" width="140" height="12" rx="6" fill="#ff8a3d" opacity="0.85"/>
        <rect x="-30" y="10" width="60" height="44" rx="8" fill="#3c4a63" stroke="#2a3447" stroke-width="2"/>
        <circle cx="-15" cy="24" r="5" fill="#ff4d6d"><animate attributeName="opacity" values="1;0.2;1" dur="1s" repeatCount="indefinite"/></circle>
        <circle cx="0" cy="24" r="5" fill="#4dff9a"><animate attributeName="opacity" values="0.2;1;0.2" dur="1.4s" repeatCount="indefinite"/></circle>
        <circle cx="15" cy="24" r="5" fill="#4dc3ff"><animate attributeName="opacity" values="1;0.4;1" dur="0.7s" repeatCount="indefinite"/></circle>
        <rect x="-20" y="38" width="40" height="6" rx="3" fill="#7f8ca3"/>
        <!-- Patch -->
        <circle cx="-42" cy="40" r="11" fill="#2d4a8a" stroke="#fff" stroke-width="2"/>
        <path d="M-42 33 l2 5 5 0 -4 3 2 5 -5 -3 -5 3 2 -5 -4 -3 5 0z" fill="#ffd54a"/>

        <!-- Left arm (raised) -->
        <g>
          <animateTransform attributeName="transform" type="rotate" values="0 -55 5;-12 -55 5;0 -55 5" dur="1.2s" repeatCount="indefinite"/>
          <path d="M-55,5 Q-110,-5 -128,-60" stroke="url(#suit)" stroke-width="30" stroke-linecap="round" fill="none"/>
          <circle cx="-130" cy="-68" r="18" fill="#f39c3d" stroke="#c9631a" stroke-width="2"/>
          <circle cx="-140" cy="-80" r="5" fill="#ffb8c6"/><circle cx="-128" cy="-85" r="5" fill="#ffb8c6"/><circle cx="-117" cy="-78" r="5" fill="#ffb8c6"/>
        </g>
        <!-- Right arm -->
        <g>
          <animateTransform attributeName="transform" type="rotate" values="0 55 10;10 55 10;0 55 10" dur="2.4s" repeatCount="indefinite"/>
          <path d="M55,10 Q105,30 138,5" stroke="url(#suit)" stroke-width="30" stroke-linecap="round" fill="none"/>
          <circle cx="145" cy="2" r="17" fill="#f39c3d" stroke="#c9631a" stroke-width="2"/>
        </g>

        <!-- Neck ring -->
        <ellipse cx="0" cy="-12" rx="62" ry="16" fill="#9aa5b5" stroke="#78849a" stroke-width="3"/>

        <!-- Head -->
        <polygon points="-52,-108 -46,-162 -10,-132" fill="#f39c3d" stroke="#c9631a" stroke-width="3" stroke-linejoin="round"/>
        <polygon points="52,-108 46,-162 10,-132" fill="#f39c3d" stroke="#c9631a" stroke-width="3" stroke-linejoin="round"/>
        <polygon points="-44,-118 -42,-148 -22,-130" fill="#ffb8c6"/>
        <polygon points="44,-118 42,-148 22,-130" fill="#ffb8c6"/>
        <ellipse cx="0" cy="-82" rx="60" ry="54" fill="#f39c3d" stroke="#c9631a" stroke-width="3"/>
        <path d="M-12,-134 l4,18 M0,-136 l0,20 M12,-134 l-4,18" stroke="#c9631a" stroke-width="5" stroke-linecap="round"/>
        <path d="M-60,-85 l14,3 M-58,-70 l13,0 M60,-85 l-14,3 M58,-70 l-13,0" stroke="#c9631a" stroke-width="4" stroke-linecap="round"/>
        <ellipse cx="-14" cy="-60" rx="20" ry="15" fill="#fff4e6"/>
        <ellipse cx="14" cy="-60" rx="20" ry="15" fill="#fff4e6"/>
        <!-- Eyes -->
        <g>
          <ellipse cx="-22" cy="-92" rx="12" ry="15" fill="#1d2336"/>
          <ellipse cx="22" cy="-92" rx="12" ry="15" fill="#1d2336"/>
          <circle cx="-18" cy="-98" r="5" fill="#fff"/><circle cx="26" cy="-98" r="5" fill="#fff"/>
          <circle cx="-25" cy="-86" r="2.5" fill="#fff"/><circle cx="19" cy="-86" r="2.5" fill="#fff"/>
          <animateTransform attributeName="transform" type="scale" values="1 1;1 1;1 0.1;1 1" keyTimes="0;0.9;0.95;1" dur="4s" repeatCount="indefinite" additive="sum"/>
        </g>
        <ellipse cx="-38" cy="-70" rx="9" ry="5" fill="#ff8fa8" opacity="0.7"/>
        <ellipse cx="38" cy="-70" rx="9" ry="5" fill="#ff8fa8" opacity="0.7"/>
        <path d="M-7,-72 L7,-72 L0,-64Z" fill="#ff7a96"/>
        <path d="M0,-64 Q-8,-54 -15,-58 M0,-64 Q8,-54 15,-58" stroke="#5a3010" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M-6,-55 Q0,-46 6,-55Z" fill="#ff5f7e"/>
        <g stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.9">
          <line x1="-30" y1="-62" x2="-70" y2="-68"/><line x1="-30" y1="-56" x2="-70" y2="-54"/>
          <line x1="30" y1="-62" x2="70" y2="-68"/><line x1="30" y1="-56" x2="70" y2="-54"/>
        </g>

        <!-- Helmet -->
        <circle cx="0" cy="-88" r="92" fill="url(#glass)" stroke="#e6edf5" stroke-width="7"/>
        <circle cx="0" cy="-88" r="92" fill="none" stroke="#9aa5b5" stroke-width="2" opacity="0.6"/>
        <path d="M-62,-130 A75,75 0 0 1 -10,-165" stroke="#fff" stroke-width="10" fill="none" stroke-linecap="round" opacity="0.7"/>
        <circle cx="-70" cy="-108" r="5" fill="#fff" opacity="0.7"/>
        <path d="M55,-30 A75,75 0 0 0 75,-60" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.4"/>
        <!-- Antenna -->
        <line x1="55" y1="-160" x2="72" y2="-200" stroke="#9aa5b5" stroke-width="4"/>
        <circle cx="72" cy="-202" r="7" fill="#ff4d6d" filter="url(#glow)">
          <animate attributeName="fill" values="#ff4d6d;#ffd54a;#ff4d6d" dur="1.5s" repeatCount="indefinite"/>
        </circle>
      </g>
    </g>
  </g>

  <!-- Foreground rocks -->
  <path d="M0,800 L0,740 Q40,720 80,735 Q120,715 170,745 L190,800Z" fill="#5e5a70"/>
  <path d="M1280,800 L1280,730 Q1240,715 1200,735 Q1160,725 1130,750 L1110,800Z" fill="#5e5a70"/>
</svg>

Reasoning trace (2,026 tokens)

I'm working out an SVG scene for the user, with a space background, stars, Earth, and a cratered moon surface, plus a cat in an astronaut suit on a skateboard. I'm thinking about adding some animation with SMIL or CSS, and about making the sizing responsive.

Still writing the SVG scene...

Still working out the cat's coordinates: a helmet circle over the head, an orange tail poking out behind, and a skateboard underneath. For motion I'm planning a gentle bob and tilt on the cat, drifting dust, twinkling stars, and a shooting star, with the craters on the flat ground scrolling left on a looping copy.

Still placing the cat's skateboard and legs: a deck with rounded ends and wheels underneath, then white legs down to grey boots.

Still placing the cat's backpack, body, and arms: a grey pack behind it, a white suit with a chest panel, one arm raised and one reaching out.

Still writing the cat's tail, neck ring, head, ears, eyes, and muzzle...

Still placing the cat's helmet and its highlight, and checking that the head fits inside it. Next I'm adding drifting dust and a few motion lines behind the cat, then setting the bob and tilt animations on the whole figure.

Placing the Earth in the upper right, and I'm deciding whether the scene needs any text, probably not.