GLM 5.3 Flash

by Z.aiReasoningClean

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

How it went

Total time: 24.4 s
Cost: $0.0018
Output tokens: 3,356
Spent thinking: 6 tokens
Speed: 140.9 tok/s
Console errors: 0

First token after: 570 ms
First visible text after: 684 ms
Prompt tokens: 520
Code size: 8.1 KB
Finish reason: stop
Served by: Modal
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

Create a standalone SVG illustration of a fox sitting on a hill, looking at the moon on a starry night, with a few subtle animations. Requirements: - Output a single valid .svg file (```svg code block) with a viewBox of 0 0 800 600. - Hand-written shapes and paths only: no embedded raster images, no external references, no JavaScript. - The fox must be clearly recognizable (pointy ears, snout, bushy tail with a white tip). - Include the moon with a soft glow, many stars, the hill and some background elements (trees, distant hills). - Use a coherent color palette and at least one gradient. - Animations (SMIL or CSS inside the SVG), all looping seamlessly: stars twinkling, the fox's tail swaying gently, and a shooting star crossing the sky every 4 seconds (the first one within 2 seconds).

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 · 141 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0b1030"/>
      <stop offset="0.6" stop-color="#1c2a55"/>
      <stop offset="1" stop-color="#3a3f6e"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#fff6d8" stop-opacity="0.9"/>
      <stop offset="0.35" stop-color="#fff0c0" stop-opacity="0.35"/>
      <stop offset="1" stop-color="#fff0c0" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moonBody" cx="0.4" cy="0.4" r="0.8">
      <stop offset="0" stop-color="#fffdf2"/>
      <stop offset="1" stop-color="#f3e3a8"/>
    </radialGradient>
    <linearGradient id="hill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2b3a5e"/>
      <stop offset="1" stop-color="#1a2340"/>
    </linearGradient>
    <linearGradient id="hillFar" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#232c50"/>
      <stop offset="1" stop-color="#161c38"/>
    </linearGradient>
  </defs>

  <!-- Sky -->
  <rect width="800" height="600" fill="url(#sky)"/>

  <!-- Stars (twinkling) -->
  <g fill="#ffffff">
    <g>
      <circle cx="60" cy="60" r="1.6"><animate attributeName="opacity" values="1;0.2;1" dur="3s" repeatCount="indefinite"/></circle>
      <circle cx="140" cy="120" r="1.2"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.4s" repeatCount="indefinite"/></circle>
      <circle cx="220" cy="50" r="1.8"><animate attributeName="opacity" values="1;0.3;1" dur="3.6s" repeatCount="indefinite"/></circle>
      <circle cx="300" cy="100" r="1.3"><animate attributeName="opacity" values="0.4;1;0.4" dur="2.8s" repeatCount="indefinite"/></circle>
      <circle cx="380" cy="40" r="1.6"><animate attributeName="opacity" values="1;0.25;1" dur="3.2s" repeatCount="indefinite"/></circle>
      <circle cx="470" cy="90" r="1.1"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.2s" repeatCount="indefinite"/></circle>
      <circle cx="560" cy="150" r="1.5"><animate attributeName="opacity" values="1;0.3;1" dur="3.4s" repeatCount="indefinite"/></circle>
      <circle cx="660" cy="70" r="1.3"><animate attributeName="opacity" values="0.35;1;0.35" dur="2.6s" repeatCount="indefinite"/></circle>
      <circle cx="740" cy="130" r="1.7"><animate attributeName="opacity" values="1;0.2;1" dur="3s" repeatCount="indefinite"/></circle>
      <circle cx="100" cy="200" r="1.2"><animate attributeName="opacity" values="0.4;1;0.4" dur="2.9s" repeatCount="indefinite"/></circle>
      <circle cx="200" cy="180" r="1.5"><animate attributeName="opacity" values="1;0.3;1" dur="3.3s" repeatCount="indefinite"/></circle>
      <circle cx="330" cy="160" r="1.1"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.3s" repeatCount="indefinite"/></circle>
      <circle cx="430" cy="200" r="1.4"><animate attributeName="opacity" values="1;0.25;1" dur="3.5s" repeatCount="indefinite"/></circle>
      <circle cx="620" cy="220" r="1.2"><animate attributeName="opacity" values="0.35;1;0.35" dur="2.7s" repeatCount="indefinite"/></circle>
      <circle cx="720" cy="250" r="1.6"><animate attributeName="opacity" values="1;0.3;1" dur="3.1s" repeatCount="indefinite"/></circle>
      <circle cx="60" cy="280" r="1.3"><animate attributeName="opacity" values="0.4;1;0.4" dur="2.5s" repeatCount="indefinite"/></circle>
      <circle cx="760" cy="40" r="1.2"><animate attributeName="opacity" values="1;0.25;1" dur="2.9s" repeatCount="indefinite"/></circle>
      <circle cx="520" cy="40" r="1.4"><animate attributeName="opacity" values="0.3;1;0.3" dur="3.7s" repeatCount="indefinite"/></circle>
    </g>
  </g>

  <!-- Shooting star: crosses every 4s, first pass within 2s -->
  <g>
    <g opacity="0">
      <line x1="0" y1="0" x2="70" y2="24" stroke="#fff8e0" stroke-width="2.5" stroke-linecap="round">
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.7;1" dur="1.6s" repeatCount="indefinite"/>
      </line>
      <circle r="2.6" fill="#fffef0">
        <animate attributeName="opacity" values="1;1;0" keyTimes="0;0.7;1" dur="1.6s" repeatCount="indefinite"/>
      </circle>
      <animateTransform attributeName="transform" type="translate" values="150,-40;150,-40;650,130;650,130" keyTimes="0;0.1;0.9;1" dur="1.6s" begin="0s;0s" repeatCount="indefinite" additive="replace" calcMode="linear"/>
      <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.49;0.5;0.9;0.92;1" dur="4s" repeatCount="indefinite"/>
    </g>
  </g>
  <!-- Simpler periodic visibility wrapper: restart every 4s -->
  <g opacity="0">
    <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0;0.02;0.35;0.4;1" dur="4s" repeatCount="indefinite"/>
    <g>
      <line x1="0" y1="0" x2="70" y2="24" stroke="#fff8e0" stroke-width="2.5" stroke-linecap="round"/>
      <circle r="2.6" fill="#fffef0"/>
      <animateTransform attributeName="transform" type="translate" values="150,-40;680,150" dur="1.5s" repeatCount="indefinite"/>
    </g>
  </g>

  <!-- Moon with glow -->
  <circle cx="600" cy="120" r="90" fill="url(#moonGlow)">
    <animate attributeName="r" values="88;96;88" dur="6s" repeatCount="indefinite"/>
  </circle>
  <circle cx="600" cy="120" r="46" fill="url(#moonBody)"/>
  <circle cx="585" cy="108" r="8" fill="#e8d694" opacity="0.6"/>
  <circle cx="612" cy="132" r="6" fill="#e8d694" opacity="0.5"/>
  <circle cx="596" cy="140" r="4" fill="#e8d694" opacity="0.45"/>

  <!-- Distant hills -->
  <path d="M0,340 Q150,290 320,335 T650,330 Q740,315 800,335 L800,600 L0,600 Z" fill="url(#hillFar)" opacity="0.85"/>

  <!-- Distant trees -->
  <g fill="#141c36">
    <path d="M120,330 L132,282 L144,330 Z"/>
    <rect x="129" y="326" width="6" height="10"/>
    <path d="M180,334 L194,278 L208,334 Z"/>
    <rect x="190" y="330" width="7" height="12"/>
    <path d="M700,332 L712,284 L724,332 Z"/>
    <rect x="709" y="328" width="6" height="10"/>
    <path d="M745,336 L757,292 L769,336 Z"/>
    <rect x="753" y="332" width="6" height="10"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0,470 Q180,390 400,430 Q620,470 800,440 L800,600 L0,600 Z" fill="url(#hill)"/>
  <!-- Subtle grass highlights -->
  <path d="M120,470 q6,-12 12,0 M340,448 q6,-12 12,0 M560,462 q6,-12 12,0" stroke="#3d4d78" stroke-width="2" fill="none" stroke-linecap="round"/>

  <!-- Fox -->
  <g>
    <!-- Tail (swaying) -->
    <g>
      <animateTransform attributeName="transform" type="rotate" values="-6 530 428; 6 530 428; -6 530 428" dur="4s" repeatCount="indefinite" additive="sum"/>
      <path d="M505,430 Q560,415 590,370 Q605,350 600,330 Q630,345 630,385 Q630,440 560,455 Q520,462 505,430 Z" fill="#d97a2b"/>
      <path d="M598,335 Q628,348 628,382 Q628,398 620,412 Q636,380 626,355 Q616,338 598,335 Z" fill="#f6f1e6"/>
    </g>
    <!-- Body -->
    <path d="M400,455 Q395,405 440,388 Q490,372 515,405 Q535,432 522,455 Z" fill="#e8853a"/>
    <!-- Chest -->
    <path d="M438,455 Q440,420 462,410 Q478,428 476,455 Z" fill="#f6f1e6"/>
    <!-- Head -->
    <g>
      <!-- Ears -->
      <path d="M430,372 L420,336 L448,358 Z" fill="#e8853a"/>
      <path d="M429,366 L424,348 L440,359 Z" fill="#2a1f1a"/>
      <path d="M470,368 L486,334 L492,366 Z" fill="#e8853a"/>
      <path d="M474,363 L484,346 L486,363 Z" fill="#2a1f1a"/>
      <!-- Head shape -->
      <path d="M418,378 Q422,358 448,352 Q478,348 492,362 Q500,370 496,382 L462,396 Q430,394 418,378 Z" fill="#e8853a"/>
      <!-- Snout -->
      <path d="M418,378 Q412,384 416,390 Q428,398 444,393 L446,378 Q430,376 418,378 Z" fill="#f6f1e6"/>
      <circle cx="417" cy="383" r="4" fill="#2a1f1a"/>
      <!-- Eye (gazing up at moon) -->
      <path d="M462,372 q6,-4 12,0" stroke="#2a1f1a" stroke-width="2.5" fill="none" stroke-linecap="round"/>
      <circle cx="468" cy="371" r="1.4" fill="#2a1f1a"/>
    </g>
    <!-- Front legs -->
    <path d="M448,455 L448,420 L458,420 L460,455 Z" fill="#c96a20"/>
    <path d="M470,455 L472,418 L482,418 L482,455 Z" fill="#c96a20"/>
    <!-- Sitting haunch -->
    <path d="M498,455 Q522,440 516,412 Q505,398 490,405 Q480,425 486,455 Z" fill="#c96a20"/>
    <path d="M492,455 Q510,440 508,418 L516,412 Q524,440 500,455 Z" fill="#e8853a"/>
  </g>
</svg>

Reasoning trace (6 tokens)

Output SVG code block.