GLM 5.3

by Z.aiReasoningClean

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

How it went

Total time: 19.5 s
Cost: $0.0052
Output tokens: 3,695
Spent thinking: 40 tokens
Speed: 193.8 tok/s
Console errors: 0

First token after: 408 ms
First visible text after: 673 ms
Prompt tokens: 520
Code size: 8.4 KB
Finish reason: stop
Served by: Wafer
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

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 · 178 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="#0b1035"/>
      <stop offset="55%" stop-color="#1b2350"/>
      <stop offset="100%" stop-color="#33265c"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fffbe8" stop-opacity="0.9"/>
      <stop offset="35%" stop-color="#f5e9b8" stop-opacity="0.35"/>
      <stop offset="100%" stop-color="#f5e9b8" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moonBody" cx="40%" cy="35%" r="70%">
      <stop offset="0%" stop-color="#fffdf2"/>
      <stop offset="100%" stop-color="#e8dcae"/>
    </radialGradient>
    <linearGradient id="hill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1c3a2f"/>
      <stop offset="100%" stop-color="#0e241d"/>
    </linearGradient>
    <linearGradient id="hillBack" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#24355c"/>
      <stop offset="100%" stop-color="#182645"/>
    </linearGradient>
    <style><![CDATA[
      .tw1 { animation: tw 2.4s ease-in-out infinite; }
      .tw2 { animation: tw 3.1s ease-in-out 0.8s infinite; }
      .tw3 { animation: tw 2.8s ease-in-out 1.5s infinite; }
      .tw4 { animation: tw 3.6s ease-in-out 0.4s infinite; }
      @keyframes tw { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
      #tail { transform-origin: 200px 440px; animation: sway 4s ease-in-out infinite; }
      @keyframes sway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
      .shoot { animation: shoot 4s linear infinite; }
      @keyframes shoot {
        0%   { transform: translate(0,0); opacity: 0; }
        3%   { opacity: 1; }
        14%  { transform: translate(300px,140px); opacity: 0; }
        15%  { transform: translate(300px,140px); opacity: 0; }
        50%  { transform: translate(300px,140px); opacity: 0; }
        53%  { transform: translate(300px,140px) ; opacity: 0; }
        60%  { transform: translate(300px,140px); opacity: 0; }
        100% { transform: translate(300px,140px); opacity: 0; }
      }
      #shoot2 { animation-delay: 2s; }
      #glow { animation: pulse 6s ease-in-out infinite; }
      @keyframes pulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
    ]]></style>
  </defs>

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

  <!-- Stars -->
  <g fill="#fffbe8">
    <circle class="tw1" cx="60" cy="80" r="2"/>
    <circle class="tw2" cx="140" cy="150" r="1.5"/>
    <circle class="tw3" cx="230" cy="60" r="2.2"/>
    <circle class="tw4" cx="310" cy="130" r="1.6"/>
    <circle class="tw1" cx="380" cy="50" r="1.8"/>
    <circle class="tw2" cx="450" cy="110" r="1.4"/>
    <circle class="tw3" cx="520" cy="70" r="2"/>
    <circle class="tw4" cx="600" cy="140" r="1.6"/>
    <circle class="tw1" cx="660" cy="60" r="2.4"/>
    <circle class="tw2" cx="720" cy="120" r="1.5"/>
    <circle class="tw3" cx="760" cy="200" r="1.8"/>
    <circle class="tw4" cx="40" cy="220" r="1.4"/>
    <circle class="tw1" cx="110" cy="280" r="1.6"/>
    <circle class="tw2" cx="200" cy="230" r="1.3"/>
    <circle class="tw3" cx="290" cy="200" r="1.7"/>
    <circle class="tw4" cx="360" cy="250" r="1.2"/>
    <circle class="tw1" cx="500" cy="190" r="1.5"/>
    <circle class="tw2" cx="570" cy="250" r="1.3"/>
    <circle class="tw3" cx="650" cy="220" r="1.7"/>
    <circle class="tw4" cx="30" cy="150" r="1.9"/>
    <circle class="tw1" cx="170" cy="110" r="1.4"/>
    <circle class="tw2" cx="260" cy="40" r="1.6"/>
    <circle class="tw3" cx="420" cy="170" r="1.3"/>
    <circle class="tw4" cx="700" cy="40" r="1.5"/>
    <circle class="tw1" cx="770" cy="90" r="1.7"/>
    <circle class="tw2" cx="90" cy="330" r="1.3"/>
    <circle class="tw3" cx="180" cy="360" r="1.5"/>
    <circle class="tw4" cx="330" cy="320" r="1.2"/>
    <circle class="tw1" cx="480" cy="300" r="1.4"/>
    <circle class="tw2" cx="600" cy="330" r="1.3"/>
    <circle class="tw3" cx="740" cy="280" r="1.5"/>
  </g>

  <!-- Shooting stars (every 4s; second offset by 2s) -->
  <g class="shoot">
    <line x1="120" y1="90" x2="170" y2="90" stroke="#fffbe8" stroke-width="1.6" stroke-linecap="round" opacity="0"/>
    <circle cx="176" cy="90" r="2.4" fill="#fffdf2" opacity="0"/>
    <animate attributeName="opacity" values="0;1;0" keyTimes="0;0.05;0.15" dur="4s" repeatCount="indefinite"/>
  </g>
  <g class="shoot" id="shoot2">
    <line x1="480" y1="60" x2="540" y2="60" stroke="#fffbe8" stroke-width="1.6" stroke-linecap="round" opacity="0"/>
    <circle cx="546" cy="60" r="2.4" fill="#fffdf2" opacity="0"/>
  </g>

  <!-- Distant hills -->
  <path d="M0 430 Q 150 380 300 430 Q 420 400 560 445 Q 680 420 800 450 L800 600 L0 600 Z" fill="url(#hillBack)"/>
  <path d="M0 470 Q 200 440 380 480 Q 560 450 800 495 L800 600 L0 600 Z" fill="#12203e" opacity="0.8"/>

  <!-- Moon with glow -->
  <g>
    <circle id="glow" cx="600" cy="140" r="110" fill="url(#moonGlow)"/>
    <circle cx="600" cy="140" r="52" fill="url(#moonBody)"/>
    <circle cx="585" cy="128" r="9" fill="#e3d8a8" opacity="0.5"/>
    <circle cx="618" cy="158" r="6" fill="#e3d8a8" opacity="0.4"/>
    <circle cx="600" cy="120" r="4" fill="#e3d8a8" opacity="0.35"/>
    <circle cx="580" cy="160" r="5" fill="#e3d8a8" opacity="0.35"/>
  </g>

  <!-- Trees on distant hill -->
  <g fill="#0d1a33">
    <path d="M90 470 L100 440 L110 470 Z"/>
    <path d="M88 458 L100 428 L112 458 Z"/>
    <path d="M120 475 L131 442 L142 475 Z"/>
    <path d="M118 462 L131 430 L144 462 Z"/>
    <rect x="98" y="468" width="4" height="10"/>
    <path d="M660 480 L672 448 L684 480 Z"/>
    <path d="M657 466 L672 434 L687 466 Z"/>
    <rect x="670" y="478" width="4" height="10"/>
    <path d="M700 486 L709 462 L718 486 Z"/>
    <path d="M700 475 L709 452 L718 475 Z"/>
  </g>
  <g stroke="#0d1a33" stroke-width="3" stroke-linecap="round">
    <line x1="100" y1="478" x2="100" y2="490"/>
    <line x1="131" y1="474" x2="131" y2="488"/>
    <line x1="671" y1="488" x2="671" y2="498"/>
    <line x1="708" y1="486" x2="708" y2="496"/>
  </g>

  <!-- Main hill -->
  <path d="M0 600 L0 520 Q 220 440 420 510 Q 620 570 800 540 L800 600 Z" fill="url(#hill)"/>
  <path d="M0 520 Q 220 440 420 510 Q 500 528 560 545 Q 300 500 0 600 Z" fill="#142e26" opacity="0.6"/>

  <!-- Fox: sitting, gazing up at moon -->
  <g transform="translate(0,-14)">
    <!-- Tail (swaying) -->
    <g id="tail">
      <path d="M225 455 Q 300 430 315 370 Q 322 400 300 440 Q 280 470 232 472 Q 214 468 225 455 Z" fill="#c25a2e"/>
      <path d="M315 370 Q 322 400 300 440 Q 288 456 272 466 Q 300 458 312 420 Q 322 395 315 370 Z" fill="#f3ede1"/>
    </g>
    <!-- Body -->
    <path d="M150 480 Q 148 430 190 425 Q 225 420 235 455 Q 240 478 215 490 L165 492 Q 152 488 150 480 Z" fill="#cd6433"/>
    <!-- Chest / belly -->
    <path d="M170 470 Q 168 445 190 442 Q 205 442 208 462 Q 206 480 188 486 Q 174 484 170 470 Z" fill="#f3ede1"/>
    <!-- Hind leg haunch hint -->
    <path d="M200 450 Q 220 445 228 465 Q 230 480 218 488 L200 488 Z" fill="#b5522a"/>
    <!-- Front legs -->
    <rect x="158" y="470" width="11" height="24" rx="5" fill="#b5522a"/>
    <rect x="174" y="474" width="11" height="20" rx="5" fill="#cd6433"/>
    <!-- Head (turned up toward moon) -->
    <g transform="translate(150,415) rotate(-18) translate(-150,-415)">
      <!-- Ears -->
      <path d="M126 392 L118 358 L144 376 Z" fill="#cd6433"/>
      <path d="M128 388 L123 366 L140 378 Z" fill="#3b241c"/>
      <path d="M176 392 L190 360 L166 374 Z" fill="#cd6433"/>
      <path d="M175 387 L184 368 L170 376 Z" fill="#3b241c"/>
      <!-- Face -->
      <path d="M122 400 Q 118 380 132 376 Q 150 372 172 380 Q 186 384 184 402 Q 182 418 168 424 Q 150 430 134 422 Q 122 414 122 400 Z" fill="#cd6433"/>
      <!-- White cheeks/muzzle -->
      <path d="M128 404 Q 128 392 140 390 Q 148 388 150 396 Q 150 404 142 410 Q 134 414 128 404 Z" fill="#f3ede1"/>
      <path d="M178 404 Q 178 392 168 390 Q 160 388 158 396 Q 158 404 166 410 Q 174 414 178 404 Z" fill="#f3ede1"/>
      <!-- Nose -->
      <path d="M150 394 Q 145 390 149 387 Q 152 385 155 388 Q 158 391 150 394 Z" fill="#2b1a14"/>
      <!-- Eyes (looking up at moon) -->
      <g fill="#241512">
        <circle cx="136" cy="402" r="3.6"/>
        <circle cx="168" cy="402" r="3.6"/>
      </g>
      <g fill="#fffbe8">
        <circle cx="134.5" cy="400.5" r="1.2"/>
        <circle cx="166.5" cy="400.5" r="1.2"/>
      </g>
    </g>
  </g>
</svg>

Reasoning trace (40 tokens)

Create SVG with CSS animations inside. Fox sitting on hill, moon, stars, trees, shooting star every 4s starting within 2s (use negative delay or keyframe 0-2s).