Models 44
Claude Haiku 4.5AnthropicClaude Haiku 5.5AnthropicClaude Opus 5.5AnthropicClaude Sonnet 5.5AnthropicNorth Mini Code (free)CohereDeepSeek V4 Flash 0423DeepSeekDeepSeek V4 Pro 0813DeepSeekDeepSeek V4.1 Flash 1017DeepSeekDots3-Note Preview (free)Dots StudioGemini 3.1 Flash LiteGoogleGemini 3.8 FlashGoogleGemini 4 ArgonGoogleGemini 4 HydrogenGoogleGemma 4 31BGoogleLFM2.5-2.6B (free)LiquidAILFM3-1.7B (free)LiquidAIMuse EmberMetaMiniMax M3MiniMaxMiniMax M3.1 FlashMiniMaxMinistral 3 14B 2512MistralMistral Large 4MistralMistral Small 4MistralKimi K3.1 ProMoonshotAINemotron 3 Nano Omni (free)NVIDIANemotron 3 SuperNVIDIANemotron 3 Ultra (free)NVIDIANemotron 3.5 Lightning (free)NVIDIANemotron 3.5 Super VL (free)NVIDIAGPT-5 NanoOpenAIGPT-6 LunaOpenAIGPT-6 Luna ProOpenAIGPT-6.1 SolOpenAIGPT-6.1 TerraOpenAIgpt-oss-120bOpenAIQwen3 Coder NextQwenQwen3.8 FlashQwenQwen3.8 Max (0902)QwenFlint (free)RecursiveGrok 4.7SpaceXAIMiMo-V2.6-FlashXiaomiMiMo-V2.6-ProXiaomiXing4.0 29B A4B (free)XingChenGLM 5.3Z.aiGLM 5.3 FlashZ.ai
Fox under the moon

Dots3-Note Preview (free)

by Dots StudioReasoningClean
Open in new window

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

How it went

Total time
32.3 s
Cost
$0
Output tokens
3,171
Spent thinking
0 tokens
Speed
100.8 tok/s
Console errors
0
First token after
876 ms
First visible text after
876 ms
Prompt tokens
526
Code size
7.3 KB
Finish reason
stop
Served by
AtlasCloud
Model id
dots-studio/dots-3-note-preview:free
Reasoning sent
{"effort":"none"}
Max output
32,000 tokens
Generated
Nov 9, 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 · 167 lines

Download
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
  <defs>
    <!-- Sky gradient -->
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0f0c29"/>
      <stop offset="50%" stop-color="#302b63"/>
      <stop offset="100%" stop-color="#24243e"/>
    </linearGradient>

    <!-- Moon glow -->
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fffde7" stop-opacity="0.9"/>
      <stop offset="40%" stop-color="#fffde7" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#fffde7" stop-opacity="0"/>
    </radialGradient>

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

    <!-- Tail gradient -->
    <linearGradient id="tailGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#e07a2f"/>
      <stop offset="80%" stop-color="#e07a2f"/>
      <stop offset="100%" stop-color="#ffffff"/>
    </linearGradient>

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

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

    <!-- Star symbol for reuse -->
    <symbol id="star" viewBox="-5 -5 10 10">
      <path d="M0,-5 L1.5,-1.5 L5,0 L1.5,1.5 L0,5 L-1.5,1.5 L-5,0 L-1.5,-1.5 Z" fill="#ffffff"/>
    </symbol>
  </defs>

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

  <!-- Distant hills -->
  <path d="M0,450 Q200,380 400,440 Q600,500 800,420 L800,600 L0,600 Z" fill="url(#distantHill)" opacity="0.7"/>
  <path d="M0,480 Q300,420 600,470 Q700,490 800,460 L800,600 L0,600 Z" fill="url(#distantHill)" opacity="0.5"/>

  <!-- Background trees (silhouettes) -->
  <g fill="#1a2b3c" opacity="0.6">
    <path d="M50,440 L60,420 L70,440 L75,410 L85,435 L95,405 L105,440 Z"/>
    <path d="M120,450 L130,425 L140,450 L150,415 L160,445 L170,410 L180,450 Z"/>
    <path d="M650,445 L660,420 L670,445 L680,410 L690,440 L700,405 L710,445 Z"/>
    <path d="M720,460 L730,435 L740,460 L750,425 L760,455 L770,420 L780,460 Z"/>
  </g>

  <!-- Moon with glow -->
  <g>
    <circle cx="650" cy="180" r="80" fill="url(#moonGlow)"/>
    <circle cx="650" cy="180" r="50" fill="#fffde7"/>
    <!-- Moon craters -->
    <circle cx="635" cy="165" r="8" fill="#e8e4c9"/>
    <circle cx="665" cy="195" r="6" fill="#e8e4c9"/>
    <circle cx="650" cy="160" r="4" fill="#e8e4c9"/>
    <circle cx="670" cy="175" r="5" fill="#e8e4c9"/>
  </g>

  <!-- Stars -->
  <g>
    <use href="#star" x="100" y="80" width="8" height="8">
      <animate attributeName="opacity" values="0.2;1;0.2" dur="3s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="200" y="120" width="6" height="6">
      <animate attributeName="opacity" values="1;0.3;1" dur="4s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="300" y="60" width="7" height="7">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="2.5s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="400" y="140" width="5" height="5">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="3.5s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="500" y="90" width="6" height="6">
      <animate attributeName="opacity" values="1;0.4;1" dur="2.8s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="150" y="200" width="4" height="4">
      <animate attributeName="opacity" values="0.2;1;0.2" dur="3.2s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="250" y="250" width="5" height="5">
      <animate attributeName="opacity" values="0.6;1;0.6" dur="2.7s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="350" y="180" width="6" height="6">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="3.8s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="450" y="240" width="4" height="4">
      <animate attributeName="opacity" values="0.7;1;0.7" dur="2.3s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="550" y="200" width="5" height="5">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="3.1s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="700" y="100" width="6" height="6">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="2.9s" repeatCount="indefinite"/>
    </use>
    <use href="#star" x="750" y="220" width="4" height="4">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="3.4s" repeatCount="indefinite"/>
    </use>
  </g>

  <!-- Shooting star -->
  <g>
    <line x1="0" y1="50" x2="30" y2="80" stroke="#ffffff" stroke-width="2" opacity="0">
      <animate attributeName="opacity" values="0;1;0" dur="4s" begin="1s" repeatCount="indefinite"/>
      <animateTransform attributeName="transform" type="translate" from="0,0" to="700,500" dur="4s" begin="1s" repeatCount="indefinite"/>
    </line>
    <circle cx="0" cy="0" r="2" fill="#ffffff" opacity="0">
      <animate attributeName="opacity" values="0;1;0" dur="4s" begin="1s" repeatCount="indefinite"/>
      <animateTransform attributeName="transform" type="translate" from="0,0" to="700,500" dur="4s" begin="1s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Hill -->
  <path d="M0,500 Q200,450 400,490 Q600,530 800,480 L800,600 L0,600 Z" fill="url(#hillGrad)"/>

  <!-- Fox -->
  <g transform="translate(250,380)">
    <!-- Tail (animated swaying) -->
    <g>
      <path d="M-30,20 Q-80,-10 -100,-40 Q-110,-60 -90,-70 Q-70,-60 -50,-40 Q-40,-20 -30,0 Z" fill="url(#tailGrad)" stroke="#d45a1a" stroke-width="1">
        <animateTransform attributeName="transform" type="rotate" values="-8 0 0; 8 0 0; -8 0 0" dur="6s" repeatCount="indefinite" additive="sum"/>
      </path>
    </g>

    <!-- Body -->
    <path d="M-40,10 Q-50,-30 -20,-40 Q0,-50 20,-40 Q50,-30 40,10 Q30,40 0,50 Q-30,40 -40,10 Z" fill="url(#foxBody)" stroke="#d45a1a" stroke-width="1.5"/>

    <!-- Legs -->
    <path d="M-25,45 L-20,70 L-10,65 L-5,45 Z" fill="url(#foxBody)" stroke="#d45a1a" stroke-width="1"/>
    <path d="M25,45 L30,70 L20,65 L15,45 Z" fill="url(#foxBody)" stroke="#d45a1a" stroke-width="1"/>

    <!-- Head -->
    <g transform="translate(0,-35)">
      <!-- Ears -->
      <path d="M-15,-35 L-20,-55 L-5,-45 Z" fill="url(#foxBody)" stroke="#d45a1a" stroke-width="1"/>
      <path d="M15,-35 L20,-55 L5,-45 Z" fill="url(#foxBody)" stroke="#d45a1a" stroke-width="1"/>
      <path d="M-18,-50 L-22,-60 L-12,-55 Z" fill="#ffffff"/>
      <path d="M18,-50 L22,-60 L12,-55 Z" fill="#ffffff"/>

      <!-- Face -->
      <ellipse cx="0" cy="-20" rx="20" ry="15" fill="url(#foxBody)" stroke="#d45a1a" stroke-width="1.5"/>

      <!-- Snout -->
      <path d="M-5,-15 L0,-5 L5,-15 Z" fill="#d45a1a"/>
      <circle cx="0" cy="-2" r="1.5" fill="#000"/>

      <!-- Eyes -->
      <circle cx="-8" cy="-22" r="2.5" fill="#000"/>
      <circle cx="8" cy="-22" r="2.5" fill="#000"/>
      <circle cx="-7.5" cy="-22.5" r="0.8" fill="#fff"/>
      <circle cx="8.5" cy="-22.5" r="0.8" fill="#fff"/>
    </g>
  </g>
</svg>