Mistral Small 4

by MistralReasoningClean

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

How it went

Total time: 15.9 s
Cost: $0.0020
Output tokens: 3,260
Spent thinking: 0 tokens
Speed: 214.9 tok/s
Console errors: 0

First token after: 738 ms
First visible text after: 738 ms
Prompt tokens: 549
Code size: 7.0 KB
Finish reason: stop
Served by: Mistral
Model id: mistralai/mistral-small-2603
Reasoning sent: {"effort":"none"}
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 · 150 lines

Download

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <!-- Gradients -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a1e3c"/>
      <stop offset="100%" stop-color="#040a18"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#f5f3ce" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#f5f3ce" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="foxGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e68a4e"/>
      <stop offset="50%" stop-color="#d4753a"/>
      <stop offset="100%" stop-color="#b85c2a"/>
    </linearGradient>
    <linearGradient id="tailGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e68a4e"/>
      <stop offset="100%" stop-color="#b85c2a"/>
    </linearGradient>
    <linearGradient id="hillGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#5a7c4a"/>
      <stop offset="100%" stop-color="#2a4a1a"/>
    </linearGradient>
    <filter id="twinkle" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"/>
      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="100%" height="100%" fill="url(#skyGradient)"/>

  <!-- Stars (randomly placed) -->
  <g id="stars">
    <circle cx="100" cy="80" r="1.5" fill="white">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite" begin="0s"/>
    </circle>
    <circle cx="200" cy="50" r="1" fill="white">
      <animate attributeName="opacity" values="0.2;0.8;0.2" dur="2.5s" repeatCount="indefinite" begin="0.5s"/>
    </circle>
    <circle cx="350" cy="120" r="1.2" fill="white">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="4s" repeatCount="indefinite" begin="1s"/>
    </circle>
    <circle cx="500" cy="70" r="1.5" fill="white">
      <animate attributeName="opacity" values="0.3;0.9;0.3" dur="3.5s" repeatCount="indefinite" begin="1.5s"/>
    </circle>
    <circle cx="650" cy="100" r="1" fill="white">
      <animate attributeName="opacity" values="0.2;0.7;0.2" dur="2s" repeatCount="indefinite" begin="0.8s"/>
    </circle>
    <circle cx="700" cy="40" r="1.3" fill="white">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite" begin="0.3s"/>
    </circle>
    <circle cx="150" cy="200" r="1.2" fill="white">
      <animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.8s" repeatCount="indefinite" begin="0.7s"/>
    </circle>
    <circle cx="300" cy="180" r="1" fill="white">
      <animate attributeName="opacity" values="0.3;0.8;0.3" dur="3.2s" repeatCount="indefinite" begin="1.2s"/>
    </circle>
    <circle cx="450" cy="220" r="1.5" fill="white">
      <animate attributeName="opacity" values="0.2;0.6;0.2" dur="2.5s" repeatCount="indefinite" begin="0.4s"/>
    </circle>
    <circle cx="600" cy="200" r="1.1" fill="white">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="3.8s" repeatCount="indefinite" begin="0.9s"/>
    </circle>
    <circle cx="750" cy="150" r="1.3" fill="white">
      <animate attributeName="opacity" values="0.3;0.8;0.3" dur="3s" repeatCount="indefinite" begin="1.1s"/>
    </circle>
    <circle cx="50" cy="300" r="1" fill="white">
      <animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.7s" repeatCount="indefinite" begin="0.6s"/>
    </circle>
    <circle cx="250" cy="320" r="1.2" fill="white">
      <animate attributeName="opacity" values="0.2;0.7;0.2" dur="3.5s" repeatCount="indefinite" begin="1.3s"/>
    </circle>
    <circle cx="400" cy="300" r="1.5" fill="white">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" begin="0.2s"/>
    </circle>
    <circle cx="550" cy="350" r="1.1" fill="white">
      <animate attributeName="opacity" values="0.3;0.8;0.3" dur="3.2s" repeatCount="indefinite" begin="0.8s"/>
    </circle>
    <circle cx="700" cy="320" r="1.3" fill="white">
      <animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.8s" repeatCount="indefinite" begin="1.5s"/>
    </circle>
  </g>

  <!-- Shooting star -->
  <g id="shootingStar">
    <path d="M -20,-5 L 0,0 L -20,5 Z" fill="white" opacity="0">
      <animateMotion path="M 0,0 C 200,100 400,50 600,150" dur="0.8s" begin="2s;6s;10s;14s" fill="freeze"/>
      <animate attributeName="opacity" values="0;1;0" dur="0.8s" begin="2s;6s;10s;14s" fill="freeze"/>
    </path>
  </g>

  <!-- Moon -->
  <circle cx="700" cy="100" r="40" fill="#f5f3ce" filter="url(#twinkle)"/>
  <circle cx="700" cy="100" r="50" fill="url(#moonGlow)"/>

  <!-- Distant hills -->
  <path d="M 0,400 Q 200,350 400,400 T 800,400 L 800,600 L 0,600 Z" fill="url(#hillGradient)" opacity="0.7"/>
  <path d="M 0,450 Q 150,400 300,450 T 600,450 T 800,450 L 800,600 L 0,600 Z" fill="url(#hillGradient)" opacity="0.5"/>

  <!-- Hill -->
  <path d="M 0,400 Q 100,300 200,350 Q 300,320 400,380 Q 500,350 600,400 Q 700,370 800,400 L 800,600 L 0,600 Z" fill="url(#hillGradient)"/>

  <!-- Trees -->
  <g id="trees">
    <path d="M 50,380 L 60,320 L 70,380 Z" fill="#2a4a1a"/>
    <circle cx="60" cy="300" r="8" fill="#2a4a1a"/>
    <path d="M 150,420 L 160,360 L 170,420 Z" fill="#2a4a1a"/>
    <circle cx="160" cy="340" r="10" fill="#2a4a1a"/>
    <path d="M 650,410 L 660,350 L 670,410 Z" fill="#2a4a1a"/>
    <circle cx="660" cy="330" r="12" fill="#2a4a1a"/>
  </g>

  <!-- Fox body -->
  <g id="fox">
    <!-- Tail -->
    <path d="M 300,450 Q 350,420 400,450 Q 420,470 400,490 Q 380,500 350,480 Q 320,490 300,470 Z" fill="url(#tailGradient)">
      <animateTransform attributeName="transform" type="rotate" values="0 350 470; 5 350 470; 0 350 470; -5 350 470; 0 350 470" dur="4s" repeatCount="indefinite"/>
    </path>
    <!-- Tail tip -->
    <circle cx="400" cy="450" r="8" fill="white"/>

    <!-- Body -->
    <path d="M 250,450 Q 280,420 320,430 Q 350,440 380,450 Q 360,470 320,480 Q 280,470 250,450 Z" fill="url(#foxGradient)"/>

    <!-- Head -->
    <path d="M 250,420 Q 240,400 230,410 Q 220,430 240,440 Q 250,430 250,420 Z" fill="url(#foxGradient)"/>

    <!-- Ears -->
    <path d="M 230,410 L 220,390 L 230,395 Z" fill="url(#foxGradient)"/>
    <path d="M 250,410 L 240,390 L 250,395 Z" fill="url(#foxGradient)"/>

    <!-- Snout -->
    <path d="M 240,430 Q 235,435 240,440 Q 245,435 240,430 Z" fill="#b85c2a"/>

    <!-- Eyes -->
    <circle cx="235" cy="420" r="3" fill="#2a1a0a"/>
    <circle cx="245" cy="420" r="3" fill="#2a1a0a"/>

    <!-- Nose -->
    <circle cx="240" cy="435" r="2" fill="#2a1a0a"/>

    <!-- Legs -->
    <path d="M 280,480 L 280,500" stroke="#b85c2a" stroke-width="6" stroke-linecap="round"/>
    <path d="M 300,480 L 300,500" stroke="#b85c2a" stroke-width="6" stroke-linecap="round"/>
    <path d="M 320,480 L 320,500" stroke="#b85c2a" stroke-width="6" stroke-linecap="round"/>
    <path d="M 340,480 L 340,500" stroke="#b85c2a" stroke-width="6" stroke-linecap="round"/>
  </g>
</svg>