Mistral Small 4

by MistralReasoningClean

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

How it went

Total time: 15.5 s
Cost: $0.0020
Output tokens: 3,185
Spent thinking: 0 tokens
Speed: 212.1 tok/s
Console errors: 0

First token after: 453 ms
First visible text after: 453 ms
Prompt tokens: 549
Code size: 6.7 KB
Finish reason: stop
Served by: Mistral
Model id: mistralai/mistral-small-2603
Reasoning sent: model default
Max output: 209,715 tokens
Generated: Nov 12, 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 · 138 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <!-- Gradients -->
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#fff9c4" stop-opacity="1"/>
      <stop offset="100%" stop-color="#ffeb3b" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="foxFur" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e07b52"/>
      <stop offset="50%" stop-color="#c65d3a"/>
      <stop offset="100%" stop-color="#a0412a"/>
    </linearGradient>
    <linearGradient id="foxBelly" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f5d5b0"/>
      <stop offset="100%" stop-color="#e6b89c"/>
    </linearGradient>
    <linearGradient id="hillGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#5a7c4a"/>
      <stop offset="100%" stop-color="#2e4a2e"/>
    </linearGradient>
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1" result="blur"/>
      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="100%" height="100%" fill="#0a122a"/>

  <!-- Stars -->
  <g id="stars">
    <!-- Scattered stars -->
    <circle cx="100" cy="80" r="1.5" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="250" cy="50" r="1.2" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="2.5s" repeatCount="indefinite" begin="0.5s"/>
    </circle>
    <circle cx="400" cy="30" r="1.8" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.2;1;0.2" dur="4s" repeatCount="indefinite" begin="1s"/>
    </circle>
    <circle cx="600" cy="70" r="1.3" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="3.5s" repeatCount="indefinite" begin="0.3s"/>
    </circle>
    <circle cx="700" cy="100" r="1.6" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite" begin="0.8s"/>
    </circle>
    <circle cx="150" cy="150" r="1.4" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" repeatCount="indefinite" begin="0.2s"/>
    </circle>
    <circle cx="350" cy="120" r="1.7" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.2;1;0.2" dur="2.8s" repeatCount="indefinite" begin="0.7s"/>
    </circle>
    <circle cx="550" cy="140" r="1.5" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="3.2s" repeatCount="indefinite" begin="0.4s"/>
    </circle>
    <circle cx="750" cy="130" r="1.3" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="2.5s" repeatCount="indefinite" begin="0.9s"/>
    </circle>
    <circle cx="50" cy="200" r="1.6" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="3.5s" repeatCount="indefinite" begin="0.6s"/>
    </circle>
    <circle cx="200" cy="220" r="1.2" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.2;1;0.2" dur="2s" repeatCount="indefinite" begin="0.1s"/>
    </circle>
    <circle cx="380" cy="200" r="1.8" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="4s" repeatCount="indefinite" begin="0.5s"/>
    </circle>
    <circle cx="580" cy="210" r="1.4" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="2.8s" repeatCount="indefinite" begin="0.3s"/>
    </circle>
    <circle cx="720" cy="230" r="1.7" fill="#f8f8ff" filter="url(#starGlow)">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" repeatCount="indefinite" begin="0.8s"/>
    </circle>
  </g>

  <!-- Shooting star -->
  <path d="M0,250 Q100,200 200,250" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round">
    <animateMotion path="M0,250 Q100,200 200,250" dur="1s" begin="0;4s;8s" repeatCount="indefinite" rotate="auto"/>
    <animate attributeName="opacity" values="0;1;0" dur="1s" begin="0;4s;8s" repeatCount="indefinite"/>
  </path>

  <!-- Moon -->
  <circle cx="650" cy="100" r="40" fill="url(#moonGlow)" filter="url(#starGlow)"/>

  <!-- Hill -->
  <path d="M0,400 Q100,350 200,380 Q300,330 400,360 Q500,310 600,340 Q700,290 800,320 L800,600 L0,600 Z" fill="url(#hillGradient)"/>

  <!-- Distant hills -->
  <path d="M0,350 Q100,300 200,330 Q300,280 400,310 Q500,260 600,290 Q700,240 800,270 L800,400 L0,400 Z" fill="#3a5a3a" opacity="0.7"/>

  <!-- Trees -->
  <g id="trees">
    <path d="M50,380 L50,320 L40,330 L50,320 L60,330 Z" fill="#2a4a2a"/>
    <circle cx="50" cy="320" r="15" fill="#2a4a2a"/>
    <path d="M150,370 L150,310 L140,320 L150,310 L160,320 Z" fill="#2a4a2a"/>
    <circle cx="150" cy="310" r="12" fill="#2a4a2a"/>
    <path d="M650,360 L650,300 L640,310 L650,300 L660,310 Z" fill="#2a4a2a"/>
    <circle cx="650" cy="300" r="14" fill="#2a4a2a"/>
  </g>

  <!-- Fox -->
  <g id="fox" transform="translate(300, 320)">
    <!-- Body -->
    <path d="M50,50 Q70,30 90,40 Q110,50 120,70 Q130,90 120,110 Q110,130 90,140 Q70,150 50,140 Q30,130 20,110 Q10,90 30,70 Q50,50 50,50 Z" fill="url(#foxFur)"/>

    <!-- Belly -->
    <path d="M60,80 Q70,70 80,80 Q90,90 85,100 Q80,110 70,105 Q60,95 60,80 Z" fill="url(#foxBelly)"/>

    <!-- Head -->
    <path d="M120,40 Q140,20 160,30 Q170,40 165,50 Q160,60 145,55 Q130,50 120,40 Z" fill="url(#foxFur)"/>

    <!-- Ears -->
    <path d="M130,20 L140,0 L150,10 Z" fill="url(#foxFur)"/>
    <path d="M150,20 L160,0 L170,10 Z" fill="url(#foxFur)"/>

    <!-- Eyes -->
    <circle cx="150" cy="45" r="3" fill="#2a1810"/>
    <circle cx="145" cy="42" r="1" fill="#ffffff"/>

    <!-- Nose -->
    <path d="M165,50 L175,55 L165,60 Z" fill="#2a1810"/>

    <!-- Tail -->
    <path d="M20,110 Q0,120 -10,140 Q0,160 20,170 Q40,180 50,160 Q60,140 50,130 Q40,120 20,110 Z" fill="url(#foxFur)">
      <animateTransform attributeName="transform" type="rotate" values="0 20 140; 5 20 140; 0 20 140; -5 20 140; 0 20 140" dur="4s" repeatCount="indefinite"/>
    </path>

    <!-- Tail tip -->
    <path d="M50,160 Q60,170 70,165 Q80,160 75,150 Q70,140 50,130 Z" fill="#f5f5f5"/>

    <!-- Legs -->
    <path d="M70,140 L70,160 L65,160 Z" fill="url(#foxFur)"/>
    <path d="M80,135 L80,160 L75,160 Z" fill="url(#foxFur)"/>
    <path d="M40,135 L40,160 L35,160 Z" fill="url(#foxFur)"/>
    <path d="M30,140 L30,160 L25,160 Z" fill="url(#foxFur)"/>
  </g>
</svg>