Skateboarding astronaut catOne-line

GLM 5.3 Flash

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: 34.8 s
Cost: $0.0008
Output tokens: 2,554
Spent thinking: 15 tokens
Speed: 74.5 tok/s
Console errors: 0

First token after: 538 ms
First visible text after: 695 ms
Prompt tokens: 348
Code size: 6.1 KB
Finish reason: stop
Served by: Reka
Model id: z-ai/glm-5.3-flash
Reasoning sent: {"effort":"low"}
Max output: 64,000 tokens
Generated: Nov 10, 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 · 137 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
  <defs>
    <radialGradient id="sky" cx="50%" cy="35%" r="80%">
      <stop offset="0%" stop-color="#141a3a"/>
      <stop offset="100%" stop-color="#04060f"/>
    </radialGradient>
    <radialGradient id="moonSurf" cx="50%" cy="20%" r="90%">
      <stop offset="0%" stop-color="#d9dbe4"/>
      <stop offset="100%" stop-color="#9a9db0"/>
    </radialGradient>
    <linearGradient id="visor" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffd76a"/>
      <stop offset="55%" stop-color="#ff9d3c"/>
      <stop offset="100%" stop-color="#c95b1e"/>
    </linearGradient>
    <radialGradient id="earth" cx="35%" cy="35%" r="75%">
      <stop offset="0%" stop-color="#7ec8ff"/>
      <stop offset="60%" stop-color="#2f7fd4"/>
      <stop offset="100%" stop-color="#123a6b"/>
    </radialGradient>
  </defs>

  <rect width="800" height="500" fill="url(#sky)"/>

  <!-- stars -->
  <g fill="#fff">
    <circle cx="60" cy="60" r="1.6"/><circle cx="140" cy="110" r="1.1"/><circle cx="220" cy="40" r="1.4"/>
    <circle cx="310" cy="90" r="1.2"/><circle cx="400" cy="45" r="1.8"/><circle cx="480" cy="120" r="1.1"/>
    <circle cx="560" cy="60" r="1.5"/><circle cx="640" cy="100" r="1.2"/><circle cx="720" cy="50" r="1.7"/>
    <circle cx="760" cy="150" r="1.1"/><circle cx="90" cy="200" r="1.2"/><circle cx="700" cy="210" r="1.4"/>
    <circle cx="260" cy="160" r="1"/><circle cx="530" cy="170" r="1.3"/>
    <g>
      <path d="M120 150 l3 8 8 3 -8 3 -3 8 -3 -8 -8 -3 8 -3z" opacity="0.9"/>
      <path d="M660 140 l2.5 7 7 2.5 -7 2.5 -2.5 7 -2.5 -7 -7 -2.5 7 -2.5z" opacity="0.8"/>
    </g>
  </g>

  <!-- Earth -->
  <g>
    <circle cx="690" cy="110" r="42" fill="url(#earth)"/>
    <path d="M660 95 q14 -10 28 -4 q14 6 26 -2 q-6 16 -22 18 q-16 2 -32 -12z" fill="#3fae5a" opacity="0.85"/>
    <path d="M668 130 q18 8 40 2 q-10 14 -28 12 q-12 -2 -12 -14z" fill="#3fae5a" opacity="0.7"/>
    <ellipse cx="690" cy="110" rx="48" ry="10" fill="#fff" opacity="0.25"/>
  </g>

  <!-- moon ground -->
  <path d="M0 400 Q200 360 400 392 Q600 424 800 386 L800 500 L0 500 Z" fill="url(#moonSurf)"/>
  <g fill="#8a8da0" opacity="0.6">
    <ellipse cx="120" cy="445" rx="34" ry="9"/>
    <ellipse cx="300" cy="470" rx="45" ry="11"/>
    <ellipse cx="530" cy="450" rx="30" ry="8"/>
    <ellipse cx="690" cy="478" rx="50" ry="12"/>
  </g>
  <g fill="none" stroke="#7d8093" stroke-width="2" opacity="0.5">
    <ellipse cx="180" cy="425" rx="22" ry="6"/>
    <ellipse cx="620" cy="435" rx="26" ry="7"/>
  </g>

  <!-- astronaut cat on skateboard -->
  <g transform="translate(330,250)">
    <!-- motion lines -->
    <g stroke="#cfd3e6" stroke-width="3" stroke-linecap="round" opacity="0.6">
      <line x1="-120" y1="-20" x2="-70" y2="-20"/>
      <line x1="-140" y1="10" x2="-85" y2="10"/>
      <line x1="-110" y1="40" x2="-65" y2="40"/>
    </g>

    <!-- shadow -->
    <ellipse cx="60" cy="152" rx="80" ry="10" fill="#6a6d80" opacity="0.4"/>

    <!-- back leg -->
    <path d="M60 105 L85 135" stroke="#e8eaf2" stroke-width="14" stroke-linecap="round" fill="none"/>
    <!-- front leg -->
    <path d="M55 105 L25 138" stroke="#f4f5fa" stroke-width="14" stroke-linecap="round" fill="none"/>
    <!-- boots -->
    <rect x="8" y="130" width="32" height="14" rx="6" fill="#c9ccdb"/>
    <rect x="72" y="128" width="32" height="14" rx="6" fill="#b7bac9"/>

    <!-- tail -->
    <path d="M85 60 q35 -5 38 -35" stroke="#f4f5fa" stroke-width="12" stroke-linecap="round" fill="none"/>

    <!-- body suit -->
    <ellipse cx="55" cy="72" rx="48" ry="42" fill="#f4f5fa"/>
    <ellipse cx="55" cy="72" rx="48" ry="42" fill="none" stroke="#c9ccdb" stroke-width="3"/>
    <rect x="20" y="52" width="70" height="8" rx="4" fill="#e05a4c" opacity="0.9"/>
    <circle cx="88" cy="80" r="7" fill="#9aa0b8"/>
    <rect x="84" y="76" width="8" height="8" rx="2" fill="#5f6480"/>

    <!-- helmet -->
    <circle cx="18" cy="18" r="46" fill="#cfe6f5" opacity="0.35" stroke="#dfe9f2" stroke-width="5"/>
    <!-- ears poking -->
    <path d="M-8 -22 l6 -22 16 14z" fill="#8a8da0"/>
    <path d="M28 -24 l8 -20 14 16z" fill="#8a8da0"/>
    <!-- cat head -->
    <circle cx="18" cy="22" r="34" fill="#b3b6c6"/>
    <!-- stripes -->
    <path d="M-4 -6 q10 6 22 0 M10 -12 q8 6 18 0" stroke="#8a8da0" stroke-width="4" fill="none" stroke-linecap="round"/>
    <!-- face behind visor -->
    <g>
      <path d="M-2 20 q8 -10 20 0" stroke="#2c2f3e" stroke-width="4" fill="none" stroke-linecap="round"/>
      <path d="M16 20 q8 -10 20 0" stroke="#2c2f3e" stroke-width="4" fill="none" stroke-linecap="round"/>
      <path d="M8 34 q10 8 20 0" stroke="#2c2f3e" stroke-width="4" fill="none" stroke-linecap="round"/>
      <path d="M2 30 l-8 -3 M34 30 l8 -3" stroke="#2c2f3e" stroke-width="2.5"/>
      <path d="M18 27 l-3 4 h6z" fill="#e0898f"/>
    </g>
    <!-- visor reflection -->
    <path d="M-16 -8 q-10 20 2 38" stroke="#fff" stroke-width="5" fill="none" opacity="0.55" stroke-linecap="round"/>

    <!-- arm doing peace sign -->
    <path d="M90 60 L120 30" stroke="#f4f5fa" stroke-width="13" stroke-linecap="round" fill="none"/>
    <g stroke="#c9ccdb" stroke-width="6" stroke-linecap="round">
      <line x1="120" y1="30" x2="128" y2="12"/>
      <line x1="120" y1="30" x2="138" y2="24"/>
    </g>
    <!-- other arm out -->
    <path d="M20 78 L-12 96" stroke="#e8eaf2" stroke-width="13" stroke-linecap="round" fill="none"/>
    <circle cx="-16" cy="98" r="9" fill="#c9ccdb"/>

    <!-- skateboard -->
    <g transform="translate(0,148)">
      <path d="M-30 0 Q40 -12 110 0 Q118 2 118 8 L112 10 Q40 0 -24 10 L-30 8 Q-34 4 -30 0z" fill="#e05a4c"/>
      <rect x="-10" y="8" width="14" height="10" fill="#5f6480"/>
      <rect x="66" y="8" width="14" height="10" fill="#5f6480"/>
      <circle cx="4" cy="24" r="10" fill="#ffd76a"/>
      <circle cx="4" cy="24" r="4" fill="#8a6a1e"/>
      <circle cx="82" cy="24" r="10" fill="#ffd76a"/>
      <circle cx="82" cy="24" r="4" fill="#8a6a1e"/>
    </g>
  </g>

  <!-- dust puffs -->
  <g fill="#e6e8f0" opacity="0.7">
    <circle cx="290" cy="415" r="7"/>
    <circle cx="272" cy="424" r="5"/>
    <circle cx="255" cy="418" r="4"/>
  </g>
</svg>

Reasoning trace (15 tokens)

SVG requested — output ```svg block. Make it animated and self-contained.