DeepSeek V4.1 Flash 1017

by DeepSeekReasoningClean

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

How it went

Total time: 30.4 s
Cost: $0.0031
Output tokens: 5,016
Spent thinking: 0 tokens
Speed: 166.8 tok/s
Console errors: 0

First token after: 360 ms
First visible text after: 360 ms
Prompt tokens: 524
Code size: 12.8 KB
Finish reason: stop
Served by: InferenceNet
Model id: deepseek/deepseek-v4.1-flash-1017
Reasoning sent: {"effort":"none"}
Max output: 64,000 tokens
Generated: Nov 11, 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 · 277 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
  <defs>
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0a0a2e"/>
      <stop offset="40%" stop-color="#12123f"/>
      <stop offset="70%" stop-color="#1a1a4a"/>
      <stop offset="100%" stop-color="#252555"/>
    </linearGradient>
    <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1e2a3a"/>
      <stop offset="100%" stop-color="#0f1a24"/>
    </linearGradient>
    <linearGradient id="farHillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1a2540"/>
      <stop offset="100%" stop-color="#101a2e"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffee" stop-opacity="1"/>
      <stop offset="35%" stop-color="#ffffcc" stop-opacity="0.9"/>
      <stop offset="55%" stop-color="#ffffaa" stop-opacity="0.4"/>
      <stop offset="75%" stop-color="#ffff88" stop-opacity="0.12"/>
      <stop offset="100%" stop-color="#ffff66" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moonBody" cx="40%" cy="40%" r="55%">
      <stop offset="0%" stop-color="#fffef0"/>
      <stop offset="100%" stop-color="#e8e4c8"/>
    </radialGradient>
    <radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>
    <filter id="softGlow">
      <feGaussianBlur stdDeviation="2.5" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="moonFilter">
      <feGaussianBlur stdDeviation="8" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

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

  <!-- Far hills -->
  <path d="M0 420 Q100 340 200 380 Q300 320 420 370 Q520 310 620 360 Q720 330 800 380 L800 600 L0 600 Z" fill="url(#farHillGrad)" opacity="0.7"/>

  <!-- Mid hills -->
  <path d="M0 460 Q80 410 180 440 Q280 395 400 435 Q500 400 600 440 Q700 415 800 450 L800 600 L0 600 Z" fill="#16202e" opacity="0.8"/>

  <!-- Trees on far hill -->
  <g fill="#0e1820">
    <path d="M120 395 L135 340 L150 395 Z"/>
    <path d="M125 380 L135 330 L145 380 Z"/>
    <path d="M550 370 L565 310 L580 370 Z"/>
    <path d="M556 355 L565 300 L574 355 Z"/>
    <path d="M680 385 L692 340 L704 385 Z"/>
    <path d="M300 405 L310 365 L320 405 Z"/>
    <path d="M440 395 L452 350 L464 395 Z"/>
    <path d="M455 390 L452 360 L449 390 Z"/>
  </g>

  <!-- Main hill -->
  <path d="M0 520 Q150 450 350 470 Q500 485 600 460 Q700 440 800 470 L800 600 L0 600 Z" fill="url(#hillGrad)"/>

  <!-- Hill texture -->
  <path d="M0 540 Q200 480 400 500 Q600 515 800 490" fill="none" stroke="#2a3a4a" stroke-width="1" opacity="0.5"/>
  <path d="M0 560 Q200 510 400 525 Q600 535 800 510" fill="none" stroke="#2a3a4a" stroke-width="0.8" opacity="0.3"/>

  <!-- Stars - many twinkling -->
  <g filter="url(#softGlow)">
    <!-- Star 1 -->
    <circle cx="100" cy="80" r="2" fill="#ffffff">
      <animate attributeName="opacity" values="1;0.2;1" dur="3s" repeatCount="indefinite"/>
      <animate attributeName="r" values="2;1.2;2" dur="3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="200" cy="50" r="1.5" fill="#ddddee">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="2.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="300" cy="120" r="1.8" fill="#ffffff">
      <animate attributeName="opacity" values="0.8;0.2;0.8" dur="4s" repeatCount="indefinite"/>
      <animate attributeName="r" values="1.8;1;1.8" dur="4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="450" cy="70" r="2.2" fill="#eeeeff">
      <animate attributeName="opacity" values="1;0.3;1" dur="2.8s" repeatCount="indefinite"/>
    </circle>
    <circle cx="550" cy="40" r="1.5" fill="#ffffff">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="3.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="650" cy="90" r="1.8" fill="#ddddff">
      <animate attributeName="opacity" values="0.8;0.1;0.8" dur="2.2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="720" cy="140" r="2" fill="#ffffff">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="3.8s" repeatCount="indefinite"/>
    </circle>
    <circle cx="50" cy="180" r="1.2" fill="#ccccdd">
      <animate attributeName="opacity" values="0.6;1;0.6" dur="2.7s" repeatCount="indefinite"/>
    </circle>
    <circle cx="160" cy="230" r="1.5" fill="#ffffff">
      <animate attributeName="opacity" values="1;0.15;1" dur="3.2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="380" cy="200" r="1.3" fill="#eeeeff">
      <animate attributeName="opacity" values="0.7;0.1;0.7" dur="4.2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="500" cy="160" r="2" fill="#ffffff">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="2.4s" repeatCount="indefinite"/>
      <animate attributeName="r" values="2;1.2;2" dur="2.4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="620" cy="220" r="1.6" fill="#ddddef">
      <animate attributeName="opacity" values="0.9;0.3;0.9" dur="3.6s" repeatCount="indefinite"/>
    </circle>
    <circle cx="750" cy="250" r="1.4" fill="#ffffff">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="2.1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="80" cy="300" r="1" fill="#ccccdd">
      <animate attributeName="opacity" values="0.8;0.2;0.8" dur="3.3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="250" cy="280" r="1.2" fill="#eeeeff">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="2.9s" repeatCount="indefinite"/>
    </circle>
    <circle cx="700" cy="320" r="1.5" fill="#ffffff">
      <animate attributeName="opacity" values="1;0.2;1" dur="4.1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="350" cy="320" r="1" fill="#ddddff">
      <animate attributeName="opacity" values="0.3;0.9;0.3" dur="3.7s" repeatCount="indefinite"/>
    </circle>
    <circle cx="580" cy="300" r="1.3" fill="#ffffff">
      <animate attributeName="opacity" values="0.7;0.1;0.7" dur="2.6s" repeatCount="indefinite"/>
    </circle>
    <circle cx="130" cy="350" r="1.1" fill="#ccccdd">
      <animate attributeName="opacity" values="0.9;0.3;0.9" dur="3.1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="480" cy="250" r="1.7" fill="#ffffff">
      <animate attributeName="opacity" values="0.6;1;0.6" dur="2.3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="120" r="1" fill="#eeeeff">
      <animate attributeName="opacity" values="0.5;0.9;0.5" dur="3.4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="770" cy="60" r="1.3" fill="#ffffff">
      <animate attributeName="opacity" values="0.8;0.1;0.8" dur="2.5s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Moon glow (large soft halo) -->
  <circle cx="620" cy="150" r="120" fill="url(#moonGlow)">
    <animate attributeName="r" values="120;125;120" dur="6s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="0.8;1;0.8" dur="6s" repeatCount="indefinite"/>
  </circle>

  <!-- Moon body -->
  <circle cx="620" cy="150" r="45" fill="url(#moonBody)" filter="url(#moonFilter)">
    <animate attributeName="r" values="45;46;45" dur="6s" repeatCount="indefinite"/>
  </circle>

  <!-- Moon craters -->
  <circle cx="608" cy="138" r="8" fill="#ddd8b8" opacity="0.5"/>
  <circle cx="635" cy="160" r="6" fill="#ddd8b8" opacity="0.4"/>
  <circle cx="615" cy="165" r="4" fill="#ddd8b8" opacity="0.35"/>
  <circle cx="632" cy="130" r="3.5" fill="#ddd8b8" opacity="0.3"/>

  <!-- Shooting star: crosses every 4 seconds -->
  <g opacity="0">
    <animate attributeName="opacity" values="0;0;1;1;0;0" dur="4s" begin="1.5s" repeatCount="indefinite" keyTimes="0;0.05;0.1;0.35;0.45;1"/>
    <line x1="0" y1="0" x2="-80" y2="-15" stroke="#ffffff" stroke-width="2" stroke-linecap="round">
      <animate attributeName="x1" values="150;450" dur="4s" begin="1.5s" repeatCount="indefinite"/>
      <animate attributeName="y1" values="60;110" dur="4s" begin="1.5s" repeatCount="indefinite"/>
      <animate attributeName="x2" values="70;370" dur="4s" begin="1.5s" repeatCount="indefinite"/>
      <animate attributeName="y2" values="45;95" dur="4s" begin="1.5s" repeatCount="indefinite"/>
      <animate attributeName="stroke-opacity" values="1;0.8;0" dur="4s" begin="1.5s" repeatCount="indefinite"/>
    </line>
    <circle r="3" fill="#ffffff">
      <animate attributeName="cx" values="150;450" dur="4s" begin="1.5s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="60;110" dur="4s" begin="1.5s" repeatCount="indefinite"/>
    </circle>
    <circle r="6" fill="#ffffff" opacity="0.4">
      <animate attributeName="cx" values="150;450" dur="4s" begin="1.5s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="60;110" dur="4s" begin="1.5s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Distant background trees on hill -->
  <g fill="#0b1520">
    <path d="M180 470 L190 430 L200 470 Z"/>
    <path d="M185 458 L190 425 L195 458 Z"/>
    <path d="M650 450 L662 400 L674 450 Z"/>
    <path d="M655 435 L662 395 L669 435 Z"/>
    <path d="M720 460 L730 420 L740 460 Z"/>
  </g>

  <!-- Fox sitting on hill -->
  <g transform="translate(400, 440)">
    <!-- Tail swaying -->
    <g>
      <animateTransform attributeName="transform" type="rotate" values="-5 0 30;5 0 30;-5 0 30" dur="4s" repeatCount="indefinite"/>
      <!-- Bushy tail -->
      <path d="M-10 30 Q-40 30 -55 10 Q-70 -10 -60 -25 Q-50 -38 -38 -30 Q-25 -20 -20 0 Q-15 15 -10 30 Z" fill="#d4541e"/>
      <!-- Tail white tip -->
      <path d="M-60 -25 Q-50 -38 -38 -30 Q-32 -25 -35 -18 Q-42 -22 -52 -18 Q-58 -20 -60 -25 Z" fill="#f0e6d0"/>
      <!-- Tail darker stripe -->
      <path d="M-30 15 Q-45 5 -50 -10" fill="none" stroke="#b8431a" stroke-width="3" opacity="0.5"/>
    </g>

    <!-- Back leg -->
    <ellipse cx="-5" cy="35" rx="14" ry="10" fill="#c04818"/>

    <!-- Body -->
    <path d="M-15 10 Q-20 -15 -10 -30 Q5 -40 20 -35 Q32 -28 30 -10 Q28 10 22 30 Q15 42 -5 40 Q-15 35 -15 10 Z" fill="#d4541e"/>

    <!-- Chest/belly lighter -->
    <path d="M5 -20 Q15 -25 22 -18 Q26 -5 23 15 Q20 30 10 35 Q5 30 3 15 Q2 0 5 -20 Z" fill="#e8a050" opacity="0.7"/>

    <!-- Front leg -->
    <path d="M12 25 L14 42 L20 42 L18 25 Z" fill="#c04818"/>

    <!-- Head -->
    <g>
      <!-- Head base -->
      <ellipse cx="28" cy="-38" rx="18" ry="15" fill="#d4541e"/>

      <!-- Left ear -->
      <path d="M15 -48 L10 -72 L22 -52 Z" fill="#d4541e"/>
      <path d="M16 -50 L13 -66 L20 -53 Z" fill="#f0a050" opacity="0.7"/>
      <path d="M15 -48 L10 -72 L22 -52 Z" fill="none" stroke="#a03a10" stroke-width="1.5"/>

      <!-- Right ear -->
      <path d="M38 -48 L44 -72 L46 -50 Z" fill="#d4541e"/>
      <path d="M39 -50 L43 -66 L44 -52 Z" fill="#f0a050" opacity="0.7"/>
      <path d="M38 -48 L44 -72 L46 -50 Z" fill="none" stroke="#a03a10" stroke-width="1.5"/>

      <!-- Snout -->
      <path d="M28 -30 Q38 -28 44 -24 Q42 -20 36 -20 Q30 -20 26 -25 Z" fill="#e8a050"/>
      <path d="M28 -30 Q35 -28 40 -25 Q38 -22 34 -22 Q30 -22 27 -26 Z" fill="#f5c080"/>

      <!-- Nose -->
      <ellipse cx="43" cy="-24" rx="3" ry="2.5" fill="#1a1010"/>

      <!-- Eye -->
      <ellipse cx="34" cy="-38" rx="3.5" ry="3" fill="#1a1010"/>
      <circle cx="35" cy="-39" r="1" fill="#ffffff"/>

      <!-- Eye glow/reflection -->
      <circle cx="33" cy="-37" r="0.8" fill="#ffee88" opacity="0.6"/>

      <!-- Cheek fur -->
      <path d="M15 -35 Q12 -30 16 -28 Q20 -26 22 -30 Q20 -34 15 -35 Z" fill="#f0e6d0"/>
    </g>
  </g>

  <!-- Ground details near fox -->
  <path d="M350 505 Q380 495 420 500 Q450 505 480 498" fill="none" stroke="#2a3a4a" stroke-width="0.8" opacity="0.4"/>

  <!-- Grass blades -->
  <g stroke="#1a3040" stroke-width="1.5" fill="none" opacity="0.6">
    <path d="M340 500 Q338 490 342 482"/>
    <path d="M345 502 Q348 492 344 484"/>
    <path d="M460 492 Q462 482 458 474"/>
    <path d="M465 494 Q468 484 464 476"/>
    <path d="M300 510 Q298 500 302 492"/>
    <path d="M500 488 Q502 478 498 470"/>
  </g>

  <!-- Fireflies/small particles near hill -->
  <circle cx="340" cy="460" r="1.5" fill="#aacc66" opacity="0">
    <animate attributeName="opacity" values="0;0.8;0" dur="5s" repeatCount="indefinite"/>
    <animate attributeName="cy" values="460;450;460" dur="5s" repeatCount="indefinite"/>
  </circle>
  <circle cx="480" cy="470" r="1.5" fill="#aacc66" opacity="0">
    <animate attributeName="opacity" values="0;0.7;0" dur="4.5s" begin="2s" repeatCount="indefinite"/>
    <animate attributeName="cy" values="470;458;470" dur="4.5s" begin="2s" repeatCount="indefinite"/>
  </circle>
</svg>