Skateboarding astronaut catOne-line

GLM 5.3

by Z.aiReasoningClean

Open in new window

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

How it went

Total time: 36.0 s
Cost: $0.0081
Output tokens: 4,115
Spent thinking: 4 tokens
Speed: 119.4 tok/s
Console errors: 0

First token after: 1.6 s
First visible text after: 2.4 s
Prompt tokens: 348
Code size: 9.3 KB
Finish reason: stop
Served by: Decart
Model id: z-ai/glm-5.3
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 · 184 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="1280" height="800">
  <defs>
    <radialGradient id="space" cx="50%" cy="30%" r="90%">
      <stop offset="0%" stop-color="#1a1040"/>
      <stop offset="60%" stop-color="#0b0826"/>
      <stop offset="100%" stop-color="#050310"/>
    </radialGradient>
    <radialGradient id="moonSurf" cx="50%" cy="0%" r="120%">
      <stop offset="0%" stop-color="#e8e4d8"/>
      <stop offset="100%" stop-color="#b8b2a0"/>
    </radialGradient>
    <radialGradient id="glow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff" stop-opacity="0.9"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
    </radialGradient>
    <clipPath id="moonClip"><rect x="0" y="620" width="1280" height="180"/></clipPath>
  </defs>

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

  <!-- Stars -->
  <g fill="#fff">
    <circle cx="80" cy="90" r="2"/><circle cx="200" cy="60" r="1.5"/><circle cx="330" cy="140" r="2"/>
    <circle cx="460" cy="50" r="1.4"/><circle cx="600" cy="110" r="1.8"/><circle cx="720" cy="40" r="1.5"/>
    <circle cx="880" cy="130" r="2"/><circle cx="1010" cy="70" r="1.6"/><circle cx="1130" cy="150" r="2"/>
    <circle cx="1230" cy="60" r="1.5"/><circle cx="150" cy="220" r="1.5"/><circle cx="420" cy="250" r="1.4"/>
    <circle cx="950" cy="260" r="1.6"/><circle cx="1180" cy="280" r="1.4"/><circle cx="60" cy="380" r="1.6"/>
    <circle cx="300" cy="350" r="1.3"/><circle cx="550" cy="300" r="1.5"/><circle cx="760" cy="330" r="1.3"/>
    <circle cx="1090" cy="380" r="1.5"/><circle cx="250" cy="480" r="1.3"/><circle cx="840" cy="470" r="1.4"/>
    <circle cx="1240" cy="460" r="1.5"/>
    <!-- a few sparkle stars -->
    <path d="M500 170 l3 8 8 3 -8 3 -3 8 -3 -8 -8 -3 8 -3 z" fill="#cfe6ff"/>
    <path d="M1050 200 l2.5 7 7 2.5 -7 2.5 -2.5 7 -2.5 -7 -7 -2.5 7 -2.5 z" fill="#cfe6ff"/>
    <path d="M120 300 l2.5 7 7 2.5 -7 2.5 -2.5 7 -2.5 -7 -7 -2.5 7 -2.5 z" fill="#cfe6ff"/>
  </g>

  <!-- Earth in the sky -->
  <g transform="translate(1030,130)">
    <circle r="55" fill="#1d5fa8"/>
    <path d="M-55 0 a55 55 0 0 1 30 -48 q-8 20 2 34 q-18 8 -14 28 q-22 4 -18 -14z" fill="#3aa05a" opacity="0.9"/>
    <path d="M20 -35 q22 10 24 32 q-14 -6 -24 2 q-6 -20 0 -34z" fill="#3aa05a" opacity="0.85"/>
    <path d="M-30 25 q16 -6 30 4 q-6 14 -18 20 q-16 -6 -12 -24z" fill="#2c8a4b" opacity="0.8"/>
    <ellipse cx="-12" cy="-15" rx="42" ry="12" fill="#fff" opacity="0.35" transform="rotate(-15)"/>
    <circle r="62" fill="none" stroke="#8ecbff" stroke-width="2.5" opacity="0.5"/>
  </g>

  <!-- Distant moon horizon hills -->
  <path d="M0 620 q160 -70 340 -30 q200 45 420 -25 q220 -70 520 10 v225 H0 z" fill="#cfc9b8"/>
  <path d="M0 660 q220 -50 460 -18 q260 35 500 -20 q180 -32 320 8 v170 H0 z" fill="#bdb6a2"/>

  <!-- Moon surface -->
  <rect x="0" y="620" width="1280" height="180" fill="url(#moonSurf)"/>
  <g clip-path="url(#moonClip)" fill="#a8a08c" opacity="0.6">
    <ellipse cx="200" cy="690" rx="90" ry="14"/>
    <ellipse cx="600" cy="740" rx="120" ry="18"/>
    <ellipse cx="1000" cy="680" rx="80" ry="12"/>
    <ellipse cx="420" cy="660" rx="40" ry="8"/>
    <ellipse cx="820" cy="755" rx="60" ry="10"/>
  </g>
  <!-- small craters -->
  <g fill="#9d9682" opacity="0.7">
    <ellipse cx="150" cy="700" rx="34" ry="9"/><ellipse cx="150" cy="698" rx="34" ry="7" fill="#c4bda9"/>
    <ellipse cx="480" cy="745" rx="26" ry="7"/><ellipse cx="480" cy="743" rx="26" ry="5" fill="#c4bda9"/>
    <ellipse cx="1100" cy="720" rx="40" ry="10"/><ellipse cx="1100" cy="717" rx="40" ry="8" fill="#c4bda9"/>
  </g>

  <!-- Cat + skateboard group (mid-air on moon surface) -->
  <g transform="translate(560,470) rotate(-8)">

    <!-- Skateboard -->
    <g>
      <!-- motion trail -->
      <g stroke="#ffd24a" stroke-width="4" stroke-linecap="round" opacity="0.55" fill="none">
        <path d="M-190 -18 q-30 6 -60 4"/>
        <path d="M-200 -30 q-36 8 -70 4" opacity="0.6"/>
        <path d="M-185 -44 q-28 10 -54 8" opacity="0.35"/>
      </g>
      <!-- board -->
      <path d="M-95 22 q-14 -2 -22 -10 q-10 -10 -10 -22 l0 -2 q40 10 127 10 q87 0 127 -10 l0 2 q0 12 -10 22 q-8 8 -22 10 z"
            fill="#ff8c3a" transform="translate(10,0)"/>
      <path d="M-117 10 q47 9 117 9 q70 0 117 -9" fill="none" stroke="#c96a24" stroke-width="3"/>
      <!-- wheels -->
      <g fill="#3a3a48">
        <circle cx="-72" cy="38" r="12"/>
        <circle cx="80" cy="38" r="12"/>
      </g>
      <g fill="#e8e8ee">
        <circle cx="-72" cy="38" r="5"/>
        <circle cx="80" cy="38" r="5"/>
      </g>
      <g fill="#55556a">
        <circle cx="-72" cy="38" r="2"/>
        <circle cx="80" cy="38" r="2"/>
      </g>
    </g>

    <!-- Astronaut cat -->
    <!-- back leg -->
    <path d="M-8 -6 q-22 4 -34 20 q-6 10 -4 24 l14 4 q4 -14 14 -20 q10 -6 18 -4z" fill="#d9dbe6"/>
    <!-- front leg -->
    <path d="M26 -8 q24 2 38 16 q10 10 12 26 l-15 5 q-4 -14 -14 -21 q-10 -7 -22 -7z" fill="#eceef6"/>
    <!-- boots -->
    <path d="M-52 40 q-8 4 -8 12 q0 8 10 8 l14 0 q6 -2 4 -10 l-2 -10z" fill="#f4f5fa"/>
    <path d="M66 44 q9 3 9 11 q0 8 -9 8 l-14 0 q-6 -2 -4 -10 l3 -9z" fill="#eceef6"/>
    <!-- tail -->
    <path d="M-28 -60 q-34 -18 -48 4 q-12 20 10 32 q-16 -22 6 -30 q16 -6 32 6z" fill="#eceef6" stroke="#c7ccdd" stroke-width="2"/>
    <!-- torso / suit body -->
    <path d="M-24 -66 q0 -14 24 -14 q24 0 24 14 l4 62 q-28 8 -56 0z" fill="#f4f5fa"/>
    <path d="M-24 -66 q0 -8 24 -8 q24 0 24 8 l2 30 q-26 6 -52 0z" fill="#eceef6"/>
    <!-- chest control panel -->
    <rect x="-12" y="-40" width="24" height="16" rx="4" fill="#8f96ad"/>
    <circle cx="-5" cy="-32" r="2.4" fill="#7dff8e"/>
    <circle cx="2" cy="-32" r="2.4" fill="#ffdd55"/>
    <circle cx="9" cy="-32" r="2.4" fill="#ff6680"/>
    <rect x="-8" y="-29" width="16" height="3" rx="1.5" fill="#5a6078"/>
    <!-- front paw arm (raised, waving) -->
    <path d="M20 -62 q26 -14 44 -6 q4 2 3 7 l-3 8 q-2 4 -7 3 q-14 -4 -30 4z" fill="#f4f5fa"/>
    <path d="M62 -70 q10 0 12 8 q1 6 -6 9 l-8 2 q-6 1 -8 -5 l-1 -7 q0 -6 6 -7z" fill="#f4f5fa" stroke="#c7ccdd" stroke-width="1.5"/>
    <path d="M58 -64 q8 -4 14 -2" stroke="#c7ccdd" stroke-width="1.5" fill="none"/>
    <!-- backpack -->
    <rect x="-42" y="-72" width="18" height="40" rx="6" fill="#aab1c7"/>
    <rect x="-38" y="-66" width="10" height="10" rx="2" fill="#7a4a20"/>
    <rect x="-38" y="-52" width="10" height="14" rx="2" fill="#6b7288"/>
    <!-- helmet -->
    <circle cx="0" cy="-96" r="34" fill="#e8ebf4"/>
    <circle cx="0" cy="-96" r="28" fill="#1c2b4a"/>
    <!-- visor shine -->
    <path d="M-22 -108 a26 26 0 0 1 26 -14 q-14 2 -18 16 q-4 12 4 22 a26 26 0 0 1 -12 -24z" fill="#4a6fa8" opacity="0.7"/>
    <ellipse cx="-12" cy="-104" rx="8" ry="4" fill="#fff" opacity="0.55" transform="rotate(-20 -12 -104)"/>
    <!-- cat face inside helmet -->
    <!-- fur head -->
    <path d="M-20 -96 q-2 -16 20 -16 q22 0 20 16 q2 14 -20 14 q-22 0 -20 -14z" fill="#f2b56b"/>
    <!-- ears -->
    <path d="M-16 -108 l-4 -13 11 5z" fill="#f2b56b"/>
    <path d="M16 -108 l4 -13 -11 5z" fill="#f2b56b"/>
    <path d="M-15 -110 l-2 -7 6 3z" fill="#e08a9b"/>
    <path d="M15 -110 l2 -7 -6 3z" fill="#e08a9b"/>
    <!-- cat stripes -->
    <path d="M-4 -112 q4 2 8 0 l-1 4 q-3 2 -6 0z" fill="#d99a4e"/>
    <path d="M2 -111 q5 2 9 0 l-1 4 q-4 2 -7 0z" fill="#d99a4e"/>
    <!-- eyes (happy) -->
    <path d="M-13 -98 q4 -6 8 0" stroke="#2a2a35" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M5 -98 q4 -6 8 0" stroke="#2a2a35" stroke-width="3" fill="none" stroke-linecap="round"/>
    <!-- muzzle -->
    <path d="M0 -92 l-3 3 3 3 3 -3z" fill="#e08a6b"/>
    <path d="M-8 -86 q8 6 16 0" stroke="#2a2a35" stroke-width="2.4" fill="none" stroke-linecap="round"/>
    <!-- whiskers -->
    <g stroke="#fff" stroke-width="1.6" stroke-linecap="round" fill="none" opacity="0.9">
      <path d="M-14 -90 q-8 1 -13 4"/>
      <path d="M-14 -87 q-8 3 -12 7"/>
      <path d="M14 -90 q8 1 13 4"/>
      <path d="M14 -87 q8 3 12 7"/>
    </g>
    <!-- helmet rim + antenna -->
    <path d="M-34 -96 q0 -10 8 -16" stroke="#c7ccdd" stroke-width="3" fill="none"/>
    <circle cx="0" cy="-96" r="34" fill="none" stroke="#cdd2e2" stroke-width="4"/>
    <line x1="26" y1="-122" x2="36" y2="-140" stroke="#cdd2e2" stroke-width="3"/>
    <circle cx="38" cy="-143" r="5" fill="#ff6680"/>
    <circle cx="38" cy="-143" r="9" fill="url(#glow)" opacity="0.5"/>
    <!-- flag on the moon -->
  </g>

  <!-- Moon flag planted -->
  <g transform="translate(920,560)">
    <line x1="0" y1="0" x2="0" y2="-150" stroke="#c9c4b4" stroke-width="6"/>
    <path d="M4 -150 h78 q6 0 4 6 l-12 22 q-2 4 -6 0 l-14 -14 z" fill="#ff8c3a"/>
    <path d="M10 -144 h56 l-8 18 -10 -10 q-6 6 -12 2 -10 -4 -26 -10z" fill="#7a4a20"/>
    <text x="22" y="-128" font-family="monospace" font-size="13" fill="#fff" font-weight="bold">MEOW</text>
    <ellipse cx="0" cy="4" rx="26" ry="7" fill="#a8a08c"/>
  </g>

  <!-- Floating dust kicked up behind board -->
  <g fill="#d8d2c0" opacity="0.8">
    <circle cx="380" cy="520" r="4"/>
    <circle cx="355" cy="495" r="3"/>
    <circle cx="330" cy="530" r="2.5"/>
    <circle cx="300" cy="505" r="2"/>
    <circle cx="340" cy="545" r="3.5"/>
  </g>

  <!-- Title -->
  <text x="640" y="730" text-anchor="middle" font-family="'Trebuchet MS', sans-serif" font-size="30" fill="#fff" opacity="0.9" letter-spacing="6">LUNAR SHRED · ONE SMALL OLLIE FOR CAT-KIND</text>
</svg>

Reasoning trace (4 tokens)

Pure SVG task.