DeepSeek V4 Flash 0423

by DeepSeekreasoning defaultClean

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

How it went

Total time: 22.0 s
Cost: $0.0007
Output tokens: 3,980
Spent thinking: 0 tokens
Speed: 186.6 tok/s
Console errors: 0

First token after: 666 ms
First visible text after: 666 ms
Prompt tokens: 523
Code size: 9.6 KB
Finish reason: stop
Served by: Wafer
Model id: deepseek/deepseek-v4-flash
Reasoning sent: model default
Max output: 393,216 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 · 247 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <!-- Night sky gradient -->
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0a0e2a"/>
      <stop offset="50%" stop-color="#1a1e4a"/>
      <stop offset="100%" stop-color="#2a2e5a"/>
    </linearGradient>

    <!-- Moon glow -->
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fffde8" stop-opacity="1"/>
      <stop offset="60%" stop-color="#fffde8" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#fffde8" stop-opacity="0"/>
    </radialGradient>

    <!-- Fox body gradient -->
    <linearGradient id="foxBody" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#d45a1a"/>
      <stop offset="100%" stop-color="#b84a10"/>
    </linearGradient>

    <!-- Hill gradient -->
    <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#2a5a2a"/>
      <stop offset="100%" stop-color="#1a3a1a"/>
    </linearGradient>

    <!-- Distant hill gradient -->
    <linearGradient id="distantHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1a3a3a"/>
      <stop offset="100%" stop-color="#0e2a2a"/>
    </linearGradient>

    <!-- Shooting star -->
    <path id="shootingStar" d="M0,0 L4,-1 L0,1 Z" fill="#fffde8"/>

    <!-- Twinkling star filter -->
    <filter id="starGlow">
      <feGaussianBlur stdDeviation="1" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

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

  <!-- Stars batch 1: twinkling -->
  <g filter="url(#starGlow)">
    <circle cx="100" cy="80" r="1.5" fill="#fff" opacity="0.9">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="250" cy="120" r="1.5" fill="#fff" opacity="0.7">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="350" cy="50" r="2" fill="#fff" opacity="0.8">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="2.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="500" cy="90" r="1.5" fill="#fff" opacity="0.6">
      <animate attributeName="opacity" values="0.3;0.9;0.3" dur="1.8s" repeatCount="indefinite"/>
    </circle>
    <circle cx="620" cy="60" r="2" fill="#fff" opacity="0.8">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="2.2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="720" cy="130" r="1.5" fill="#fff" opacity="0.7">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="3.1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="50" cy="200" r="1" fill="#fff" opacity="0.5">
      <animate attributeName="opacity" values="0.2;0.8;0.2" dur="2.7s" repeatCount="indefinite"/>
    </circle>
    <circle cx="180" cy="180" r="1.2" fill="#fff" opacity="0.6">
      <animate attributeName="opacity" values="0.3;0.9;0.3" dur="1.9s" repeatCount="indefinite"/>
    </circle>
    <circle cx="450" cy="160" r="1" fill="#fff" opacity="0.5">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="3.3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="680" cy="180" r="1.2" fill="#fff" opacity="0.7">
      <animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="300" cy="200" r="1" fill="#fff" opacity="0.5">
      <animate attributeName="opacity" values="0.2;0.7;0.2" dur="2.9s" repeatCount="indefinite"/>
    </circle>
    <circle cx="560" cy="200" r="1.3" fill="#fff" opacity="0.6">
      <animate attributeName="opacity" values="0.3;0.9;0.3" dur="2.4s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Additional static stars -->
  <g fill="#fff" opacity="0.6">
    <circle cx="150" cy="140" r="1"/>
    <circle cx="400" cy="100" r="0.8"/>
    <circle cx="550" cy="150" r="1"/>
    <circle cx="75" cy="250" r="0.8"/>
    <circle cx="750" cy="80" r="1"/>
    <circle cx="320" cy="280" r="0.8"/>
    <circle cx="600" cy="250" r="0.8"/>
  </g>

  <!-- Moon glow effect -->
  <circle cx="620" cy="120" r="80" fill="url(#moonGlow)" opacity="0.3"/>
  <circle cx="620" cy="120" r="50" fill="url(#moonGlow)" opacity="0.5"/>

  <!-- Moon -->
  <circle cx="620" cy="120" r="35" fill="#fffde8"/>
  <circle cx="610" cy="115" r="35" fill="#0a0e2a" opacity="0.15"/>
  <!-- Moon craters -->
  <circle cx="610" cy="110" r="6" fill="#e8e0c0" opacity="0.3"/>
  <circle cx="628" cy="125" r="4" fill="#e8e0c0" opacity="0.25"/>
  <circle cx="615" cy="130" r="3" fill="#e8e0c0" opacity="0.2"/>

  <!-- Distant hills -->
  <path d="M0,450 Q100,380 200,420 Q300,360 400,410 Q500,370 600,400 Q700,360 800,420 L800,600 L0,600 Z" fill="url(#distantHill)" opacity="0.6"/>

  <!-- Background trees -->
  <g fill="#1a3a1a">
    <path d="M80,440 L90,380 L100,440 Z"/>
    <path d="M120,450 L130,400 L140,450 Z"/>
    <path d="M650,430 L660,370 L670,430 Z"/>
    <path d="M700,440 L708,390 L716,440 Z"/>
    <path d="M180,460 L188,410 L196,460 Z"/>
    <path d="M580,440 L588,395 L596,440 Z"/>
  </g>

  <!-- Main hill -->
  <path d="M-50,600 Q200,380 400,430 Q550,460 850,600 Z" fill="url(#hillGrad)"/>

  <!-- Grass tufts on hill -->
  <g stroke="#3a7a3a" stroke-width="1.5" fill="none" opacity="0.6">
    <path d="M250,480 Q252,470 250,460"/>
    <path d="M255,480 Q258,468 256,458"/>
    <path d="M350,465 Q352,455 350,445"/>
    <path d="M355,465 Q358,453 356,443"/>
    <path d="M300,475 Q302,465 300,455"/>
    <path d="M450,470 Q452,460 450,450"/>
  </g>

  <!-- FOX -->
  <g transform="translate(330, 380)">
    <!-- Tail -->
    <g>
      <animateTransform attributeName="transform" type="rotate" values="-5,20,50;5,20,50;-5,20,50" dur="3s" repeatCount="indefinite"/>
      <!-- Bushy tail -->
      <path d="M20,50 Q-10,30 -20,10 Q-30,-5 -15,-10 Q-5,-8 0,0 Q10,20 20,50 Z" fill="#d45a1a"/>
      <!-- White tail tip -->
      <path d="M-20,10 Q-30,-5 -15,-10 Q-5,-8 0,0 Q-5,5 -10,8 Q-15,5 -20,10 Z" fill="#f5e8d8"/>
    </g>

    <!-- Body -->
    <ellipse cx="30" cy="40" rx="30" ry="22" fill="url(#foxBody)"/>

    <!-- Chest / belly white -->
    <ellipse cx="38" cy="45" rx="15" ry="16" fill="#f5e8d8"/>

    <!-- Front legs -->
    <rect x="15" y="55" width="6" height="20" rx="3" fill="#b84a10"/>
    <rect x="28" y="55" width="6" height="20" rx="3" fill="#d45a1a"/>
    <!-- Paws -->
    <ellipse cx="18" cy="76" rx="4" ry="3" fill="#2a1a0a"/>
    <ellipse cx="31" cy="76" rx="4" ry="3" fill="#2a1a0a"/>

    <!-- Haunches / back leg -->
    <ellipse cx="10" cy="50" rx="12" ry="10" fill="#b84a10"/>
    <path d="M5,55 L3,75 L10,75 L12,55 Z" fill="#b84a10"/>
    <ellipse cx="6" cy="76" rx="4" ry="3" fill="#2a1a0a"/>

    <!-- Neck -->
    <ellipse cx="45" cy="28" rx="12" ry="14" fill="#d45a1a"/>

    <!-- Head -->
    <ellipse cx="55" cy="18" rx="20" ry="18" fill="#d45a1a"/>

    <!-- Ears -->
    <path d="M42,5 L38,-15 L48,2 Z" fill="#d45a1a"/>
    <path d="M44,3 L40,-11 L48,2 Z" fill="#f5e8d8" opacity="0.5"/>
    <path d="M60,0 L65,-18 L68,2 Z" fill="#d45a1a"/>
    <path d="M62,-1 L65,-14 L67,2 Z" fill="#f5e8d8" opacity="0.5"/>

    <!-- Inner ear -->
    <path d="M43,3 L40,-9 L47,2 Z" fill="#f5d0b0"/>
    <path d="M61,0 L64,-13 L67,2 Z" fill="#f5d0b0"/>

    <!-- Snout -->
    <path d="M65,22 Q80,25 82,28 Q80,32 65,30 Z" fill="#f5e8d8"/>

    <!-- Nose -->
    <ellipse cx="82" cy="28" rx="4" ry="3" fill="#1a1a1a"/>

    <!-- Eyes -->
    <ellipse cx="58" cy="18" rx="3" ry="3.5" fill="#1a1a1a"/>
    <ellipse cx="68" cy="17" rx="2.5" ry="3" fill="#1a1a1a"/>
    <!-- Eye shine -->
    <circle cx="59" cy="17" r="1" fill="#fff" opacity="0.8"/>
    <circle cx="69" cy="16" r="0.8" fill="#fff" opacity="0.8"/>

    <!-- Whiskers -->
    <g stroke="#f5e8d8" stroke-width="0.5" opacity="0.6">
      <line x1="78" y1="25" x2="92" y2="22"/>
      <line x1="78" y1="28" x2="93" y2="29"/>
      <line x1="78" y1="31" x2="91" y2="34"/>
    </g>

    <!-- Mouth line -->
    <path d="M78,30 Q75,33 72,31" stroke="#1a1a1a" stroke-width="0.8" fill="none"/>
  </g>

  <!-- Shooting star animation -->
  <g>
    <use href="#shootingStar" x="0" y="0">
      <animateMotion dur="4s" repeatCount="indefinite" begin="2s"
        path="M0,0 Q200,50 400,100" keyPoints="0;0.3;0.7;1" keyTimes="0;0.3;0.6;1" calcMode="linear"/>
      <animate attributeName="opacity" values="1;1;0" dur="4s" repeatCount="indefinite" begin="2s"/>
    </use>
  </g>

  <!-- Shooting star trail -->
  <g>
    <line x1="0" y1="0" x2="-30" y2="-5" stroke="#fffde8" stroke-width="1" opacity="0.6">
      <animateMotion dur="4s" repeatCount="indefinite" begin="2s"
        path="M0,0 Q200,50 400,100"/>
      <animate attributeName="opacity" values="0.8;0.8;0" dur="4s" repeatCount="indefinite" begin="2s"/>
    </line>
    <line x1="0" y1="0" x2="-50" y2="-10" stroke="#fffde8" stroke-width="0.5" opacity="0.3">
      <animateMotion dur="4s" repeatCount="indefinite" begin="2s"
        path="M0,0 Q200,50 400,100"/>
      <animate attributeName="opacity" values="0.5;0.5;0" dur="4s" repeatCount="indefinite" begin="2s"/>
    </line>
  </g>

  <!-- Foreground grass -->
  <g fill="#1a4a1a" opacity="0.8">
    <path d="M0,580 Q10,550 20,580 Z"/>
    <path d="M30,590 Q38,560 46,590 Z"/>
    <path d="M750,570 Q758,540 766,570 Z"/>
    <path d="M780,585 Q788,555 796,585 Z"/>
  </g>

  <!-- Foreground grass blades -->
  <g stroke="#2a6a2a" stroke-width="2" fill="none" opacity="0.5">
    <path d="M50,590 Q55,570 52,555"/>
    <path d="M55,590 Q60,568 58,553"/>
    <path d="M720,580 Q725,560 722,545"/>
    <path d="M725,580 Q730,558 728,543"/>
  </g>
</svg>