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: 1 min 14 s
Cost: $0.0020
Output tokens: 6,672
Spent thinking: 2,002 tokens
Speed: 90.5 tok/s
Console errors: 0

First token after: 431 ms
First visible text after: 27.8 s
Prompt tokens: 348
Code size: 11.0 KB
Finish reason: stop
Served by: Reka
Model id: z-ai/glm-5.3-flash
Reasoning sent: {"effort":"high"}
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 · 213 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" width="900" height="600" role="img" aria-label="Astronaut cat skateboarding on the moon">
  <defs>
    <radialGradient id="space" cx="30%" cy="20%" r="90%">
      <stop offset="0%" stop-color="#1c1c46"/>
      <stop offset="55%" stop-color="#121232"/>
      <stop offset="100%" stop-color="#070720"/>
    </radialGradient>
    <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#d3d3e2"/>
      <stop offset="100%" stop-color="#8e8ea6"/>
    </linearGradient>
    <radialGradient id="glass" cx="35%" cy="30%" r="80%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.55"/>
      <stop offset="45%" stop-color="#cfe6ff" stop-opacity="0.28"/>
      <stop offset="100%" stop-color="#9fc3ee" stop-opacity="0.45"/>
    </radialGradient>
    <radialGradient id="earth" cx="35%" cy="35%" r="80%">
      <stop offset="0%" stop-color="#7cc4ff"/>
      <stop offset="70%" stop-color="#2f7fd4"/>
      <stop offset="100%" stop-color="#1c5aa8"/>
    </radialGradient>
  </defs>

  <style>
    .tw { animation: twinkle 3s ease-in-out infinite; }
    .tw2 { animation: twinkle 4s ease-in-out 1.2s infinite; }
    @keyframes twinkle { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
    #cat { animation: bob 2.6s ease-in-out infinite; transform-origin: 470px 400px; }
    @keyframes bob {
      0%,100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-7px) rotate(-1.2deg); }
    }
    #dust { animation: puff 2.6s ease-in-out infinite; }
    @keyframes puff { 0%,100% { opacity: 0.35; } 50% { opacity: 0.7; } }
  </style>

  <!-- Space -->
  <rect width="900" height="600" fill="url(#space)"/>

  <!-- Stars -->
  <g fill="#ffffff">
    <circle cx="60" cy="60" r="2"/>
    <circle cx="140" cy="200" r="1.5"/>
    <circle cx="220" cy="90" r="2.2" class="tw"/>
    <circle cx="310" cy="150" r="1.4"/>
    <circle cx="390" cy="70" r="1.8"/>
    <circle cx="470" cy="120" r="1.3" class="tw2"/>
    <circle cx="560" cy="60" r="2"/>
    <circle cx="640" cy="140" r="1.5" class="tw"/>
    <circle cx="720" cy="80" r="2.2"/>
    <circle cx="810" cy="160" r="1.4" class="tw2"/>
    <circle cx="850" cy="60" r="1.8"/>
    <circle cx="90" cy="300" r="1.5" class="tw"/>
    <circle cx="260" cy="280" r="1.3"/>
    <circle cx="700" cy="250" r="1.6" class="tw"/>
    <circle cx="860" cy="300" r="1.4"/>
    <circle cx="180" cy="380" r="1.3" class="tw2"/>
    <circle cx="620" cy="330" r="1.4"/>
    <circle cx="770" cy="380" r="1.5" class="tw"/>
    <path d="M330,220 L331.8,228.2 L340,230 L331.8,231.8 L330,240 L328.2,231.8 L320,230 L328.2,228.2 Z" class="tw"/>
    <path d="M790,110 L791.8,118.2 L800,120 L791.8,121.8 L790,130 L788.2,121.8 L780,120 L788.2,118.2 Z" class="tw2"/>
    <path d="M120,150 L121.5,156.5 L128,158 L121.5,159.5 L120,166 L118.5,159.5 L112,158 L118.5,156.5 Z" class="tw"/>
    <path d="M560,240 L561.5,246.5 L568,248 L561.5,249.5 L560,256 L558.5,249.5 L552,248 L558.5,246.5 Z" class="tw2"/>
  </g>

  <!-- Earth -->
  <circle cx="150" cy="110" r="58" fill="#4a9df0" opacity="0.12"/>
  <circle cx="150" cy="110" r="46" fill="url(#earth)"/>
  <path d="M120,95 q14,-10 28,-2 q12,7 24,0 q10,-6 18,2 q-8,10 -22,8 q-14,-2 -26,2 q-14,4 -22,-10 Z" fill="#4caf6d" opacity="0.85"/>
  <path d="M132,132 q16,6 32,0 q10,-4 20,2 q-10,10 -26,8 q-16,-2 -26,-10 Z" fill="#4caf6d" opacity="0.7"/>
  <path d="M118,86 q10,-14 26,-16" stroke="#ffffff" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.35"/>

  <!-- Distant hill -->
  <path d="M0,478 Q220,428 460,468 Q700,500 900,462 L900,600 L0,600 Z" fill="#b6b6cc"/>

  <!-- Moon ground -->
  <path d="M0,492 C150,466 320,498 500,482 C680,466 800,492 900,478 L900,600 L0,600 Z" fill="url(#ground)"/>
  <!-- Craters -->
  <g>
    <ellipse cx="140" cy="548" rx="42" ry="13" fill="#a2a2ba"/>
    <ellipse cx="140" cy="546" rx="34" ry="9" fill="#8d8da6"/>
    <ellipse cx="655" cy="556" rx="55" ry="16" fill="#a2a2ba"/>
    <ellipse cx="655" cy="554" rx="45" ry="11" fill="#8d8da6"/>
    <ellipse cx="820" cy="522" rx="30" ry="9" fill="#a2a2ba"/>
    <ellipse cx="820" cy="520" rx="23" ry="6" fill="#8d8da6"/>
    <ellipse cx="310" cy="580" rx="36" ry="11" fill="#a2a2ba"/>
    <ellipse cx="310" cy="578" rx="28" ry="8" fill="#8d8da6"/>
    <ellipse cx="500" cy="528" rx="16" ry="5" fill="#a2a2ba"/>
  </g>
  <!-- Small pebbles -->
  <circle cx="240" cy="520" r="4" fill="#9a9ab2"/>
  <circle cx="590" cy="510" r="3" fill="#9a9ab2"/>
  <circle cx="760" cy="545" r="5" fill="#9a9ab2"/>

  <!-- Flag -->
  <g>
    <line x1="726" y1="432" x2="726" y2="368" stroke="#d8dce8" stroke-width="4" stroke-linecap="round"/>
    <path d="M728,368 L778,374 L728,392 Z" fill="#ff5a5f"/>
    <circle cx="746" cy="379" r="4.5" fill="#ffffff"/>
    <circle cx="741" cy="373" r="1.8" fill="#ffffff"/>
    <circle cx="747" cy="372" r="1.8" fill="#ffffff"/>
    <circle cx="752" cy="374" r="1.8" fill="#ffffff"/>
  </g>

  <!-- Shadow -->
  <ellipse cx="472" cy="474" rx="115" ry="11" fill="#1a1a30" opacity="0.3"/>

  <!-- Dust puffs -->
  <g id="dust" fill="#cfcfe0">
    <circle cx="350" cy="462" r="7" opacity="0.8"/>
    <circle cx="330" cy="452" r="5" opacity="0.6"/>
    <circle cx="312" cy="444" r="4" opacity="0.45"/>
    <circle cx="296" cy="438" r="3" opacity="0.3"/>
    <circle cx="358" cy="470" r="5" opacity="0.6"/>
    <circle cx="340" cy="472" r="4" opacity="0.4"/>
  </g>

  <!-- Speed lines -->
  <g stroke="#ffffff" stroke-linecap="round" opacity="0.5">
    <line x1="300" y1="380" x2="360" y2="380" stroke-width="3"/>
    <line x1="282" y1="408" x2="336" y2="408" stroke-width="3"/>
    <line x1="296" y1="432" x2="344" y2="432" stroke-width="2.5"/>
  </g>

  <!-- Astronaut cat on skateboard -->
  <g id="cat">
    <!-- Tail -->
    <path d="M446,392 Q396,384 392,340 Q390,318 408,312" fill="none" stroke="#e8a04c" stroke-width="11" stroke-linecap="round"/>
    <circle cx="408" cy="312" r="6" fill="#f6b26b"/>

    <!-- Backpack -->
    <rect x="424" y="330" width="28" height="62" rx="10" fill="#c9cede" stroke="#9aa0b6" stroke-width="3"/>

    <!-- Legs -->
    <path d="M460,398 L444,420 L430,436" fill="none" stroke="#c7ccd9" stroke-width="19" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M460,398 L444,420 L430,436" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M484,398 L502,418 L516,434" fill="none" stroke="#c7ccd9" stroke-width="19" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M484,398 L502,418 L516,434" fill="none" stroke="#ffffff" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
    <!-- Boots -->
    <rect x="414" y="426" width="32" height="16" rx="7" fill="#e2e8f0" stroke="#9aa0b6" stroke-width="2.5"/>
    <rect x="506" y="424" width="32" height="16" rx="7" fill="#e2e8f0" stroke="#9aa0b6" stroke-width="2.5"/>

    <!-- Torso -->
    <ellipse cx="472" cy="366" rx="35" ry="46" fill="#ffffff" stroke="#b9c0d4" stroke-width="3"/>
    <!-- Chest panel -->
    <rect x="456" y="352" width="32" height="24" rx="5" fill="#dfe4f0" stroke="#9aa0b6" stroke-width="2.5"/>
    <circle cx="465" cy="360" r="3" fill="#ff5a5f"/>
    <circle cx="475" cy="360" r="3" fill="#ffd166"/>
    <circle cx="485" cy="360" r="3" fill="#4caf6d"/>
    <line x1="461" y1="370" x2="483" y2="370" stroke="#9aa0b6" stroke-width="2.5" stroke-linecap="round"/>

    <!-- Arms out for balance -->
    <path d="M448,338 Q410,322 386,300" fill="none" stroke="#c7ccd9" stroke-width="17" stroke-linecap="round"/>
    <path d="M448,338 Q410,322 386,300" fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round"/>
    <path d="M496,338 Q536,326 562,306" fill="none" stroke="#c7ccd9" stroke-width="17" stroke-linecap="round"/>
    <path d="M496,338 Q536,326 562,306" fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round"/>
    <circle cx="382" cy="296" r="10" fill="#ff8c42" stroke="#c25e1e" stroke-width="2.5"/>
    <circle cx="566" cy="302" r="10" fill="#ff8c42" stroke="#c25e1e" stroke-width="2.5"/>

    <!-- Head -->
    <circle cx="472" cy="274" r="42" fill="#f6b26b" stroke="#d98f3f" stroke-width="3"/>
    <!-- Ears -->
    <path d="M438,256 L442,214 L466,242 Z" fill="#f6b26b" stroke="#d98f3f" stroke-width="3" stroke-linejoin="round"/>
    <path d="M506,256 L502,214 L478,242 Z" fill="#f6b26b" stroke="#d98f3f" stroke-width="3" stroke-linejoin="round"/>
    <path d="M444,248 L446,226 L458,242 Z" fill="#f4a3b5"/>
    <path d="M500,248 L498,226 L486,242 Z" fill="#f4a3b5"/>
    <!-- Stripes -->
    <path d="M462,238 q4,7 1,13" stroke="#d98f3f" stroke-width="3.5" stroke-linecap="round" fill="none"/>
    <path d="M472,234 q4,8 0,15" stroke="#d98f3f" stroke-width="3.5" stroke-linecap="round" fill="none"/>
    <path d="M482,238 q4,7 1,13" stroke="#d98f3f" stroke-width="3.5" stroke-linecap="round" fill="none"/>
    <!-- Muzzle -->
    <ellipse cx="472" cy="290" rx="17" ry="12" fill="#fbd8a8"/>
    <!-- Eyes -->
    <ellipse cx="456" cy="272" rx="5.5" ry="7.5" fill="#2b2b35"/>
    <ellipse cx="488" cy="272" rx="5.5" ry="7.5" fill="#2b2b35"/>
    <circle cx="458" cy="269" r="2" fill="#ffffff"/>
    <circle cx="490" cy="269" r="2" fill="#ffffff"/>
    <!-- Nose + mouth -->
    <path d="M468,284 L476,284 L472,290 Z" fill="#f4a3b5"/>
    <path d="M472,290 q-5,6 -10,2 M472,290 q5,6 10,2" stroke="#b06a2a" stroke-width="2.2" stroke-linecap="round" fill="none"/>
    <!-- Whiskers -->
    <g stroke="#8a5a20" stroke-width="1.6" stroke-linecap="round" opacity="0.8">
      <line x1="452" y1="288" x2="428" y2="284"/>
      <line x1="452" y1="292" x2="430" y2="294"/>
      <line x1="492" y1="288" x2="516" y2="284"/>
      <line x1="492" y1="292" x2="514" y2="294"/>
    </g>

    <!-- Helmet dome -->
    <circle cx="472" cy="272" r="62" fill="url(#glass)" stroke="#e8ecf5" stroke-width="5"/>
    <path d="M432,240 a56,56 0 0 1 40,-24" stroke="#ffffff" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.55"/>
    <circle cx="472" cy="272" r="62" fill="none" stroke="#aab6cc" stroke-width="1.5" opacity="0.6"/>
  </g>

  <!-- Skateboard -->
  <g transform="rotate(-4 470 450)">
    <!-- Trucks -->
    <rect x="408" y="446" width="12" height="12" fill="#9aa0b6"/>
    <rect x="522" y="446" width="12" height="12" fill="#9aa0b6"/>
    <!-- Wheels -->
    <circle cx="404" cy="462" r="11" fill="#ffd166" stroke="#7a5b16" stroke-width="3"/>
    <circle cx="404" cy="462" r="3.5" fill="#7a5b16"/>
    <circle cx="538" cy="462" r="11" fill="#ffd166" stroke="#7a5b16" stroke-width="3"/>
    <circle cx="538" cy="462" r="3.5" fill="#7a5b16"/>
    <!-- Deck -->
    <path d="M352,436 q-14,2 -16,12 q18,4 34,2 L570,436 q16,-2 14,-12 q-16,-4 -32,-2 Z" fill="#ff5a5f" stroke="#c23a3f" stroke-width="3" stroke-linejoin="round"/>
    <rect x="360" y="430" width="222" height="10" rx="5" fill="#e0484e"/>
    <line x1="378" y1="434" x2="402" y2="434" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
  </g>

  <!-- Caption -->
  <text x="450" y="588" text-anchor="middle" font-family="'Segoe UI', Arial, sans-serif" font-size="17" fill="#e8ecf5" opacity="0.85" letter-spacing="1">ONE SMALL OLLIE FOR CAT-KIND</text>
</svg>

Reasoning trace (2,002 tokens)

The user wants an SVG of an astronaut cat skateboarding on the moon. Rules say reply with exactly one fenced code block. Task says "draw me an SVG" — I can output ```svg per rules, or an HTML file. Rules allow ```svg when task asks for an SVG. I'll produce a standalone SVG.

Let me design: starry space background, Earth in sky, moon surface (gray, craters), a cat in a white spacesuit with helmet (transparent dome showing cat face), riding a skateboard, doing a trick maybe (ollie with tail), motion lines, stars, maybe a flag. Make it charming.

Compose SVG ~900x600 viewBox.

Elements:
- Dark space background gradient (#0a0a2a to #1a1a4a).
- Stars (circles various sizes).
- Earth: blue circle with green blobs, subtle glow.
- Moon ground: bottom curved horizon, gray #b0b0c0, craters ellipses.
- Astronaut cat: floating/riding skateboard. Skateboard: deck rounded rect, two wheels, tilted mid-ollie maybe. Keep grounded on moon for readability, slight tilt.
- Cat body in white suit: helmet circle with glass dome (light blue transparent), cat face inside: ears, eyes, nose, whiskers, smile. Suit body white, backpack, arms, legs bent, boots on board.
- Tail sticking out of suit.
- Some dust particles kicked up.

Let me write coordinates. viewBox 0 0 900 600.

Ground: path from (0,470) curving to (900,500), fill gradient gray. Horizon at y~470.

Skateboard at around x 380-560, y ~440 (board on ground near y 445). Deck: rounded rect 180x14, tilt rotate(-6). Wheels r=10 at y 460.

Cat standing on board: boots at y~440. Body center ~ y 330. Helmet circle center (470,270) r 70. Face inside.

Pose: crouched, knees bent, arms out for balance.

Let me draft:

Space background: rect fill url(#space). Radial gradient.

Stars: multiple small circles, some with 4-point sparkle shapes.

Earth at (150,110) r 45: blue circle #3b82f6 with lighter swirl paths, glow via circle r 55 opacity 0.15.

Moon ground: path M0,480 C 200,450 400,490 600,470 C 750,455 850,480 900,470 L900,600 L0,600 Z, fill gradient #cfcfd8 → #8f8fa0. Craters: ellipses darker with inner shadow ellipse.

Skateboard group rotate(-4) around (470,455):
- Deck: rect x 360 y 436 width 220 height 14 rx 7 fill #ff5a5f (red deck) with darker edge.
- Kicked ends: small paths.
- Wheels: circles at (400,462) and (540,462) r 11 fill #ffd166 stroke #333; hub circles r 4.
- Trucks: small rects connecting.

Dust: small circles behind wheels, gray translucent.

Cat astronaut group centered ~ (470, 350):

Legs: white with gray stroke. Back leg from hip (460,395) to knee (445,420) to boot (430,438); front leg hip (480,395) to knee (500,420) to boot (515,438). Use paths with stroke-width 16 stroke white, round linecap, plus boots rounded rects fill #e2e8f0 stroke.

Body: torso rounded rect / path from hips up to neck: path M445,400 Q440,350 460,320 L500,320 Q515,355 500,400 Z fill white stroke #c7ccd9. Or simpler: ellipse cx472 cy362 rx36 ry48 fill white.

Suit details: chest panel rect small with buttons, zipper line.

Backpack: rounded rect behind body, x 425 y 325 width 26 height 60 rx 8 fill #d6dae6 (visible left side).

Arms: outstretched for balance. Left arm: path from shoulder (450,330) to (390,310) to (370,290)? stroke white 14. Glove circle at end fill #ff8c42 (orange gloves). Right arm: from (495,330) to (555,315) glove circle at (565,310).

Helmet: circle cx472 cy268 r 62 fill url(#glass) stroke #e8ecf5 stroke-width 5, with highlight arc white opacity 0.5. Glass gradient: radial white→lightblue opacity.

Cat inside helmet: head circle cx472 cy272 r 42 fill #f6b26b (orange tabby) stroke darker. Ears: triangles at (445,240) and (500,240) — path M440,250 L448,215 L465,240 Z and mirrored, fill same, inner pink triangles. Stripes: small arcs darker orange on forehead. Eyes: ellipses at (458,265) and (486,265) rx5 ry7 fill #2b2b2b with white glints. Nose: small triangle pink at (472,278). Mouth: path w shape. Whiskers: thin lines. Muzzle: lighter ellipse.

Tail: orange curved path from back of suit lower left: M440,390 Q400,380 395,345 stroke #f6b26b width 10 round, with stripes? Tail sticking from suit — cute.

Flag: small moon flag planted at (720,430): pole line, flag rect with paw print? Simple flag rect fill #ff5a5f with white paw circles.

Shadows: ellipse under skateboard, dark translucent.

Sparkles/motion: small "speed lines" behind board.

Add subtle animation? SVG can include CSS animation — twinkling stars, cat slight bob. Animations are fine in SVG. Keep minimal: stars twinkle, board small bounce? A gentle floating bob of whole cat group would look nice. Use <style> in SVG with transform keyframes. Keep zero errors.

Also add craters on ground and distant moon hills.

Write final SVG. Watch stroke widths and no errors. Use rounded linecaps.

Face stripe details: paths on forehead: M455,232 q3,8 0,12 etc. Keep simple: three small dark orange strokes.

Helmet reflection: path arc white opacity 0.35 at upper-left of dome.

Let me also add title text? Not necessary; maybe small caption "One small ollie for cat-kind" at top? Cute. Add text at bottom: fill white, font-family sans-serif, opacity 0.8, size 16, centered. It renders fine.

Now coordinates check for arms overlapping helmet: helmet bottom at y 330. Shoulders at y 335ish. Arms stroke white width 13.

Torso: ellipse cx472 cy368 rx34 ry44 fill white stroke #b9c0d4 sw 3. Neck area hidden by helmet.

Legs: use paths stroke #ffffff width 15 with slight gray outline — can't outline stroke path easily; draw wider gray underneath: draw path twice (width 19 #c7ccd9, width 14 #fff). Or just white with round caps over body; fine.

Boot: rounded rects rotated slightly: use rects with rx.

Shadow under board on ground: ellipse cx470 cy470 rx110 ry10 fill #000 opacity 0.25.

Dust puffs: circles near back wheel trailing left, opacity decreasing.

Craters: e.g. ellipse (150,540) rx40 ry12 fill #9a9ab0, inner ellipse offset fill #8888a0... simpler: ellipse fill #a0a0b6 stroke #7f7f96. Add a few at (110,545),(640,560),(800,520),(300,575) rx varying.

Hills: back mound: path M0,470 Q250,420 500,465 ... subtle lighter #d8d8e4 behind ground? Keep one distant hill fill #b8b8cc.

Stars: define ~25 circles plus sparkles. Sparkle: path with 4-point star: M x,y-6 L x+1.5,y-1.5 L x+6,y L x+1.5,y+1.5 L x,y+6 L x-1.5,y+1.5 L x-6,y L x-1.5,y-1.5 Z.

Animation: 
.star { animation: twinkle 3s infinite; } with nth-child delays — SVG CSS nth-child works on class. Give some stars class "tw".
Cat group: #cat { animation: bob 2.5s ease-in-out infinite; transform-origin:470px 400px; } keyframes translateY(-6px) rotate(-1deg). transform-box: fill-box maybe; use transform-origin with px in SVG CSS works in Chrome.

Flag with wave? skip.

Write it out.