Skateboarding astronaut catOne-line

Qwen3.8 Flash

by QwenReasoningClean

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.0027
Output tokens: 5,693
Spent thinking: 0 tokens
Speed: 78.6 tok/s
Console errors: 0

First token after: 1.4 s
First visible text after: 1.4 s
Prompt tokens: 367
Code size: 11.9 KB
Finish reason: stop
Served by: Alibaba
Model id: qwen/qwen3.8-flash
Reasoning sent: {"effort":"none"}
Max output: 64,000 tokens
Generated: Nov 11, 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 · 259 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="1280" height="800">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#05070f"/>
      <stop offset="45%" stop-color="#0a1024"/>
      <stop offset="80%" stop-color="#141b38"/>
      <stop offset="100%" stop-color="#1d2650"/>
    </linearGradient>
    <radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff8e6" stop-opacity="0.9"/>
      <stop offset="35%" stop-color="#ffe9b0" stop-opacity="0.35"/>
      <stop offset="100%" stop-color="#ffe9b0" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="earthGrad" cx="38%" cy="34%" r="72%">
      <stop offset="0%" stop-color="#8fd3ff"/>
      <stop offset="42%" stop-color="#3a86c9"/>
      <stop offset="78%" stop-color="#1f4f8a"/>
      <stop offset="100%" stop-color="#12315a"/>
    </radialGradient>
    <radialGradient id="moonSurface" cx="50%" cy="30%" r="85%">
      <stop offset="0%" stop-color="#cdd0d8"/>
      <stop offset="55%" stop-color="#9aa0ad"/>
      <stop offset="100%" stop-color="#6a707d"/>
    </radialGradient>
    <radialGradient id="suitGrad" cx="40%" cy="35%" r="75%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="60%" stop-color="#e7ebf2"/>
      <stop offset="100%" stop-color="#c2c9d6"/>
    </radialGradient>
    <linearGradient id="visorGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#2a3550"/>
      <stop offset="45%" stop-color="#4a6fa5"/>
      <stop offset="75%" stop-color="#8fc0e8"/>
      <stop offset="100%" stop-color="#d6ecff"/>
    </linearGradient>
    <linearGradient id="boardGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ff6b9d"/>
      <stop offset="100%" stop-color="#c93a70"/>
    </linearGradient>
    <filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
      <feDropShadow dx="0" dy="6" stdDeviation="8" flood-color="#000" flood-opacity="0.35"/>
    </filter>
    <filter id="glow" x="-80%" y="-80%" width="260%" height="260%">
      <feGaussianBlur stdDeviation="6" result="b"/>
      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <clipPath id="earthClip"><circle cx="250" cy="200" r="118"/></clipPath>
  </defs>

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

  <!-- Stars -->
  <g fill="#ffffff">
    <circle cx="80" cy="60" r="1.6" opacity="0.9"/>
    <circle cx="160" cy="120" r="1.1" opacity="0.7"/>
    <circle cx="300" cy="70" r="1.4" opacity="0.8"/>
    <circle cx="420" cy="150" r="1" opacity="0.6"/>
    <circle cx="520" cy="60" r="1.8" opacity="0.9"/>
    <circle cx="640" cy="110" r="1.2" opacity="0.7"/>
    <circle cx="720" cy="40" r="1.5" opacity="0.85"/>
    <circle cx="860" cy="90" r="1" opacity="0.6"/>
    <circle cx="960" cy="140" r="1.7" opacity="0.9"/>
    <circle cx="1080" cy="70" r="1.2" opacity="0.7"/>
    <circle cx="1180" cy="130" r="1.5" opacity="0.85"/>
    <circle cx="1240" cy="60" r="1" opacity="0.6"/>
    <circle cx="100" cy="240" r="1.3" opacity="0.75"/>
    <circle cx="200" cy="300" r="1" opacity="0.6"/>
    <circle cx="380" cy="260" r="1.6" opacity="0.85"/>
    <circle cx="560" cy="300" r="1.1" opacity="0.65"/>
    <circle cx="700" cy="250" r="1.4" opacity="0.8"/>
    <circle cx="820" cy="320" r="1" opacity="0.6"/>
    <circle cx="940" cy="270" r="1.7" opacity="0.9"/>
    <circle cx="1060" cy="330" r="1.2" opacity="0.7"/>
    <circle cx="1160" cy="280" r="1.5" opacity="0.85"/>
    <circle cx="40" cy="380" r="1.2" opacity="0.7"/>
    <circle cx="1220" cy="380" r="1.4" opacity="0.8"/>
    <circle cx="600" cy="180" r="1.3" opacity="0.75"/>
    <circle cx="480" cy="220" r="1" opacity="0.6"/>
    <circle cx="1120" cy="200" r="1.6" opacity="0.85"/>
    <circle cx="260" cy="180" r="1.1" opacity="0.65"/>
    <circle cx="760" cy="160" r="1.5" opacity="0.8"/>
    <circle cx="900" cy="200" r="1" opacity="0.6"/>
    <circle cx="1020" cy="180" r="1.3" opacity="0.75"/>
    <circle cx="340" cy="340" r="1.4" opacity="0.8"/>
    <circle cx="500" cy="360" r="1" opacity="0.6"/>
    <circle cx="680" cy="340" r="1.6" opacity="0.85"/>
    <circle cx="880" cy="360" r="1.2" opacity="0.7"/>
    <circle cx="1140" cy="360" r="1.5" opacity="0.8"/>
  </g>
  <!-- Twinkling cross stars -->
  <g stroke="#ffffff" stroke-width="1.2" opacity="0.8">
    <path d="M540 120 v-10 M540 120 v10 M530 120 h-10 M550 120 h10"/>
    <path d="M1000 110 v-9 M1000 110 v9 M991 110 h-9 M1009 110 h9"/>
    <path d="M300 300 v-8 M300 300 v8 M292 300 h-8 M308 300 h8"/>
  </g>

  <!-- Sun glow top-right -->
  <circle cx="1120" cy="90" r="220" fill="url(#sunGlow)"/>
  <circle cx="1120" cy="90" r="46" fill="#fffdf0"/>

  <!-- Earth -->
  <g filter="url(#softShadow)">
    <circle cx="250" cy="200" r="118" fill="url(#earthGrad)"/>
    <g clip-path="url(#earthClip)">
      <!-- continents -->
      <path d="M150 150 q40 -30 90 -10 q30 15 20 50 q-40 25 -80 10 q-45 -20 -30 -50z" fill="#3fae6b" opacity="0.85"/>
      <path d="M280 230 q50 -20 80 10 q20 30 -20 55 q-50 15 -80 -10 q-20 -35 20 -55z" fill="#2f9e5f" opacity="0.8"/>
      <path d="M180 280 q30 -10 50 15 q10 30 -25 40 q-40 5 -45 -30 q0 -20 20 -25z" fill="#4bb878" opacity="0.75"/>
      <!-- clouds -->
      <ellipse cx="200" cy="170" rx="55" ry="14" fill="#ffffff" opacity="0.55"/>
      <ellipse cx="300" cy="210" rx="45" ry="12" fill="#ffffff" opacity="0.45"/>
      <ellipse cx="230" cy="250" rx="60" ry="15" fill="#ffffff" opacity="0.4"/>
      <!-- shadow crescent -->
      <circle cx="320" cy="240" r="150" fill="#0a1024" opacity="0.55"/>
    </g>
    <circle cx="250" cy="200" r="118" fill="none" stroke="#bfe3ff" stroke-width="2" opacity="0.5"/>
  </g>

  <!-- Moon surface (foreground terrain) -->
  <path d="M0 560 Q 320 500 640 545 T 1280 540 L1280 800 L0 800 Z" fill="url(#moonSurface)"/>
  <!-- craters -->
  <g fill="#7d8390" opacity="0.7">
    <ellipse cx="180" cy="640" rx="60" ry="20"/>
    <ellipse cx="180" cy="636" rx="52" ry="14" fill="#5f6573"/>
    <ellipse cx="1050" cy="680" rx="80" ry="26"/>
    <ellipse cx="1050" cy="675" rx="70" ry="18" fill="#5f6573"/>
    <ellipse cx="420" cy="720" rx="45" ry="15"/>
    <ellipse cx="420" cy="717" rx="38" ry="10" fill="#5f6573"/>
    <ellipse cx="820" cy="610" rx="35" ry="12"/>
    <ellipse cx="820" cy="607" rx="29" ry="8" fill="#5f6573"/>
  </g>
  <!-- small rocks -->
  <g fill="#8a909c">
    <ellipse cx="300" cy="600" rx="14" ry="8"/>
    <ellipse cx="700" cy="650" rx="18" ry="9"/>
    <ellipse cx="950" cy="600" rx="12" ry="7"/>
    <ellipse cx="560" cy="700" rx="16" ry="8"/>
  </g>

  <!-- Ground shadow under skateboard -->
  <ellipse cx="640" cy="600" rx="150" ry="26" fill="#000000" opacity="0.35"/>

  <!-- ===== ASTRONAUT CAT ON SKATEBOARD ===== -->
  <g transform="translate(640,470)" filter="url(#softShadow)">

    <!-- Skateboard deck -->
    <g transform="translate(0,150)">
      <path d="M-130 0 q-22 0 -22 -14 q0 -14 22 -14 l260 0 q22 0 22 14 q0 14 -22 14 z"
            fill="url(#boardGrad)" stroke="#8a2a50" stroke-width="2"/>
      <!-- grip tape stripes -->
      <rect x="-110" y="-12" width="220" height="4" rx="2" fill="#ffffff" opacity="0.25"/>
      <rect x="-110" y="-4" width="220" height="4" rx="2" fill="#2a2a2a" opacity="0.3"/>
      <!-- trucks + wheels -->
      <g fill="#c9d2dd" stroke="#8a93a2" stroke-width="1.5">
        <rect x="-70" y="-2" width="14" height="18" rx="3"/>
        <rect x="56" y="-2" width="14" height="18" rx="3"/>
      </g>
      <g fill="#3a3f4a" stroke="#1c2029" stroke-width="2">
        <circle cx="-63" cy="22" r="16"/>
        <circle cx="63" cy="22" r="16"/>
      </g>
      <g fill="#ffcf4d">
        <circle cx="-63" cy="22" r="6"/>
        <circle cx="63" cy="22" r="6"/>
      </g>
    </g>

    <!-- Legs (astronaut suit pants) -->
    <g fill="url(#suitGrad)" stroke="#aab3c2" stroke-width="2">
      <path d="M-30 60 q-25 30 -35 70 q-2 18 12 20 q14 2 18 -14 q10 -40 30 -60 z"/>
      <path d="M30 60 q25 30 35 70 q2 18 -12 20 q-14 2 -18 -14 q-10 -40 -30 -60 z"/>
    </g>
    <!-- Boots -->
    <g fill="#ff6b9d" stroke="#c93a70" stroke-width="2">
      <path d="M-58 140 q-14 4 -14 16 q0 12 16 12 l24 0 q10 0 10 -10 l0 -18 z"/>
      <path d="M58 140 q14 4 14 16 q0 12 -16 12 l-24 0 q-10 0 -10 -10 l0 -18 z"/>
    </g>

    <!-- Torso / suit body -->
    <path d="M-46 -10 q-12 30 -8 70 q2 20 54 20 q52 0 54 -20 q4 -40 -8 -70 q-20 -16 -46 -16 q-26 0 -46 16 z"
          fill="url(#suitGrad)" stroke="#aab3c2" stroke-width="2"/>
    <!-- chest control panel -->
    <rect x="-26" y="20" width="52" height="34" rx="6" fill="#2a3550" stroke="#4a6fa5" stroke-width="2"/>
    <circle cx="-12" cy="30" r="4" fill="#4be08a"/>
    <circle cx="0" cy="30" r="4" fill="#ffb347"/>
    <circle cx="12" cy="30" r="4" fill="#ff6b9d"/>
    <rect x="-18" y="40" width="36" height="6" rx="3" fill="#4a6fa5" opacity="0.7"/>

    <!-- Left arm (back, raised for balance) -->
    <g fill="url(#suitGrad)" stroke="#aab3c2" stroke-width="2">
      <path d="M-44 0 q-40 -20 -60 -55 q-6 -12 6 -16 q12 -4 16 8 q16 30 44 44 z"/>
    </g>
    <!-- glove -->
    <circle cx="-100" cy="-62" r="14" fill="#ff6b9d" stroke="#c93a70" stroke-width="2"/>

    <!-- Right arm (front, reaching forward) -->
    <g fill="url(#suitGrad)" stroke="#aab3c2" stroke-width="2">
      <path d="M44 0 q40 -10 62 -38 q8 -10 -2 -18 q-10 -8 -18 2 q-18 22 -48 30 z"/>
    </g>
    <circle cx="106" cy="-46" r="14" fill="#ff6b9d" stroke="#c93a70" stroke-width="2"/>

    <!-- Backpack life support -->
    <rect x="-40" y="-40" width="80" height="60" rx="12" fill="#c2c9d6" stroke="#9aa3b2" stroke-width="2" transform="translate(0,-6)"/>
    <rect x="-26" y="-30" width="52" height="14" rx="4" fill="#8a93a2"/>

    <!-- Helmet -->
    <g>
      <circle cx="0" cy="-70" r="58" fill="url(#suitGrad)" stroke="#aab3c2" stroke-width="3"/>
      <!-- visor -->
      <circle cx="0" cy="-70" r="46" fill="url(#visorGrad)" stroke="#2a3550" stroke-width="3"/>
      <!-- cat face inside visor -->
      <g>
        <!-- ears -->
        <path d="M-30 -92 l-8 -22 l20 8 z" fill="#f6c9a0" stroke="#d99a6c" stroke-width="1.5"/>
        <path d="M30 -92 l8 -22 l-20 8 z" fill="#f6c9a0" stroke="#d99a6c" stroke-width="1.5"/>
        <!-- head -->
        <ellipse cx="0" cy="-70" rx="30" ry="26" fill="#fbe0c4"/>
        <!-- eyes -->
        <ellipse cx="-12" cy="-74" rx="6" ry="8" fill="#2a2a2a"/>
        <ellipse cx="12" cy="-74" rx="6" ry="8" fill="#2a2a2a"/>
        <circle cx="-10" cy="-76" r="2" fill="#ffffff"/>
        <circle cx="14" cy="-76" r="2" fill="#ffffff"/>
        <!-- nose -->
        <path d="M-4 -64 l8 0 l-4 6 z" fill="#e88aa0"/>
        <!-- mouth -->
        <path d="M0 -58 q-6 6 -12 2 M0 -58 q6 6 12 2" stroke="#c97a5a" stroke-width="2" fill="none" stroke-linecap="round"/>
        <!-- whiskers -->
        <g stroke="#ffffff" stroke-width="1.4" opacity="0.85" stroke-linecap="round">
          <path d="M-22 -62 l-14 -3 M-22 -58 l-14 2"/>
          <path d="M22 -62 l14 -3 M22 -58 l14 2"/>
        </g>
      </g>
      <!-- visor shine -->
      <path d="M-30 -95 q20 -12 40 -4" stroke="#ffffff" stroke-width="4" fill="none" opacity="0.6" stroke-linecap="round"/>
      <!-- helmet antenna -->
      <line x1="40" y1="-110" x2="58" y2="-135" stroke="#aab3c2" stroke-width="3"/>
      <circle cx="60" cy="-138" r="6" fill="#ff6b9d" filter="url(#glow)"/>
    </g>

    <!-- Tail curling out of suit -->
    <path d="M40 70 q40 10 50 -20 q8 -25 -10 -30 q-16 -4 -18 12"
          fill="none" stroke="#fbe0c4" stroke-width="12" stroke-linecap="round"/>
  </g>

  <!-- Motion dust behind board -->
  <g fill="#cdd0d8" opacity="0.5">
    <circle cx="430" cy="600" r="10"/>
    <circle cx="400" cy="585" r="7"/>
    <circle cx="370" cy="605" r="5"/>
    <circle cx="455" cy="575" r="6"/>
  </g>

  <!-- Title -->
  <text x="640" y="760" text-anchor="middle" font-family="'Trebuchet MS', 'Segoe UI', sans-serif"
        font-size="30" font-weight="bold" fill="#e7ebf2" letter-spacing="2">
    MOON BOARDER 🐱🛹
  </text>
</svg>