Ministral 3 14B 2512

by Mistralreasoning defaultClean

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

How it went

Total time: 22.9 s
Cost: $0.0007
Output tokens: 2,742
Spent thinking: 0 tokens
Speed: 121.2 tok/s
Console errors: 0

First token after: 270 ms
First visible text after: 270 ms
Prompt tokens: 537
Code size: 6.0 KB
Finish reason: stop
Served by: Mistral
Model id: mistralai/ministral-14b-2512
Reasoning sent: model default
Max output: 209,715 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 · 122 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="moonGlow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f5f5dc" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#e6e6fa" stop-opacity="0.3"/>
    </linearGradient>
    <radialGradient id="foxFur" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#d2691e"/>
      <stop offset="50%" stop-color="#cd853f"/>
      <stop offset="100%" stop-color="#8b4513"/>
    </radialGradient>
    <linearGradient id="hillGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#8b4513"/>
      <stop offset="100%" stop-color="#556b2f"/>
    </linearGradient>
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#000033"/>
      <stop offset="100%" stop-color="#000000"/>
    </linearGradient>

    <!-- Filters -->
    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="5" result="blur"/>
      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
    </filter>

    <!-- Animations -->
    <style>
      @keyframes twinkle {
        0%, 100% { opacity: 0.2; }
        50% { opacity: 1; }
      }
      @keyframes tailSway {
        0%, 100% { transform: rotate(-5deg); }
        50% { transform: rotate(5deg); }
      }
      @keyframes shootStar {
        0% { opacity: 0; transform: translateX(-100px); }
        5% { opacity: 1; }
        95% { opacity: 1; }
        100% { opacity: 0; transform: translateX(900px); }
      }
    </style>
  </defs>

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

  <!-- Distant Hills -->
  <path d="M0,400 Q200,350 400,400 T800,400 L800,600 L0,600 Z" fill="url(#hillGradient)" opacity="0.6"/>

  <!-- Moon -->
  <circle cx="700" cy="150" r="50" fill="url(#moonGlow)" filter="url(#glow)"/>
  <circle cx="700" cy="150" r="40" fill="white"/>

  <!-- Stars -->
  <circle cx="100" cy="100" r="1.5" fill="white" style="animation: twinkle 3s infinite ease-in-out; animation-delay: 0s">
    <animate attributeName="opacity" values="0.2;1;0.2" dur="3s" repeatCount="indefinite"/>
  </circle>
  <circle cx="200" cy="80" r="1" fill="white" style="animation: twinkle 4s infinite ease-in-out; animation-delay: 1s"/>
  <circle cx="300" cy="120" r="1.2" fill="white" style="animation: twinkle 5s infinite ease-in-out; animation-delay: 0.5s"/>
  <circle cx="400" cy="90" r="0.8" fill="white" style="animation: twinkle 3.5s infinite ease-in-out; animation-delay: 1.5s"/>
  <circle cx="500" cy="110" r="1.5" fill="white" style="animation: twinkle 4.5s infinite ease-in-out; animation-delay: 0.8s"/>
  <circle cx="600" cy="70" r="1" fill="white" style="animation: twinkle 3s infinite ease-in-out; animation-delay: 1.2s"/>
  <circle cx="750" cy="130" r="1.3" fill="white" style="animation: twinkle 4s infinite ease-in-out; animation-delay: 0.3s"/>
  <circle cx="150" cy="500" r="0.7" fill="white" style="animation: twinkle 2.5s infinite ease-in-out; animation-delay: 0.7s"/>
  <circle cx="250" cy="480" r="1.1" fill="white" style="animation: twinkle 3.8s infinite ease-in-out; animation-delay: 1.3s"/>
  <circle cx="350" cy="520" r="0.9" fill="white" style="animation: twinkle 4.2s infinite ease-in-out; animation-delay: 0.9s"/>
  <circle cx="450" cy="490" r="1.4" fill="white" style="animation: twinkle 3.3s infinite ease-in-out; animation-delay: 0.4s"/>
  <circle cx="550" cy="510" r="1.2" fill="white" style="animation: twinkle 2.8s infinite ease-in-out; animation-delay: 1.7s"/>

  <!-- Shooting Star -->
  <path id="shootingStar" d="M-50,50 Q0,0 50,50" stroke="white" stroke-width="1" fill="none" opacity="0" style="animation: shootStar 4s linear infinite; animation-delay: 2s">
    <animate attributeName="d" values="M-50,50 Q0,0 50,50; M-50,100 Q0,100 50,100; M-50,150 Q0,150 50,150; M-50,200 Q0,200 50,200; M-50,250 Q0,250 50,250; M-50,300 Q0,300 50,300" dur="4s" repeatCount="indefinite"/>
  </path>

  <!-- Hill -->
  <path d="M100,450 Q200,400 300,450 Q400,500 500,450 Q600,400 700,450 L750,500 L150,500 Z" fill="url(#hillGradient)"/>

  <!-- Trees -->
  <path d="M120,480 L125,450 L130,480 Z" fill="#228B22"/>
  <path d="M135,475 L140,445 L145,475 Z" fill="#228B22"/>
  <path d="M150,485 L155,455 L160,485 Z" fill="#228B22"/>
  <path d="M650,470 L655,440 L660,470 Z" fill="#228B22"/>
  <path d="M665,465 L670,435 L675,465 Z" fill="#228B22"/>
  <path d="M680,475 L685,445 L690,475 Z" fill="#228B22"/>

  <!-- Fox -->
  <g transform="translate(400, 400)">
    <!-- Body -->
    <path d="M0,-50 Q15,-70 30,-60 Q40,-50 40,-30 Q40,-10 30,0 Q20,10 10,0 Q0,-10 -10,-30 Q-20,-50 -10,-60 Q0,-70 -15,-50 Z" fill="url(#foxFur)"/>

    <!-- Head -->
    <path d="M-10,-50 Q0,-70 10,-60 Q15,-50 15,-30 Q15,-10 10,0 Q5,10 0,0 Q-5,10 -10,0 Q-15,-10 -15,-30 Q-15,-50 -10,-60 Z" fill="url(#foxFur)"/>

    <!-- Ears -->
    <path d="M-5,-30 L-15,-10 L-5,-10 Z" fill="url(#foxFur)"/>
    <path d="M5,-30 L15,-10 L5,-10 Z" fill="url(#foxFur)"/>

    <!-- Snout -->
    <path d="M0,-30 Q5,-40 10,-35 Q12,-30 10,-25 Q8,-20 5,-25 Q2,-30 0,-35 Q-2,-30 -5,-25 Q-8,-20 -10,-25 Q-12,-30 -10,-35 Z" fill="#cd853f"/>

    <!-- Eyes -->
    <circle cx="-3" cy="-35" r="1.5" fill="black"/>
    <circle cx="3" cy="-35" r="1.5" fill="black"/>

    <!-- Tail -->
    <g transform="translate(30,-30)">
      <path id="tail" d="M0,0 Q10,-10 20,0 Q15,10 0,0" fill="url(#foxFur)" style="animation: tailSway 4s ease-in-out infinite">
        <animateTransform attributeName="transform" type="rotate" values="-5 0 0; 5 0 0; -5 0 0" dur="4s" repeatCount="indefinite"/>
      </path>
      <path d="M20,0 Q25,5 20,10 Q15,5 20,0" fill="white"/>
    </g>

    <!-- Legs -->
    <rect x="-5" y="0" width="3" height="10" fill="#8b4513"/>
    <rect x="5" y="0" width="3" height="10" fill="#8b4513"/>
    <rect x="-10" y="10" width="3" height="10" fill="#8b4513"/>
    <rect x="10" y="10" width="3" height="10" fill="#8b4513"/>
  </g>
</svg>