North Mini Code (free)

by CohereReasoningClean

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

How it went

Total time: 7.4 s
Cost: $0
Output tokens: 1,912
Spent thinking: 0 tokens
Speed: 266.4 tok/s
Console errors: 0

First token after: 247 ms
First visible text after: 247 ms
Prompt tokens: 506
Code size: 5.3 KB
Finish reason: stop
Served by: Cohere
Model id: cohere/north-mini-code: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 · 131 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" style="background:#0d1b2a;width:100%;height:100vh;">
  <!-- Define gradients -->
  <defs>
    <linearGradient id="moonGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffeb3b"/>
      <stop offset="100%" stop-color="#f9a825"/>
    </linearGradient>
    <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#1b263b"/>
      <stop offset="100%" stop-color="#0d1b2a"/>
    </linearGradient>
    <linearGradient id="hillGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#2a3a50"/>
      <stop offset="100%" stop-color="#1b263b"/>
    </linearGradient>
    <linearGradient id="foxFurGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e07a2b"/>
      <stop offset="100%" stop-color="#c8541e"/>
    </linearGradient>
  </defs>

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

  <!-- Distant hills (two layers) -->
  <path d="M0 420 Q200 380 400 420 T800 420" fill="url(#hillGrad)"/>
  <path d="M0 460 Q200 420 400 460 T800 460" fill="url(#hillGrad)" opacity="0.7"/>

  <!-- Trees (simple silhouettes) -->
  <g opacity="0.8">
    <!-- Tree 1 -->
    <circle cx="120" cy="340" r="40" fill="#1b263b"/>
    <ellipse cx="120" cy="280" rx="55" ry="80" fill="#163042"/>
    <!-- Tree 2 -->
    <circle cx="700" cy="350" r="45" fill="#1b263b"/>
    <ellipse cx="700" cy="300" rx="60" ry="90" fill="#163042"/>
  </g>

  <!-- Star definitions for twinkling -->
  <g id="stars">
    <circle class="star" cx="50" cy="80" r="1.5" fill="#fff"/>
    <circle class="star" cx="150" cy="120" r="1" fill="#fff"/>
    <circle class="star" cx="250" cy="90" r="1.2" fill="#fff"/>
    <circle class="star" cx="350" cy="150" r="1.5" fill="#fff"/>
    <circle class="star" cx="450" cy="70" r="1" fill="#fff"/>
    <circle class="star" cx="550" cy="100" r="1.3" fill="#fff"/>
    <circle class="star" cx="650" cy="130" r="1" fill="#fff"/>
    <circle class="star" cx="750" cy="60" r="1.5" fill="#fff"/>
    <circle class="star" cx="200" cy="300" r="1" fill="#fff"/>
    <circle class="star" cx="500" cy="260" r="1.2" fill="#fff"/>
    <circle class="star" cx="700" cy="220" r="1.4" fill="#fff"/>
  </g>

  <!-- Shooting star -->
  <path id="shootingStar" d="M-50 200 L800 600" stroke="url(#moonGrad)" stroke-width="2" fill="none" opacity="0" stroke-dasharray="10 10">
    <animate attributeName="opacity" from="0" to="1" begin="2s;5s;8s;11s;..." dur="4s" repeatCount="indefinite"/>
    <animate attributeName="transform" from="translate(0,0)" to="translate(850, -150)" begin="2s;5s;8s;11s;..." dur="4s" repeatCount="indefinite"/>
  </path>

  <!-- Moon with soft glow -->
  <circle cx="700" cy="80" r="60" fill="url(#moonGrad)" opacity="0.9">
    <animate attributeName="opacity" values="0.9;0.7;0.9" dur="6s" repeatCount="indefinite"/>
  </circle>
  <filter id="glow">
    <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
    <feMerge>
      <feMergeNode in="coloredBlur"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <circle cx="700" cy="80" r="70" fill="none" stroke="url(#moonGrad)" stroke-width="4" opacity="0.4" filter="url(#glow)"/>

  <!-- Fox body -->
  <g id="fox">
    <!-- Ears -->
    <ellipse cx="340" cy="210" rx="30" ry="40" fill="url(#foxFurGrad)"/>
    <ellipse cx="460" cy="210" rx="30" ry="40" fill="url(#foxFurGrad)"/>

    <!-- Head -->
    <circle cx="400" cy="240" r="30" fill="url(#foxFurGrad)"/>
    <ellipse cx="370" cy="230" rx="12" ry="8" fill="#000"/>

    <!-- Snout -->
    <path d="M382 240 Q390 260 400 240 Q410 260 418 240" fill="#d9c6b0"/>

    <!-- Eyes -->
    <circle cx="375" cy="230" r="3" fill="#000"/>
    <circle cx="415" cy="230" r="3" fill="#000"/>
    <circle cx="376" cy="229" r="1.5" fill="#fff"/>
    <circle cx="416" cy="229" r="1.5" fill="#fff"/>

    <!-- Body -->
    <rect x="340" y="260" width="120" height="60" rx="20" fill="url(#foxFurGrad)"/>

    <!-- Tail (bushy with white tip) -->
    <path id="tail" d="M460 280 C470 240, 500 260, 520 260 Q540 280, 540 320 Q540 360, 520 380 C500 410, 470 380, 460 340" fill="url(#foxFurGrad)">
      <animateTransform attributeName="transform" type="rotate" from="0 470 320" to="-10 470 320" dur="2s" values="0 470 320; 10 470 320; -8 470 320; 5 470 320; 0 470 320" repeatCount="indefinite"/>
    </path>
    <circle cx="530" cy="300" r="12" fill="#fff" opacity="0.9"/>

    <!-- Legs -->
    <rect x="360" y="310" width="12" height="45" fill="url(#foxFurGrad)"/>
    <rect x="420" y="310" width="12" height="45" fill="url(#foxFurGrad)"/>
    <rect x="460" y="310" width="12" height="45" fill="url(#foxFurGrad)"/>
    <rect x="500" y="310" width="12" height="45" fill="url(#foxFurGrad)"/>
  </g>

  <!-- SMIL for star twinkling -->
  <style>
    @keyframes twinkle {
      0%, 100% { opacity: 0; }
      50% { opacity: 1; }
    }
    .star {
      animation: twinkle 3s infinite ease-in-out;
      transform-origin: center;
    }
  </style>

  <!-- Inline SMIL for star animation -->
  <script type="text/ecmascript">
    <![CDATA[
      const stars = document.querySelectorAll('#stars .star');
      stars.forEach((s,i) => {
        const dur = 2 + Math.random()*3;
        s.style.animationDuration = dur + 's';
        s.style.animationDelay = (Math.random()*2) + 's';
      });
    ]]>
  </script>
</svg>