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: 11.9 s
Cost: $0.0031
Output tokens: 6,143
Spent thinking: 1,368 tokens
Speed: 683.4 tok/s
Console errors: 0

First token after: 2.9 s
First visible text after: 5.0 s
Prompt tokens: 365
Code size: 12.2 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"medium"}
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 · 203 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" role="img" aria-labelledby="title desc">
<title id="title">Astronaut Cat Skateboarding on the Moon</title>
<desc id="desc">A cute orange cat in a white astronaut suit riding a skateboard across the lunar surface, with Earth and stars in space.</desc>
<style>
  .bob { animation: bob 2.6s ease-in-out infinite alternate; }
  @keyframes bob { from { transform: translateY(0px); } to { transform: translateY(-14px); } }
  .twinkle { animation: twinkle 2s ease-in-out infinite alternate; }
  @keyframes twinkle { from { opacity:.35; } to { opacity:1; } }
  .twinkle2 { animation: twinkle 3s ease-in-out infinite alternate-reverse; }
  .wag { transform-box: fill-box; transform-origin: right center; animation: wag 1.8s ease-in-out infinite alternate; }
  @keyframes wag { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
  .wheel { transform-box: fill-box; transform-origin: center; animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .floatRock { animation: floatRock 4s ease-in-out infinite alternate; }
  @keyframes floatRock { from { transform: translateY(0); } to { transform: translateY(-18px); } }
  .glow { animation: glow 3s ease-in-out infinite alternate; }
  @keyframes glow { from { opacity:.55; } to { opacity:.95; } }
</style>
<defs>
  <radialGradient id="space" cx="50%" cy="38%" r="80%">
    <stop offset="0%" stop-color="#1b2a5e"/>
    <stop offset="45%" stop-color="#0b1136"/>
    <stop offset="100%" stop-color="#03051a"/>
  </radialGradient>
  <linearGradient id="moonGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#e6e2d8"/>
    <stop offset="35%" stop-color="#c9c4b8"/>
    <stop offset="100%" stop-color="#8f8b82"/>
  </linearGradient>
  <linearGradient id="suit" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#ffffff"/>
    <stop offset="100%" stop-color="#d9dee8"/>
  </linearGradient>
  <linearGradient id="fur" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#ffb86b"/>
    <stop offset="100%" stop-color="#f28c2e"/>
  </linearGradient>
  <radialGradient id="glass" cx="35%" cy="28%" r="75%">
    <stop offset="0%" stop-color="#ffffff" stop-opacity=".85"/>
    <stop offset="35%" stop-color="#aee9ff" stop-opacity=".38"/>
    <stop offset="100%" stop-color="#6fc7ec" stop-opacity=".18"/>
  </radialGradient>
  <radialGradient id="earthGrad" cx="35%" cy="30%" r="80%">
    <stop offset="0%" stop-color="#7dd3fc"/>
    <stop offset="55%" stop-color="#2b7de0"/>
    <stop offset="100%" stop-color="#123a7a"/>
  </radialGradient>
  <linearGradient id="deck" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="#ff6b9d"/>
    <stop offset="50%" stop-color="#ff9f43"/>
    <stop offset="100%" stop-color="#ff6b6b"/>
  </linearGradient>
</defs>

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

<!-- Stars -->
<g fill="#fff">
  <circle class="twinkle" cx="90" cy="80" r="3"/><circle class="twinkle2" cx="180" cy="160" r="2"/><circle class="twinkle" cx="320" cy="60" r="2.5"/>
  <circle cx="430" cy="130" r="2"/><circle class="twinkle2" cx="520" cy="70" r="3"/><circle cx="700" cy="90" r="2"/>
  <circle class="twinkle" cx="820" cy="55" r="2.5"/><circle cx="930" cy="110" r="2"/><circle class="twinkle2" cx="1100" cy="70" r="3"/>
  <circle cx="1180" cy="180" r="2"/><circle class="twinkle" cx="60" cy="260" r="2"/><circle cx="240" cy="300" r="2"/>
  <circle class="twinkle2" cx="1040" cy="280" r="2"/><circle cx="1160" cy="340" r="2.5"/><circle class="twinkle" cx="110" cy="420" r="2"/>
  <path class="twinkle2" d="M210 110 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4z" fill="#ffe27a"/>
  <path class="twinkle" d="M760 150 l3 8 8 3 -8 3 -3 8 -3 -8 -8 -3 8 -3z" fill="#a5f3fc"/>
  <path class="twinkle" d="M1150 430 l3 7 7 3 -7 3 -3 7 -3 -7 -7 -3 7 -3z" fill="#ffe27a"/>
</g>

<!-- Earth -->
<g>
  <circle class="glow" cx="1068" cy="152" r="92" fill="#3b82f6" opacity=".28"/>
  <circle cx="1068" cy="152" r="68" fill="url(#earthGrad)"/>
  <path d="M1015 118 q28 -30 55 -8 q18 14 6 30 q-22 10 -42 2 q-24 -8 -19 -24z" fill="#34d399"/>
  <path d="M1080 165 q30 6 22 30 q-8 20 -28 14 q-18 -14 -8 -30 q6 -14 14 -14z" fill="#22c55e"/>
  <path d="M1028 175 q14 -8 26 4 q-10 16 -24 10 q-10 -7 -2 -14z" fill="#a7f3d0"/>
  <ellipse cx="1042" cy="122" rx="34" ry="16" fill="#fff" opacity=".22" transform="rotate(-22 1042 122)"/>
</g>

<!-- Floating moon rocks -->
<g class="floatRock" fill="#b8b3a8"><path d="M250 360 l28 -18 22 18 -8 24 -30 4 -16 -14z"/><circle cx="278" cy="356" r="4" fill="#9a958a"/></g>
<g class="floatRock" style="animation-delay:-1.5s" fill="#c2beb3"><circle cx="990" cy="380" r="18"/><circle cx="1006" cy="392" r="11"/></g>
<g class="floatRock" style="animation-delay:-2.5s" fill="#aea99e"><path d="M120 480 l20 -10 16 12 -6 18 -22 -2 -8 -12z"/></g>

<!-- Moon -->
<path d="M0 618 Q 260 558 520 592 T 1280 578 L1280 800 L0 800 Z" fill="url(#moonGrad)"/>
<path d="M0 660 Q 360 620 700 652 T1280 640 L1280 800 L0 800 Z" fill="#000" opacity=".08"/>
<g fill="#9e9a90" opacity=".65">
  <ellipse cx="180" cy="690" rx="95" ry="28"/><ellipse cx="520" cy="725" rx="130" ry="34"/><ellipse cx="920" cy="700" rx="150" ry="38"/><ellipse cx="1160" cy="735" rx="90" ry="24"/>
</g>
<g fill="#7f7b73" opacity=".5">
  <ellipse cx="160" cy="685" rx="58" ry="16"/><ellipse cx="500" cy="718" rx="80" ry="19"/><ellipse cx="900" cy="693" rx="92" ry="21"/>
</g>
<!-- footprint prints -->
<g fill="#8a867d" opacity=".7">
  <ellipse cx="300" cy="640" rx="18" ry="9" transform="rotate(-18 300 640)"/><ellipse cx="350" cy="655" rx="18" ry="9" transform="rotate(-18 350 655)"/>
  <ellipse cx="860" cy="635" rx="18" ry="9" transform="rotate(-14 860 635)"/><ellipse cx="910" cy="650" rx="18" ry="9" transform="rotate(-14 910 650)"/>
</g>

<!-- shadow -->
<ellipse cx="640" cy="626" rx="265" ry="24" fill="#222" opacity=".28"/>

<!-- dust -->
<g fill="#fff" opacity=".75">
  <circle cx="380" cy="610" r="14"/><circle cx="340" cy="620" r="9"/><circle cx="420" cy="625" r="8"/><circle cx="300" cy="632" r="6"/>
</g>
<g stroke="#fff" stroke-width="5" stroke-linecap="round" opacity=".65">
  <line x1="300" y1="520" x2="210" y2="520"/><line x1="330" y1="550" x2="240" y2="550"/><line x1="315" y1="580" x2="250" y2="580"/>
</g>

<!-- CAT ASTRONAUT -->
<g class="bob">
  <!-- skateboard -->
  <g transform="rotate(-5 640 560)">
    <rect x="392" y="540" width="496" height="22" rx="11" fill="url(#deck)"/>
    <rect x="392" y="540" width="496" height="8" rx="4" fill="#ffe4a3"/>
    <rect x="500" y="562" width="280" height="10" rx="5" fill="#5b6472"/>
    <g>
      <circle class="wheel" cx="495" cy="588" r="27" fill="#ffcf3f" stroke="#e09f00" stroke-width="4"/>
      <circle cx="495" cy="588" r="8" fill="#fff"/><line x1="495" y1="565" x2="495" y2="611" stroke="#e09f00" stroke-width="4"/>
      <circle class="wheel" cx="785" cy="588" r="27" fill="#ffcf3f" stroke="#e09f00" stroke-width="4"/>
      <circle cx="785" cy="588" r="8" fill="#fff"/><line x1="785" y1="565" x2="785" y2="611" stroke="#e09f00" stroke-width="4"/>
    </g>
    <text x="640" y="557" text-anchor="middle" font-family="Arial Black, Arial" font-size="16" font-weight="900" fill="#fff" letter-spacing="3">MOON CAT</text>
  </g>

  <!-- backpack -->
  <rect x="500" y="330" width="72" height="145" rx="28" fill="#cbd5e1" stroke="#94a3b8" stroke-width="4"/>
  <rect x="515" y="350" width="42" height="60" rx="10" fill="#f1f5f9"/><circle cx="536" cy="380" r="10" fill="#38bdf8"/>
  <path d="M545 410 q30 8 48 28" stroke="#64748b" stroke-width="8" fill="none" stroke-linecap="round"/>

  <!-- tail -->
  <g class="wag">
    <path d="M550 430 Q 470 430 455 380 Q 448 345 480 338" fill="none" stroke="#f28c2e" stroke-width="28" stroke-linecap="round"/>
    <path d="M470 395 l-8 -18 M458 372 l-4 -16" stroke="#c2410c" stroke-width="6" stroke-linecap="round"/>
  </g>

  <!-- left arm (back) -->
  <path d="M575 390 Q 500 420 485 465" fill="none" stroke="url(#suit)" stroke-width="38" stroke-linecap="round"/>
  <circle cx="482" cy="470" r="26" fill="#fff" stroke="#cbd5e1" stroke-width="3"/>

  <!-- legs -->
  <path d="M590 470 Q 570 510 540 530" fill="none" stroke="url(#suit)" stroke-width="44" stroke-linecap="round"/>
  <path d="M690 470 Q 710 505 730 528" fill="none" stroke="url(#suit)" stroke-width="44" stroke-linecap="round"/>
  <!-- boots -->
  <ellipse cx="525" cy="538" rx="42" ry="20" fill="#fff" stroke="#94a3b8" stroke-width="3" transform="rotate(-8 525 538)"/>
  <ellipse cx="745" cy="535" rx="42" ry="20" fill="#fff" stroke="#94a3b8" stroke-width="3" transform="rotate(6 745 535)"/>
  <rect x="495" y="522" width="58" height="12" rx="6" fill="#38bdf8"/><rect x="715" y="518" width="58" height="12" rx="6" fill="#38bdf8"/>

  <!-- body suit -->
  <rect x="558" y="345" width="165" height="150" rx="58" fill="url(#suit)" stroke="#cbd5e1" stroke-width="4"/>
  <rect x="558" y="445" width="165" height="22" rx="11" fill="#f59e0b"/>
  <rect x="610" y="378" width="62" height="48" rx="12" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/>
  <circle cx="628" cy="395" r="8" fill="#ef4444"/><circle cx="652" cy="395" r="8" fill="#22c55e"/><rect x="622" y="410" width="38" height="6" rx="3" fill="#64748b"/>
  <!-- flag patch -->
  <g transform="translate(682 378)"><rect width="28" height="18" rx="3" fill="#ef4444"/><rect y="7" width="28" height="4" fill="#fff"/><rect width="12" height="9" fill="#1e3a8a"/><text x="6" y="8" font-size="7" fill="#fff" text-anchor="middle">★</text></g>
  <circle cx="640" cy="355" r="16" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/><circle cx="640" cy="355" r="7" fill="#38bdf8"/>

  <!-- right arm (front, balancing) -->
  <path d="M705 380 Q 790 400 810 450" fill="none" stroke="url(#suit)" stroke-width="38" stroke-linecap="round"/>
  <circle cx="815" cy="458" r="27" fill="#fff" stroke="#cbd5e1" stroke-width="3"/>
  <path d="M800 445 q12 -8 22 2 M805 465 q12 4 20 -4" stroke="#94a3b8" stroke-width="3" fill="none" stroke-linecap="round"/>

  <!-- HEAD -->
  <g>
    <!-- cat head -->
    <circle cx="640" cy="268" r="78" fill="url(#fur)"/>
    <!-- ears -->
    <path d="M582 215 L570 160 L622 190 Z" fill="#f28c2e"/><path d="M698 215 L710 160 L658 190 Z" fill="#f28c2e"/>
    <path d="M585 205 L578 175 L605 192 Z" fill="#fda4af"/><path d="M695 205 L702 175 L675 192 Z" fill="#fda4af"/>
    <!-- stripes -->
    <path d="M640 190 v18 M615 195 l6 16 M665 195 l-6 16" stroke="#c2410c" stroke-width="5" stroke-linecap="round"/>
    <!-- face -->
    <ellipse cx="608" cy="262" rx="14" ry="17" fill="#14532d"/><ellipse cx="672" cy="262" rx="14" ry="17" fill="#14532d"/>
    <circle cx="608" cy="262" r="7" fill="#000"/><circle cx="672" cy="262" r="7" fill="#000"/>
    <circle cx="603" cy="255" r="4" fill="#fff"/><circle cx="667" cy="255" r="4" fill="#fff"/>
    <!-- blush -->
    <ellipse cx="585" cy="292" rx="14" ry="8" fill="#fb923c" opacity=".55"/><ellipse cx="695" cy="292" rx="14" ry="8" fill="#fb923c" opacity=".55"/>
    <!-- nose & mouth -->
    <path d="M632 285 Q640 278 648 285 Q648 294 640 296 Q632 294 632 285Z" fill="#f472b6"/>
    <path d="M640 296 q0 10 -12 11 M640 296 q0 10 12 11" stroke="#7c2d12" stroke-width="3" fill="none" stroke-linecap="round"/>
    <!-- whiskers -->
    <g stroke="#fff" stroke-width="3" stroke-linecap="round" opacity=".9">
      <line x1="565" y1="280" x2="595" y2="286"/><line x1="565" y1="295" x2="595" y2="293"/><line x1="715" y1="280" x2="685" y2="286"/><line x1="715" y1="295" x2="685" y2="293"/>
    </g>
    <!-- helmet glass -->
    <circle cx="640" cy="268" r="102" fill="url(#glass)"/>
    <circle cx="640" cy="268" r="102" fill="none" stroke="#e8eef7" stroke-width="16"/>
    <circle cx="640" cy="268" r="115" fill="none" stroke="#94a3b8" stroke-width="4" opacity=".6"/>
    <!-- glass shine -->
    <ellipse cx="600" cy="210" rx="38" ry="20" fill="#fff" opacity=".55" transform="rotate(-30 600 210)"/>
    <!-- helmet lights -->
    <circle cx="540" cy="268" r="10" fill="#ffcf3f" stroke="#fff" stroke-width="3"/><circle cx="740" cy="268" r="10" fill="#ffcf3f" stroke="#fff" stroke-width="3"/>
  </g>
</g>

<!-- sparkles -->
<path d="M470 200 l4 12 12 4 -12 4 -4 12 -4 -12 -12 -4 12 -4z" fill="#ffe27a"/>
<path d="M830 300 l3 9 9 3 -9 3 -3 9 -3 -9 -9 -3 9 -3z" fill="#a5f3fc"/>

<!-- frame vignette -->
<rect width="1280" height="800" fill="none" stroke="#0ea5e9" stroke-width="0"/>
</svg>

Reasoning trace (1,368 tokens)

Designing a self-contained SVG illustration of an astronaut cat skateboarding on the moon at 1280x800 responsive to 375.Adding scene elements, layout coordinates, and CSS animation details to the SVG design.