Qwen3 Coder Next

by Qwenreasoning defaultClean

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

How it went

Total time: 1 min 8 s
Cost: $0.0032
Output tokens: 3,943
Spent thinking: 0 tokens
Speed: 58.8 tok/s
Console errors: 0

First token after: 615 ms
First visible text after: 615 ms
Prompt tokens: 529
Code size: 8.5 KB
Finish reason: stop
Served by: Parasail
Model id: qwen/qwen3-coder-next
Reasoning sent: model default
Max output: 235,929 tokens
Generated: Nov 13, 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 · 190 lines

Download

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" width="800" height="600">
  <defs>
    <!-- Background Gradient: Night Sky -->
    <linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#020b1c" />
      <stop offset="100%" stop-color="#1a2b4d" />
    </linearGradient>

    <!-- Moon Glow Gradient -->
    <radialGradient id="moonGlow" cx="600" cy="150" r="80">
      <stop offset="0%" stop-color="#fefefe" stop-opacity="0.8" />
      <stop offset="20%" stop-color="#e8f4ff" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#020b1c" stop-opacity="0" />
    </radialGradient>

    <!-- Fox Fur Gradient -->
    <linearGradient id="foxFur" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#d67d36" />
      <stop offset="100%" stop-color="#b05a1d" />
    </linearGradient>

    <!-- Fox White Tip Gradient -->
    <linearGradient id="whiteTip" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#e0e0e0" />
    </linearGradient>

    <!-- Grass Hill Gradient -->
    <linearGradient id="grassHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1e3c2e" />
      <stop offset="100%" stop-color="#0d241b" />
    </linearGradient>

    <!-- Tree Shadow Gradient -->
    <linearGradient id="treeShadow" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0a1810" />
      <stop offset="100%" stop-color="#050c08" />
    </linearGradient>

    <!-- Star Twinkle Animation -->
    <animateTransform id="tailAnim" attributeName="transform" attributeType="XML"
      type="rotate" dur="3s" repeatCount="indefinite" from="-10 280 420" to="10 280 420" 
      keyTimes="0; 0.5; 1" values="-5 280 420; 5 280 420; -5 280 420" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" />

    <!-- Moon Pulse Animation -->
    <animate attributeName="r" dur="6s" repeatCount="indefinite" values="55; 60; 55" />
    
    <!-- Shooting Star Animation -->
    <g id="shootingStar">
      <path d="M0 0 L-80 -80" stroke="#fefefe" stroke-width="2" stroke-linecap="round">
        <animate attributeName="opacity" dur="1.5s" repeatCount="indefinite" values="0;1;0" keyTimes="0;0.2;1" />
        <animateTransform attributeName="transform" type="translate" dur="4s" repeatCount="indefinite" 
          values="700,50; 200,200; 700,50" keyTimes="0;0.6;1" keySplines="0.25 0 0.75 1" />
      </path>
      <circle cx="-80" cy="-80" r="3" fill="white">
         <animate attributeName="opacity" dur="1.5s" repeatCount="indefinite" values="0;1;0" keyTimes="0;0.2;1" />
         <animateTransform attributeName="transform" type="translate" dur="4s" repeatCount="indefinite" 
          values="700,50; 200,200; 700,50" keyTimes="0;0.6;1" keySplines="0.25 0 0.75 1" />
      </circle>
      <path d="M-80 -80 L-120 -120" stroke="white" stroke-width="1" opacity="0.6">
        <animate attributeName="opacity" dur="0.5s" repeatCount="indefinite" values="0.6;0" />
        <animateTransform attributeName="transform" type="translate" dur="4s" repeatCount="indefinite" 
          values="700,50; 200,200; 700,50" keyTimes="0;0.6;1" keySplines="0.25 0 0.75 1" />
      </path>
    </g>
  </defs>

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

  <!-- Distant Hills (Back Layer) -->
  <path d="M0,450 C150,350 300,480 450,380 C600,280 700,450 800,380 L800,600 L0,600 Z" fill="#13261a" />

  <!-- Stars -->
  <g fill="#ffffff" opacity="0.8">
    <circle cx="50" cy="50" r="1.5">
      <animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="0.3;1;0.3" />
    </circle>
    <circle cx="150" cy="120" r="1">
      <animate attributeName="opacity" dur="3s" repeatCount="indefinite" values="0.4;1;0.4" begin="0.5s" />
    </circle>
    <circle cx="250" cy="80" r="1.2">
      <animate attributeName="opacity" dur="1.8s" repeatCount="indefinite" values="0.2;1;0.2" begin="1s" />
    </circle>
    <circle cx="350" cy="150" r="1">
      <animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.5;0.8;0.5" />
    </circle>
    <circle cx="700" cy="40" r="1.5">
      <animate attributeName="opacity" dur="2.5s" repeatCount="indefinite" values="0.3;1;0.3" begin="0.5s" />
    </circle>
    <circle cx="650" cy="200" r="1">
      <animate attributeName="opacity" dur="3.5s" repeatCount="indefinite" values="0.6;0.9;0.6" begin="1.5s" />
    </circle>
    <circle cx="100" cy="300" r="1.2">
      <animate attributeName="opacity" dur="2.8s" repeatCount="indefinite" values="0.4;1;0.4" />
    </circle>
    <circle cx="400" cy="50" r="1">
      <animate attributeName="opacity" dur="3.2s" repeatCount="indefinite" values="0.5;0.8;0.5" begin="1s" />
    </circle>
    <circle cx="750" cy="400" r="1.3">
      <animate attributeName="opacity" dur="2.2s" repeatCount="indefinite" values="0.3;1;0.3" begin="0.5s" />
    </circle>
    <circle cx="550" cy="150" r="1">
      <animate attributeName="opacity" dur="2.5s" repeatCount="indefinite" values="0.4;1;0.4" begin="0.2s" />
    </circle>
  </g>

  <!-- Moon with Glow -->
  <circle cx="600" cy="150" r="55" fill="url(#moonGlow)" />
  <circle cx="600" cy="150" r="50" fill="#f0f0f0" stroke="#ddd" stroke-width="1" />

  <!-- Shooting Star -->
  <use href="#shootingStar" />

  <!-- Main Hill -->
  <path d="M0,600 C150,550 300,580 450,520 C600,460 700,550 800,500 L800,600 L0,600 Z" fill="url(#grassHill)" />

  <!-- Trees (Silhouettes) -->
  <g fill="url(#treeShadow)">
    <path d="M100,580 L130,480 L160,580 Z" />
    <path d="M115,580 L130,530 L145,580 Z" />
    
    <path d="M700,580 L730,470 L760,580 Z" />
    <path d="M715,580 L730,520 L745,580 Z" />
    
    <path d="M550,580 L570,490 L590,580 Z" />
    
    <path d="M400,580 L420,500 L440,580 Z" />
    <path d="M410,580 L420,540 L430,580 Z" />
  </g>

  <!-- Fox Group -->
  <g transform="translate(0,0)">
    <!-- Back Legs -->
    <rect x="240" y="460" width="20" height="60" fill="#8d4616" rx="10" />
    <rect x="300" y="460" width="20" height="60" fill="#8d4616" rx="10" />
    
    <!-- Body -->
    <ellipse cx="280" cy="440" rx="80" ry="50" fill="url(#foxFur)" />
    
    <!-- Belly -->
    <ellipse cx="280" cy="460" rx="40" ry="25" fill="#e8a65c" opacity="0.8" />
    
    <!-- Front Legs -->
    <rect x="230" y="460" width="20" height="60" fill="#8d4616" rx="10" />
    <rect x="290" y="460" width="20" height="60" fill="#8d4616" rx="10" />

    <!-- Tail (Animated) -->
    <g id="tail">
      <g transform="rotate(-5 280 420)">
        <path d="M280 420 C250 400 200 380 220 320 C230 300 250 300 270 330 L280 360 Z" fill="url(#foxFur)" />
        <path d="M220 320 C210 310 200 310 190 330 C200 360 230 380 220 320 Z" fill="#5a3315" opacity="0.2" />
        <!-- White Tip -->
        <path d="M215 325 C210 320 200 320 195 330 C200 350 220 360 225 340 C225 335 220 330 215 325 Z" fill="url(#whiteTip)" />
        <!-- Tail Tip Highlight -->
        <path d="M200 330 C195 330 195 335 200 338" stroke="white" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.5" />
      </g>
      <animateTransform attributeName="transform" attributeType="XML"
        type="rotate" dur="3s" repeatCount="indefinite" from="-5 280 420" to="5 280 420" 
        keyTimes="0; 0.5; 1" values="-5 280 420; 5 280 420; -5 280 420" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" />
    </g>

    <!-- Neck and Head -->
    <path d="M300 400 C300 350 290 320 260 300 C230 280 210 300 210 340 C210 380 250 400 280 400 Z" fill="url(#foxFur)" />
    
    <!-- Snout -->
    <path d="M230 330 C220 350 220 390 250 390 C280 390 280 350 270 330 C260 320 240 320 230 330 Z" fill="#e8a65c" />
    <path d="M250 360 C245 355 240 355 235 360" stroke="#5a3315" stroke-width="1.5" fill="none" />
    <circle cx="245" cy="345" r="3" fill="#1a1a1a" />
    
    <!-- Ears -->
    <path d="M230 290 L220 240 L260 270 Z" fill="url(#foxFur)" />
    <path d="M225 245 L230 265 L240 255 Z" fill="#ff8c42" />
    
    <path d="M290 290 L300 240 L260 270 Z" fill="url(#foxFur)" />
    <path d="M295 245 L290 265 L280 255 Z" fill="#ff8c42" />
    
    <!-- Face Details -->
    <circle cx="255" cy="310" r="4" fill="#1a1a1a" />
    <circle cx="265" cy="310" r="4" fill="#1a1a1a" />
    <path d="M260 320 C260 325 255 325 250 320" stroke="none" />
    <path d="M250 320 Q260 330 270 320" stroke="#5a3315" stroke-width="2" fill="none" />
    <path d="M270 320 Q260 330 250 320" stroke="none" />
    
    <!-- White Eye Patches -->
    <ellipse cx="255" cy="310" rx="4" ry="5" fill="white" opacity="0.6" />
    <ellipse cx="265" cy="310" rx="4" ry="5" fill="white" opacity="0.6" />

  </g>
</svg>