Skateboarding astronaut catOne-line

Xing4.0 29B A4B (free)

by XingChenReasoningClean

Open in new window

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

How it went

Total time: 1 min 32 s
Cost: $0
Output tokens: 4,148
Spent thinking: 0 tokens
Speed: 45.7 tok/s
Console errors: 0

First token after: 1.1 s
First visible text after: 1.1 s
Prompt tokens: 363
Code size: 7.6 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

“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 · 159 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0b0014"/>
      <stop offset="60%" stop-color="#1a0a2e"/>
      <stop offset="100%" stop-color="#3a1a5c"/>
    </linearGradient>
    <radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffeedd"/>
      <stop offset="40%" stop-color="#ffcc88"/>
      <stop offset="100%" stop-color="#ff6644" stop-opacity="0"/>
    </radialGradient>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="6" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>

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

  <!-- stars -->
  <g fill="#ffffff">
    <circle cx="60" cy="80" r="1.4"/><circle cx="140" cy="40" r="1"/><circle cx="220" cy="100" r="1.6"/>
    <circle cx="310" cy="60" r="1"/><circle cx="390" cy="30" r="1.3"/><circle cx="470" cy="90" r="1"/>
    <circle cx="550" cy="50" r="1.5"/><circle cx="630" cy="110" r="1.2"/><circle cx="700" cy="70" r="1"/>
    <circle cx="80" cy="140" r="1"/><circle cx="180" cy="180" r="1.3"/><circle cx="270" cy="200" r="1"/>
    <circle cx="350" cy="170" r="1.5"/><circle cx="430" cy="220" r="1"/><circle cx="510" cy="160" r="1.2"/>
    <circle cx="590" cy="190" r="1"/><circle cx="670" cy="150" r="1.4"/><circle cx="740" cy="210" r="1"/>
  </g>

  <!-- sun glow -->
  <circle cx="650" cy="110" r="90" fill="url(#sunGlow)"/>
  <circle cx="650" cy="110" r="28" fill="#ffe9c4"/>

  <!-- distant moon mountains -->
  <polygon points="0,480 90,380 160,440 260,330 360,420 460,350 560,450 680,370 800,460 800,600 0,600"
           fill="#2a2040" opacity="0.7"/>
  <polygon points="0,520 70,440 140,500 240,420 340,490 440,430 540,500 660,440 800,520 800,600 0,600"
           fill="#1e1838" opacity="0.85"/>

  <!-- crater shadow patch near ground level -->
  <ellipse cx="180" cy="540" rx="160" ry="22" fill="#0a0612" opacity="0.5"/>

  <!-- ===== Earth in the sky (behind everything) ===== -->
  <g transform="translate(560,100)" filter="url(#glow)">
    <ellipse cx="0" cy="0" rx="90" ry="90" fill="#2a6bb0" opacity="0.85"/>
    <path d="M -55,-40 Q -70,-70 -45,-80 Q -20,-90 0,-65 Q 30,-75 55,-55 Q 75,-30 60,-10 Q 80,20 55,40 Q 35,60 5,55 Q -30,65 -50,45 Q -75,20 -65,-15 Q -80,-35 -55,-40 Z" fill="#3da0d8"/>
    <path d="M -20,-20 Q 5,-35 30,-20 Q 20,-5 5,-10 Q -20,0 -35,15 Q -50,40 -30,55 Q -10,50 0,35 Q -15,15 -20,-20 Z" fill="#5fc0f0" opacity="0.7"/>
    <path d="M 30,-5 Q 60,-20 70,-5 Q 50,10 30,5 Z" fill="#ff9966" opacity="0.6"/>
  </g>

  <!-- ===== Moon surface ===== -->
  <rect x="0" y="460" width="800" height="140" fill="#5c5250"/>

  <!-- foreground rocks -->
  <ellipse cx="100" cy="545" rx="60" ry="14" fill="#3d3634"/>
  <ellipse cx="300" cy="550" rx="90" ry="18" fill="#4a4240"/>
  <ellipse cx="520" cy="548" rx="70" ry="16" fill="#3d3634"/>

  <!-- surface highlight lines -->
  <rect x="0" y="462" width="800" height="3" fill="#7c706c" opacity="0.6"/>

  <!-- ===== The astronaut cat on a skateboard ===== -->

  <!-- skateboard deck -->
  <g>
    <polygon points="60,488 240,488 225,502 35,502" fill="#d9a05b" stroke="#8a5a28" stroke-width="1.5"/>
    <rect x="52" y="484" width="200" height="8" rx="4" fill="#b87a34"/>
    <!-- wheels -->
    <circle cx="62" cy="510" r="11" fill="#222"/>
    <circle cx="62" cy="510" r="5" fill="#888"/>
    <circle cx="238" cy="510" r="11" fill="#222"/>
    <circle cx="238" cy="510" r="5" fill="#888"/>
    <!-- wheel spin marks -->
    <line x1="62" y1="518" x2="62" y2="524" stroke="#aaa" stroke-width="1"/>
    <line x1="238" y1="518" x2="238" y2="524" stroke="#aaa" stroke-width="1"/>
  </g>

  <!-- legs swinging back -->
  <path d="M 105,500 L 150,488 L 140,502 L 120,508" fill="none" stroke="#c9a5d6" stroke-width="6" stroke-linecap="round"/>

  <!-- skateboarder body -->
  <g>
    <!-- coat / suit torso -->
    <path d="M 95,470 C 120,455 180,455 215,470 L 215,505 C 180,500 120,500 95,515 Z" fill="#3a3d5c"/>
    <!-- arms -->
    <path d="M 95,475 C 70,460 55,490 60,510" fill="none" stroke="#3a3d5c" stroke-width="8" stroke-linecap="round"/>
    <path d="M 210,475 C 235,465 255,490 250,510" fill="none" stroke="#3a3d5c" stroke-width="8" stroke-linecap="round"/>
    <!-- gloves -->
    <circle cx="60" cy="512" r="8" fill="#d8d0e0"/>
    <circle cx="250" cy="512" r="8" fill="#d8d0e0"/>

    <!-- head -->
    <circle cx="152" cy="430" r="26" fill="#f0e8d8"/>

    <!-- ears -->
    <path d="M 132,408 L 120,388 L 140,402 Z" fill="#f0e8d8" stroke="#c0b8a8" stroke-width="1"/>
    <path d="M 172,408 L 184,388 L 164,402 Z" fill="#f0e8d8" stroke="#c0b8a8" stroke-width="1"/>
    <!-- inner ears -->
    <path d="M 133,405 L 126,394 L 137,398 Z" fill="#f4b8c0"/>
    <path d="M 171,405 L 178,394 L 167,398 Z" fill="#f4b8c0"/>

    <!-- inner ear hair tufts -->
    <path d="M 124,398 L 119,390 L 128,395 Z" fill="#6b3b3a"/>
    <path d="M 176,398 L 181,390 L 172,395 Z" fill="#6b3b3a"/>

    <!-- whiskers -->
    <path d="M 130,430 L 95,422 M 130,438 L 95,438 M 130,445 L 98,452" stroke="#ccc" stroke-width="0.7" opacity="0.6"/>
    <path d="M 174,430 L 208,422 M 174,438 L 208,438 M 174,445 L 202,452" stroke="#ccc" stroke-width="0.7" opacity="0.6"/>

    <!-- eyes -->
    <ellipse cx="140" cy="428" rx="5" ry="7" fill="#ffffff"/>
    <ellipse cx="164" cy="428" rx="5" ry="7" fill="#ffffff"/>
    <circle cx="141" cy="429" r="3.2" fill="#2a2a3a"/>
    <circle cx="165" cy="429" r="3.2" fill="#2a2a3a"/>
    <circle cx="142" cy="427" r="1" fill="#fff"/>
    <circle cx="166" cy="427" r="1" fill="#fff"/>
    <!-- nose -->
    <path d="M 152,436 L 148,442 L 156,442 Z" fill="#d08090"/>
    <!-- mouth smile -->
    <path d="M 152,442 Q 158,448 164,442" fill="none" stroke="#3a3d5c" stroke-width="1.5"/>
    <!-- cheek blush -->
    <ellipse cx="132" cy="438" rx="6" ry="3.5" fill="#f4a89c" opacity="0.35"/>
    <ellipse cx="178" cy="438" rx="6" ry="3.5" fill="#f4a89c" opacity="0.35"/>

    <!-- cat ears detail inside -->
    <path d="M 124,402 C 120,395 126,392 130,396 Z" fill="#5a4a6a"/>
    <path d="M 178,402 C 182,395 176,392 172,396 Z" fill="#5a4a6a"/>

    <!-- helmet visor -->
    <path d="M 124,422 C 118,410 122,398 134,392 C 150,386 168,392 176,398 C 188,402 194,418 190,430 C 180,420 158,412 134,414 C 112,418 110,426 124,422 Z" fill="#26508a"/>
    <path d="M 126,424 C 119,416 122,406 133,400 C 148,394 163,400 172,406 C 183,411 187,420 184,428 C 174,422 156,416 133,419 C 116,422 114,428 126,424 Z" fill="#8fd0f5" opacity="0.75"/>
    <!-- moon surface seen through visor -->
    <ellipse cx="150" cy="448" rx="30" ry="18" fill="#8a8070" opacity="0.5"/>
    <circle cx="160" cy="440" r="2" fill="#ccc" opacity="0.7"/>
    <circle cx="140" cy="446" r="1.5" fill="#ccc" opacity="0.7"/>
    <!-- lens shine -->
    <ellipse cx="146" cy="422" rx="3" ry="4" fill="#ffffff" opacity="0.8"/>
  </g>

  <!-- trailing dust behind skateboard -->
  <g fill="#cccccc" opacity="0.7">
    <ellipse cx="35" cy="522" rx="14" ry="3"/>
    <ellipse cx="24" cy="532" rx="10" ry="2"/>
    <ellipse cx="5" cy="538" rx="6" ry="1.5"/>
    <ellipse cx="-3" cy="543" rx="4" ry="1"/>
  </g>

  <!-- stars in sky -->
  <g fill="#ffffff">
    <circle cx="350" cy="40" r="1"/><circle cx="410" cy="70" r="1.2"/><circle cx="250" cy="110" r="1"/>
    <circle cx="470" cy="30" r="0.9"/><circle cx="120" cy="200" r="1"/><circle cx="50" cy="250" r="1.3"/>
  </g>

  <!-- ambient text overlay -->
  <text x="40" y="575" font-family="Georgia, serif" font-size="18" fill="#ffe9c4" opacity="0.8">
    Luna… leelee… *kneesh*
  </text>
</svg>