Xing4.0 29B A4B (free)

by XingChenReasoningClean

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

How it went

Total time: 2 min 6 s
Cost: $0
Output tokens: 6,626
Spent thinking: 0 tokens
Speed: 53 tok/s
Console errors: 0

First token after: 1.2 s
First visible text after: 1.2 s
Prompt tokens: 551
Code size: 13.2 KB
Finish reason: stop
Served by: Phala
Model id: xingchen-agi/xing4.0-29b-a4b:free
Reasoning sent: {"effort":"none"}
Max output: 32,000 tokens
Generated: Nov 9, 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 · 272 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <defs>
    <!-- Sky gradient -->
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0b1039"/>
      <stop offset="55%" stop-color="#1a1f5e"/>
      <stop offset="100%" stop-color="#3a3f8a"/>
    </linearGradient>

    <!-- Moon glow gradient -->
    <radialGradient id="moonGlow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0%" stop-color="#fff8e8" stop-opacity="0.8"/>
      <stop offset="40%" stop-color="#ffe9c4" stop-opacity="0.35"/>
      <stop offset="75%" stop-color="#f5d472" stop-opacity="0.12"/>
      <stop offset="100%" stop-color="#f5d472" stop-opacity="0"/>
    </radialGradient>

    <!-- Hill grass gradient -->
    <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#4d6b3a"/>
      <stop offset="60%" stop-color="#38552c"/>
      <stop offset="100%" stop-color="#243f1c"/>
    </linearGradient>

    <!-- Fox fur shadow gradient -->
    <linearGradient id="foxBody" x1="0" y1="0" x2="0.3" y2="1">
      <stop offset="0%" stop-color="#f0a040"/>
      <stop offset="55%" stop-color="#c97322"/>
      <stop offset="100%" stop-color="#8a4e14"/>
    </linearGradient>

    <!-- Fox head -->
    <linearGradient id="foxHead" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#e8b14a"/>
      <stop offset="100%" stop-color="#a86a1c"/>
    </linearGradient>

    <!-- Tail tip white -->
    <linearGradient id="tailTip" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#fbf0d8"/>
      <stop offset="100%" stop-color="#e8dcc0"/>
    </linearGradient>

    <!-- Tree trunk gradient -->
    <linearGradient id="trunkGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#5b3d28"/>
      <stop offset="100%" stop-color="#2e1e14"/>
    </linearGradient>

    <!--Tree canopy -->
    <radialGradient id="treeCanopy" cx="0.5" cy="0.6" r="0.6">
      <stop offset="0%" stop-color="#1f4d22"/>
      <stop offset="70%" stop-color="#0d2b12"/>
      <stop offset="100%" stop-color="#061508"/>
    </radialGradient>
  </defs>

  <!-- ============ BACKGROUND HILLS ============ -->

  <!-- Left distant hill -->
  <path d="M0,370 C90,330 200,380 310,360 C410,342 510,380 600,355 L600,600 L0,600 Z"
        fill="url(#hillGrad)" opacity="0.55"/>

  <!-- Right distant hill -->
  <path d="M0,410 C80,380 170,410 290,390 C400,372 490,405 600,388 L600,600 L0,600 Z"
        fill="url(#hillGrad)" opacity="0.65"/>

  <!-- ============ FAR TREES (small silhouettes) ============ -->

  <g fill="#07160a" opacity="0.9">
    <circle cx="95" cy="345" r="9"/>
    <circle cx="110" cy="350" r="7"/>
    <circle cx="690" cy="350" r="10"/>
    <circle cx="710" cy="355" r="8"/>
    <circle cx="540" cy="380" r="7"/>
    <circle cx="630" cy="370" r="9"/>
    <circle cx="480" cy="392" r="7"/>
    <circle cx="380" cy="400" r="8"/>
  </g>

  <!-- ============ FOREGROUND HILL (where fox sits) ============ -->

  <path d="M0,430 C140,390 320,440 520,410 C660,392 740,415 800,400 L800,600 L0,600 Z"
        fill="url(#hillGrad)" opacity="0.8"/>

  <!-- Hill texture lines -->
  <path d="M0,440 C120,410 240,448 360,420 C480,394 600,428 800,405" stroke="#1a2c13" stroke-width="1.2" fill="none" opacity="0.5"/>

  <!-- ============ MOSTLY PAINTED – MOON & STARS ============ -->

  <!-- Moon glow -->
  <circle cx="590" cy="150" r="110" fill="url(#moonGlow)"/>

  <!-- Moon disc -->
  <circle cx="590" cy="150" r="62" fill="url(#moonGlow)">
    <animate attributeName="r" values="60;63;60" dur="4s" repeatCount="indefinite"/>
  </circle>

  <!-- Moon craters -->
  <g fill="#e8dab6" opacity="0.45">
    <ellipse cx="560" cy="130" rx="10" ry="8"/>
    <ellipse cx="610" cy="165" rx="14" ry="10"/>
    <ellipse cx="585" cy="110" rx="6" ry="5"/>
    <ellipse cx="620" cy="130" rx="8" ry="7"/>
  </g>

  <!-- Stars in the upper right -->
  <g fill="#fff">
    <circle cx="90" cy="80" r="1.8"><animate attributeName="opacity" values="0.2;1;0.2" dur="3s" repeatCount="indefinite"/></circle>
    <circle cx="150" cy="55" r="1.2"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.5s" repeatCount="indefinite"/></circle>
    <circle cx="230" cy="100" r="2"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.5s" repeatCount="indefinite"/></circle>
    <circle cx="40" cy="120" r="1.5"><animate attributeName="opacity" values="0.4;1;0.4" dur="4s" repeatCount="indefinite"/></circle>

    <circle cx="340" cy="70" r="2"><animate attributeName="opacity" values="0.15;1;0.15" dur="2.8s" repeatCount="indefinite"/></circle>
    <circle cx="380" cy="45" r="1"><animate attributeName="opacity" values="0.3;1;0.3" dur="3.2s" repeatCount="indefinite"/></circle>
    <circle cx="430" cy="90" r="1.6"><animate attributeName="opacity" values="0.2;1;0.2" dur="3s" repeatCount="indefinite"/></circle>

    <circle cx="470" cy="60" r="1.3"><animate attributeName="opacity" values="0.3;1;0.3" dur="3.5s" repeatCount="indefinite"/></circle>
    <circle cx="610" cy="90" r="1.8"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.3s" repeatCount="indefinite"/></circle>
    <circle cx="700" cy="110" r="1.4"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.6s" repeatCount="indefinite"/></circle>

    <circle cx="260" cy="60" r="1"><animate attributeName="opacity" values="0.4;1;0.4" dur="3.8s" repeatCount="indefinite"/></circle>
    <circle cx="760" cy="180" r="1.5"><animate attributeName="opacity" values="0.3;1;0.3" dur="3.2s" repeatCount="indefindefinite"/></circle>
    <circle cx="80" cy="200" r="1.1"><animate attributeName="opacity" values="0.35;1;0.35" dur="3s" repeatCount="indefinite"/></circle>
    <circle cx="200" cy="160" r="1.2"><animate attributeName="opacity" values="0.25;1;0.25" dur="3.6s" repeatCount="indefinite"/></circle>
    <circle cx="740" cy="220" r="1.3"><animate attributeName="opacity" values="0.25;1;0.25" dur="3.4s" repeatCount="indefinite"/></circle>
    <circle cx="130" cy="180" r="1"><animate attributeName="opacity" values="0.35;1;0.35" dur="3.1s" repeatCount="indefinite"/></circle>
  </g>

  <!-- Shooting star (first one within 2 sec) -->
  <line class="shooting-star" x1="350" y1="70" x2="560" y2="200"
        stroke="#dfeaff" stroke-width="2.2" stroke-linecap="round"
        stroke-dasharray="60 30" opacity="0">
    <animate attributeName="opacity" values="0;1;0" dur="0.6s" begin="0s" repeatCount="indefinite"/>
    <animate attributeName="x1" values="350;450;540" dur="2.2s" begin="0s" repeatCount="indefinite"/>
    <animate attributeName="x2" values="560;640;560" dur="2.2s" begin="0s" repeatCount="indefinite"/>
    <animate attributeName="y1" values="70;100;180" dur="2.2s" begin="0s" repeatCount="indefinite"/>
    <animate attributeName="y2" values="200;170;80" dur="2.2s" begin="0s" repeatCount="indefinite"/>
  </line>

  <!-- Second shooting star -->
  <line class="shooting-star2" x1="680" y1="40" x2="770" y2="150"
        stroke="#eef2ff" stroke-width="1.8" stroke-linecap="round"
        stroke-dasharray="45 20" opacity="0">
    <animate attributeName="opacity" values="0;1;0" dur="0.55s" begin="1.6s" repeatCount="indefinite"/>
    <animate attributeName="x1" values="680;720;760" dur="2s" begin="1.6s" repeatCount="indefinite"/>
    <animate attributeName="x2" values="770;710;650" dur="2s" begin="1.6s" repeatCount="indefinite"/>
    <animate attributeName="y1" values="40;70;130" dur="2s" begin="1.6s" repeatCount="indefinite"/>
    <animate attributeName="y2" values="150;120;60" dur="2s" begin="1.6s" repeatCount="indefinite"/>
  </line>

  <!-- ============ FOX ============ -->
  <!-- We layer the fox on top of the foreground hill (already at z-order after hills) -->

  <!-- Shadow under fox -->
  <ellipse cx="350" cy="470" rx="58" ry="9" fill="#000" opacity="0.3"/>

  <!-- ----- Body / main shape ----- -->

  <!-- hindquarters -->
  <g fill="url(#foxBody)">
    <!-- Back hind leg -->
    <path d="M330,470 Q300,505 260,510 L248,525 Q262,523 270,512 Q266,505 260,498 Q258,493 255,490 L285,478 Z"/>
    <!-- Hind leg band shadow -->
    <path d="M270,490 Q320,500 345,498 L345,485 Q300,472 262,485 Z" fill="#6b3a10" opacity="0.55"/>
  </g>

  <!-- Body torso -->
  <path d="M325,455 Q295,470 285,490 Q285,510 320,518 L410,518 Q440,500 440,470 Q440,455 425,450 Q405,448 390,450 L335,455 Z" fill="url(#foxBody)"/>

  <!-- Belly/chest shading -->
  <path d="M340,490 Q360,500 395,495 L405,500 Q385,510 355,505 Q340,502 330,498 Z" fill="#f6c988" opacity="0.6"/>

  <!-- Hind foot -->
  <path d="M248,525 L262,548 Q272,555 282,548 Q292,540 288,528 Q290,522 286,518 L258,518 Q250,520 248,525 Z" fill="url(#foxBody)"/>

  <!-- Front upper legs -->
  <path d="M330,455 Q315,475 330,498 Q335,505 345,505 L345,515 Q338,518 330,512 Z" fill="url(#foxBody)"/>
  <path d="M370,452 Q362,470 370,490 Q375,498 395,498 L395,510 Q388,513 380,508 Q370,503 365,498 L338,488 Q325,472 332,458 Z" fill="url(#foxBody)"/>

  <!-- Front lower legs (slightly darker) -->
  <path d="M335,495 Q332,508 335,518 L345,518 Q346,515 345,510 Q343,503 342,498 L338,490 Z" fill="#8a4e14" opacity="0.7"/>
  <path d="M382,492 Q380,508 383,518 L392,518 Q393,515 392,510 Q390,503 389,498 L385,490 Z" fill="#8a4e14" opacity="0.7"/>

  <!-- Front paws -->
  <ellipse cx="342" cy="520" rx="11" ry="7" fill="#6b3a10"/>
  <ellipse cx="387" cy="518" rx="10" ry="6" fill="#6b3a10"/>

  <!-- Tail (with animatable sway) -->
  <g id="tail">
    <!-- Tail back -->
    <path d="M255,460 Q220,430 200,470 Q210,490 250,492" stroke="#c97322" stroke-width="13" stroke-linecap="round" fill="none" opacity="0.95"/>
    <!-- Tail shadow -->
    <path d="M255,460 Q220,430 200,470 Q210,490 250,492" stroke="#6b3a10" stroke-width="13" stroke-linecap="round" fill="none" opacity="0.4"/>

    <!-- White tip -->
    <circle cx="195" cy="478" r="13" fill="url(#tailTip)" opacity="0.95"/>
    <circle cx="188" cy="472" r="10" fill="url(#tailTip)" opacity="0.85"/>

    <!-- Tail belly underdraw -->
    <path d="M258,465 Q230,440 215,480 Q225,495 258,495" stroke="#d98a30" stroke-width="7" stroke-linecap="round" fill="none" opacity="0.6"/>

    <!-- Tail tip highlight -->
    <path d="M196,468 Q190,475 195,482" stroke="#fffdf2" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.7"/>
  </g>

  <!-- Tail sway animation -->
  <animateTransform id="tailSway" attributeName="transform" type="rotate"
                    values="0 255 465; -6 255 465; 6 255 465; 0 255 465"
                    dur="3.2s" repeatCount="indefinite" additive="sum"/>

  <!-- Neck + head -->
  <g fill="url(#foxHead)">
    <!-- Neck connecting body to head -->
    <path d="M400,448 Q430,460 445,485 L455,505 Q450,512 435,510 L425,495 Q410,480 405,465 Z" fill="#c97322"/>

    <!-- Head -->
    <ellipse cx="470" cy="478" rx="32" ry="26" fill="url(#foxHead)"/>

    <!-- Cheek/jaw lower shade -->
    <path d="M445,490 Q475,500 505,498 Q515,496 510,490 Q500,488 480,488 Q460,484 448,482 Z" fill="#7a4815" opacity="0.45"/>

    <!-- Snout -->
    <path d="M450,475 Q470,492 498,488 Q500,485 495,480 Q478,470 460,468 Z" fill="#d98a30"/>

    <!-- Nose -->
    <ellipse cx="502" cy="484" rx="6" ry="5" fill="#2a1a0e"/>
    <ellipse cx="504" cy="481" rx="2" ry="1.3" fill="#fff" opacity="0.5"/>

    <!-- Eyes -->
    <ellipse cx="482" cy="465" rx="4.2" ry="5.5" fill="#1a1408"/>
    <ellipse cx="484" cy="463" rx="1.5" ry="1.8" fill="#ffb24d"/>
    <ellipse cx="478" cy="463" rx="1.2" ry="1.6" fill="#fff" opacity="0.85"/>

    <ellipse cx="500" cy="463" rx="4.2" ry="5.5" fill="#1a1408"/>
    <ellipse cx="502" cy="461" rx="1.5" ry="1.8" fill="#ffb24d"/>
    <ellipse cx="496" cy="461" rx="1.2" ry="1.6" fill="#fff" opacity="0.85"/>

    <!-- Ear inner (pink) -->
    <path d="M440,448 Q420,430 428,420 Q435,430 448,450 Z" fill="#e08aa8"/>
    <path d="M500,448 Q522,430 520,418 Q513,428 500,448 Z" fill="#e08aa8"/>
    <path d="M440,440 Q420,425 428,418 Q435,428 448,438 Z" fill="#d6607c"/>
    <path d="M500,440 Q522,425 520,412 Q513,422 500,440 Z" fill="#d6607c"/>

    <!-- Ears back side shadow -->
    <path d="M438,444 Q416,426 428,418 Q436,424 450,440 Z" fill="#8a4e14" opacity="0.55"/>
    <path d="M502,444 Q526,426 522,412 Q512,422 498,442 Z" fill="#8a4e14" opacity="0.55"/>

    <!-- Mouth corner suggestion -->
    <path d="M502,490 Q508,494 514,492 Q510,488 504,490 Z" fill="#3a2412" opacity="0.6"/>
    <path d="M505,489 Q510,493 514,491" stroke="#3a2412" stroke-width="1.4" fill="none" opacity="0.7"/>
  </g>

  <!-- Fox muzzle (white patch at bottom of snout) -->
  <path d="M452,478 Q470,489 496,485 Q500,484 498,481 Q482,473 462,473 Z" fill="#fbf0d8"/>

  <!-- ====== FOREGROUND details ====== -->

  <!-- Fox ear inner detail -->
  <path d="M438,440 Q420,425 428,418 Q435,424 448,438 Z" fill="#c66180" opacity="0.6"/>
  <path d="M500,440 Q522,425 520,412 Q512,422 498,440 Z" fill="#c66180" opacity="0.6"/>

  <!-- Small twig/stick near the hill edge -->
  <path d="M410,520 Q412,535 408,548" stroke="#3a2412" stroke-width="2" fill="none"/>
  <circle cx="408" cy="548" r="2.5" fill="#3a2412"/>

  <!-- Ground fog -->
  <path d="M200,510 C230,528 300,535 370,525 C430,515 480,535 540,520"
        stroke="#ffffff" stroke-width="22" fill="none" opacity="0.10" stroke-linecap="round"/>
  <path d="M600,510 C620,525 680,535 720,520 C760,508 780,520 790,515"
        stroke="#ffffff" stroke-width="18" fill="none" opacity="0.08" stroke-linecap="round"/>
</svg>