Skateboarding astronaut catOne-line

Muse Ember

by MetaReasoningClean

Open in new window

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

How it went

Total time: 10.6 s
Cost: $0.0032
Output tokens: 6,373
Spent thinking: 664 tokens
Speed: 701 tok/s
Console errors: 0

First token after: 1.6 s
First visible text after: 2.3 s
Prompt tokens: 365
Code size: 14.9 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"low"}
Max output: 943,718 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 · 216 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
  <defs>
    <linearGradient id="space" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0B1035"/>
      <stop offset="45%" stop-color="#1B215E"/>
      <stop offset="75%" stop-color="#3B2A72"/>
      <stop offset="100%" stop-color="#6B3D7A"/>
    </linearGradient>
    <linearGradient id="moon" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#E9EAF2"/>
      <stop offset="35%" stop-color="#C9CCDC"/>
      <stop offset="100%" stop-color="#8E92AB"/>
    </linearGradient>
    <linearGradient id="earth" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#6ECFFF"/>
      <stop offset="55%" stop-color="#2A7FFF"/>
      <stop offset="100%" stop-color="#1A3FA0"/>
    </linearGradient>
    <linearGradient id="helmet" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#E6F7FF" stop-opacity=".95"/>
      <stop offset="35%" stop-color="#A8DFFF" stop-opacity=".55"/>
      <stop offset="70%" stop-color="#FFE9F3" stop-opacity=".35"/>
      <stop offset="100%" stop-color="#BFE8FF" stop-opacity=".65"/>
    </linearGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#FFFFFF"/>
      <stop offset="100%" stop-color="#D8DEEC"/>
    </linearGradient>
    <linearGradient id="orange" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#FFB84D"/>
      <stop offset="100%" stop-color="#FF8A2A"/>
    </linearGradient>
    <linearGradient id="deck" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#00E5C3"/>
      <stop offset="50%" stop-color="#00B8FF"/>
      <stop offset="100%" stop-color="#7C4DFF"/>
    </linearGradient>
    <radialGradient id="glow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#FFE27A" stop-opacity=".55"/>
      <stop offset="100%" stop-color="#FFE27A" stop-opacity="0"/>
    </radialGradient>
    <filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="3"/></filter>
  </defs>

  <!-- BACKGROUND -->
  <rect width="1280" height="800" fill="url(#space)"/>
  <circle cx="1020" cy="150" r="190" fill="url(#glow)"/>

  <!-- STARS -->
  <g fill="white">
    <g>
      <circle cx="85" cy="95" r="3.5"/><circle cx="210" cy="55" r="2.5"/><circle cx="340" cy="130" r="2"/><circle cx="470" cy="70" r="3"/><circle cx="620" cy="110" r="2.5"/><circle cx="760" cy="55" r="2"/><circle cx="1150" cy="85" r="3"/><circle cx="1210" cy="260" r="2"/>
      <circle cx="150" cy="250" r="2.2"/><circle cx="95" cy="380" r="2.8"/><circle cx="360" cy="260" r="2"/><circle cx="880" cy="220" r="2.5"/><circle cx="1180" cy="380" r="2"/>
      <animate attributeName="opacity" values="1;.4;1" dur="2.4s" repeatCount="indefinite"/>
    </g>
    <g opacity=".85">
      <path d="M180 145 l4 10 10 4-10 4-4 10-4-10-10-4 10-4z"/><path d="M540 180 l3 8 8 3-8 3-3 8-3-8-8-3 8-3z"/><path d="M920 110 l3 8 8 3-8 3-3 8-3-8-8-3 8-3z"/><path d="M1120 300 l3 8 8 3-8 3-3 8-3-8-8-3 8-3z"/>
      <animate attributeName="opacity" values=".4;1;.4" dur="3s" repeatCount="indefinite"/>
    </g>
    <circle cx="48" cy="510" r="2"/><circle cx="1200" cy="520" r="3"/><circle cx="730" cy="340" r="2"/><circle cx="430" cy="360" r="2"/>
  </g>

  <!-- EARTH -->
  <g>
    <animateTransform attributeName="transform" type="translate" values="0 0;0 -8;0 0" dur="5s" repeatCount="indefinite"/>
    <circle cx="1020" cy="155" r="78" fill="url(#earth)"/>
    <circle cx="1020" cy="155" r="78" fill="none" stroke="#8ED8FF" stroke-width="3" opacity=".7"/>
    <path d="M970 110 Q995 95 1015 115 Q1005 135 985 138 Q965 130 970 110Z" fill="#4ADE80"/>
    <path d="M1015 155 Q1045 140 1065 165 Q1050 200 1025 195 Q1005 180 1015 155Z" fill="#4ADE80"/>
    <path d="M980 190 Q1000 180 1015 195 Q1000 215 985 210Z" fill="#A7F3D0" opacity=".9"/>
    <ellipse cx="995" cy="125" rx="35" ry="12" fill="white" opacity=".35" transform="rotate(-18 995 125)"/>
    <ellipse cx="1045" cy="185" rx="28" ry="9" fill="white" opacity=".3" transform="rotate(-18 1045 185)"/>
    <circle cx="1020" cy="155" r="92" fill="none" stroke="#7DD3FC" stroke-width="1.5" stroke-dasharray="4 8" opacity=".6"/>
  </g>

  <!-- SMALL MOON / ROCKET -->
  <g transform="translate(185 165)">
    <circle r="28" fill="#E5E7EB"/><circle cx="-8" cy="-6" r="7" fill="#CBD5E1"/><circle cx="10" cy="10" r="5" fill="#CBD5E1"/><circle cx="12" cy="-12" r="4" fill="#CBD5E1"/>
  </g>
  <g transform="translate(1125 480) rotate(28)">
    <path d="M0 -48 C18 -28 22 -5 18 18 L-18 18 C-22 -5 -18 -28 0 -48Z" fill="#FF5A76"/>
    <circle cy="-12" r="11" fill="#BAE6FD" stroke="#0369A1" stroke-width="3"/>
    <path d="M-18 8 L-38 38 L-14 28Z" fill="#FFB84D"/><path d="M18 8 L38 38 L14 28Z" fill="#FFB84D"/>
    <path d="M-10 20 Q0 48 10 20Z" fill="#FFE27A"><animate attributeName="d" values="M-10 20 Q0 52 10 20Z;M-10 20 Q0 38 10 20Z;M-10 20 Q0 52 10 20Z" dur=".6s" repeatCount="indefinite"/></path>
  </g>

  <!-- MOON SURFACE -->
  <path d="M0 575 Q220 540 440 565 Q700 595 900 555 Q1120 525 1280 560 L1280 800 L0 800Z" fill="url(#moon)"/>
  <path d="M0 610 Q300 585 600 610 Q950 635 1280 600 L1280 800 L0 800Z" fill="#AAB0C6" opacity=".55"/>
  <g fill="#9AA0B8" opacity=".7">
    <ellipse cx="180" cy="660" rx="85" ry="22"/><ellipse cx="980" cy="705" rx="120" ry="26"/><ellipse cx="620" cy="735" rx="90" ry="18"/><ellipse cx="1150" cy="635" rx="55" ry="13"/><ellipse cx="340" cy="620" rx="45" ry="10"/>
  </g>
  <g fill="#7E849E" opacity=".6">
    <ellipse cx="180" cy="655" rx="60" ry="13"/><ellipse cx="980" cy="698" rx="85" ry="16"/><ellipse cx="620" cy="730" rx="62" ry="11"/>
  </g>
  <!-- rocks -->
  <path d="M95 605 L125 585 L155 605 L140 625 L105 625Z" fill="#8E94AE"/><path d="M1070 600 L1105 578 L1145 600 L1125 622 L1085 622Z" fill="#8E94AE"/><circle cx="240" cy="690" r="14" fill="#9AA0B8"/><circle cx="830" cy="680" r="10" fill="#9AA0B8"/>

  <!-- FLAG -->
  <g transform="translate(90 500)">
    <rect x="-4" y="0" width="8" height="115" rx="4" fill="#E2E8F0"/>
    <path d="M0 5 L110 22 L0 48Z" fill="#FF4D6D"/><path d="M0 5 L110 22 L0 48Z" fill="none" stroke="white" stroke-width="2"/>
    <circle cx="32" cy="24" r="11" fill="white"/><text x="32" y="29" text-anchor="middle" font-size="16">🐱</text>
    <path d="M20 58 Q55 78 90 58" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- SPEED / MOTION LINES -->
  <g stroke="white" stroke-linecap="round" opacity=".85">
    <line x1="120" y1="480" x2="260" y2="480" stroke-width="7"><animate attributeName="x1" values="180;80;180" dur="1.2s" repeatCount="indefinite"/><animate attributeName="x2" values="300;180;300" dur="1.2s" repeatCount="indefinite"/></line>
    <line x1="90" y1="530" x2="240" y2="530" stroke-width="5" opacity=".7"><animate attributeName="x1" values="140;50;140" dur="1s" repeatCount="indefinite"/><animate attributeName="x2" values="260;150;260" dur="1s" repeatCount="indefinite"/></line>
    <line x1="150" y1="425" x2="250" y2="425" stroke-width="5" opacity=".6"><animate attributeName="x1" values="200;120;200" dur="1.4s" repeatCount="indefinite"/><animate attributeName="x2" values="280;200;280" dur="1.4s" repeatCount="indefinite"/></line>
  </g>

  <!-- DUST -->
  <g fill="#E8EAF2" opacity=".9">
    <circle cx="360" cy="640" r="22"><animate attributeName="cx" values="360;300" dur="1.5s" repeatCount="indefinite"/><animate attributeName="opacity" values=".9;0" dur="1.5s" repeatCount="indefinite"/></circle>
    <circle cx="400" cy="660" r="16"><animate attributeName="cx" values="400;320" dur="1.1s" repeatCount="indefinite"/><animate attributeName="opacity" values=".8;0" dur="1.1s" repeatCount="indefinite"/></circle>
    <circle cx="880" cy="655" r="18"><animate attributeName="cx" values="880;950" dur="1.3s" repeatCount="indefinite"/><animate attributeName="opacity" values=".8;0" dur="1.3s" repeatCount="indefinite"/></circle>
  </g>

  <!-- SKATEBOARD + CAT -->
  <g>
    <animateTransform attributeName="transform" type="translate" values="0 0;0 -14;0 0" dur="1.8s" repeatCount="indefinite"/>
    <g transform="rotate(-6 640 620)">

      <!-- tail -->
      <path d="M520 470 Q430 470 405 410 Q395 380 425 375 Q445 375 440 405 Q435 435 470 440 Q505 445 525 425Z" fill="url(#orange)" stroke="#D97706" stroke-width="3"/>
      <path d="M425 375 Q440 360 455 378" fill="#FF8A2A"/>

      <!-- backpack -->
      <rect x="505" y="340" width="62" height="130" rx="22" fill="#FF5A76" stroke="#BE123C" stroke-width="4"/>
      <rect x="518" y="355" width="36" height="18" rx="8" fill="#FFD166"/>
      <circle cx="536" cy="410" r="16" fill="#BAE6FD" stroke="#0369A1" stroke-width="3"/>

      <!-- legs -->
      <path d="M600 520 L570 590 L640 600 L660 530Z" fill="url(#suit)" stroke="#94A3B8" stroke-width="3"/>
      <path d="M680 520 L710 585 L780 570 L750 510Z" fill="url(#suit)" stroke="#94A3B8" stroke-width="3"/>
      <!-- boots -->
      <ellipse cx="605" cy="605" rx="52" ry="22" fill="#1E293B"/><ellipse cx="605" cy="598" rx="52" ry="14" fill="#334155"/>
      <ellipse cx="760" cy="580" rx="54" ry="22" fill="#1E293B"/><ellipse cx="760" cy="573" rx="54" ry="14" fill="#334155"/>
      <circle cx="585" cy="600" r="7" fill="#00E5C3"/><circle cx="740" cy="575" r="7" fill="#00E5C3"/>

      <!-- body suit -->
      <path d="M560 380 Q640 340 720 380 L740 530 Q640 560 540 530Z" fill="url(#suit)" stroke="#94A3B8" stroke-width="4"/>
      <rect x="600" y="400" width="80" height="70" rx="14" fill="#E0F2FE" stroke="#7DD3FC" stroke-width="3"/>
      <circle cx="625" cy="425" r="9" fill="#EF4444"/><circle cx="655" cy="425" r="9" fill="#22C55E"/><circle cx="640" cy="450" r="9" fill="#FACC15"/>
      <path d="M560 480 Q640 510 740 480" fill="none" stroke="#CBD5E1" stroke-width="4"/>
      <!-- belt -->
      <rect x="555" y="500" width="170" height="22" rx="10" fill="#334155"/>

      <!-- left arm to board -->
      <path d="M570 410 Q505 470 520 545 Q530 575 565 570 Q590 565 585 540 Q575 480 610 445Z" fill="url(#suit)" stroke="#94A3B8" stroke-width="4"/>
      <ellipse cx="560" cy="570" rx="30" ry="20" fill="#FFB84D" stroke="#D97706" stroke-width="3"/>

      <!-- right arm balancing -->
      <path d="M710 410 Q800 400 845 355 Q865 335 845 318 Q820 305 795 335 Q765 375 705 375Z" fill="url(#suit)" stroke="#94A3B8" stroke-width="4"/>
      <ellipse cx="845" cy="330" rx="28" ry="20" fill="#FFB84D" stroke="#D97706" stroke-width="3" transform="rotate(-30 845 330)"/>
      <path d="M830 318 l8 14 M850 310 l6 14" stroke="#D97706" stroke-width="3" stroke-linecap="round"/>

      <!-- skateboard -->
      <g>
        <path d="M380 615 Q640 580 900 615 Q930 620 915 645 Q640 675 365 645 Q350 620 380 615Z" fill="url(#deck)" stroke="#0F766E" stroke-width="4"/>
        <path d="M410 622 Q640 595 870 622" fill="none" stroke="white" stroke-width="4" stroke-dasharray="18 14" opacity=".8"/>
        <text x="640" y="638" text-anchor="middle" font-family="Arial Black,Arial" font-weight="900" font-size="22" fill="white" letter-spacing="3">MOON RIDER ★</text>
        <!-- wheels -->
        <g><circle cx="470" cy="655" r="28" fill="#111827"/><circle cx="470" cy="655" r="16" fill="#FDE047"/><circle cx="470" cy="655" r="6" fill="#111827"/><path d="M470 640 v30 M455 655 h30" stroke="#111827" stroke-width="3"><animateTransform attributeName="transform" type="rotate" from="0 470 655" to="360 470 655" dur=".7s" repeatCount="indefinite"/></path></g>
        <g><circle cx="810" cy="655" r="28" fill="#111827"/><circle cx="810" cy="655" r="16" fill="#FDE047"/><circle cx="810" cy="655" r="6" fill="#111827"/><path d="M810 640 v30 M795 655 h30" stroke="#111827" stroke-width="3"><animateTransform attributeName="transform" type="rotate" from="0 810 655" to="360 810 655" dur=".7s" repeatCount="indefinite"/></path></g>
      </g>

      <!-- CAT HEAD -->
      <g>
        <!-- ears -->
        <path d="M565 235 L540 155 L625 190Z" fill="url(#orange)" stroke="#D97706" stroke-width="4" stroke-linejoin="round"/>
        <path d="M715 235 L740 155 L655 190Z" fill="url(#orange)" stroke="#D97706" stroke-width="4" stroke-linejoin="round"/>
        <path d="M570 210 L558 170 L600 190Z" fill="#FFC2D1"/>
        <path d="M710 210 L722 170 L680 190Z" fill="#FFC2D1"/>
        <!-- face -->
        <circle cx="640" cy="260" r="95" fill="url(#orange)" stroke="#D97706" stroke-width="4"/>
        <!-- stripes -->
        <path d="M600 180 q10 18 0 35 M640 172 v35 M680 180 q-10 18 0 35" stroke="#D97706" stroke-width="6" stroke-linecap="round" fill="none"/>
        <!-- cheeks -->
        <circle cx="575" cy="295" r="18" fill="#FFD6A5" opacity=".9"/><circle cx="705" cy="295" r="18" fill="#FFD6A5" opacity=".9"/>
        <!-- eyes -->
        <ellipse cx="605" cy="260" rx="14" ry="18" fill="#1E293B"/><ellipse cx="675" cy="260" rx="14" ry="18" fill="#1E293B"/>
        <circle cx="610" cy="252" r="5" fill="white"/><circle cx="680" cy="252" r="5" fill="white"/>
        <circle cx="600" cy="268" r="3" fill="white"/><circle cx="670" cy="268" r="3" fill="white"/>
        <!-- nose mouth -->
        <path d="M628 295 Q640 285 652 295 Q640 308 628 295Z" fill="#FF6B9D" stroke="#BE185D" stroke-width="2"/>
        <path d="M640 305 Q640 320 622 322 M640 305 Q640 320 658 322" fill="none" stroke="#92400E" stroke-width="3" stroke-linecap="round"/>
        <!-- whiskers -->
        <g stroke="#7C3A00" stroke-width="2.5" stroke-linecap="round" opacity=".8">
          <line x1="540" y1="285" x2="575" y2="292"/><line x1="542" y1="305" x2="577" y2="305"/><line x1="740" y1="285" x2="705" y2="292"/><line x1="738" y1="305" x2="703" y2="305"/>
        </g>
        <!-- helmet -->
        <circle cx="640" cy="260" r="122" fill="url(#helmet)" stroke="#E0F2FE" stroke-width="6"/>
        <path d="M555 200 Q575 145 640 138" fill="none" stroke="white" stroke-width="10" stroke-linecap="round" opacity=".85"/>
        <circle cx="580" cy="175" r="10" fill="white" opacity=".9"/>
        <!-- helmet ring -->
        <path d="M525 340 Q640 390 755 340 L755 365 Q640 415 525 365Z" fill="#E2E8F0" stroke="#94A3B8" stroke-width="3"/>
        <!-- antenna -->
        <line x1="640" y1="138" x2="640" y2="95" stroke="#E2E8F0" stroke-width="6" stroke-linecap="round"/>
        <circle cx="640" cy="85" r="14" fill="#EF4444" stroke="white" stroke-width="3"><animate attributeName="r" values="14;18;14" dur="1.2s" repeatCount="indefinite"/></circle>
        <circle cx="640" cy="85" r="26" fill="none" stroke="#EF4444" stroke-width="2" opacity=".5"><animate attributeName="r" values="18;38" dur="1.2s" repeatCount="indefinite"/><animate attributeName="opacity" values=".6;0" dur="1.2s" repeatCount="indefinite"/></circle>
      </g>
    </g>
  </g>

  <!-- TITLE -->
  <g font-family="Arial Black, Arial, sans-serif" text-anchor="middle">
    <text x="640" y="92" font-size="52" font-weight="900" fill="white" letter-spacing="4" stroke="#1B215E" stroke-width="2">ASTRO CAT</text>
    <text x="640" y="128" font-size="26" font-weight="800" fill="#FDE047" letter-spacing="8">ON THE MOON 🛹🌙</text>
  </g>

  <!-- SURFACE SHADOW -->
  <ellipse cx="640" cy="720" rx="320" ry="28" fill="#6B7280" opacity=".35" filter="url(#soft)"/>
</svg>

Reasoning trace (664 tokens)

Evaluating fenced code block format choice between HTML and SVG for complete file output.