MiMo-V2.6-Flash

by Xiaomireasoning defaultClean

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

How it went

Total time: 1 min 9 s
Cost: $0.0037
Output tokens: 9,988
Spent thinking: 0 tokens
Speed: 145.3 tok/s
Console errors: 0

First token after: 363 ms
First visible text after: 363 ms
Prompt tokens: 529
Code size: 21.2 KB
Finish reason: stop
Served by: Makora
Model id: xiaomi/mimo-v2.6-flash
Reasoning sent: model default
Max output: 131,072 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 · 457 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" role="img" aria-label="A fox sitting on a hill looking at the moon on a starry night">
  <title>A Fox Watching the Moon</title>

  <defs>
    <!-- Sky gradient -->
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"   stop-color="#070d24"/>
      <stop offset="45%"  stop-color="#111c44"/>
      <stop offset="75%"  stop-color="#21305e"/>
      <stop offset="100%" stop-color="#3a3567"/>
    </linearGradient>

    <!-- Moon glow gradient -->
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%"   stop-color="#fff7d6" stop-opacity="0.95"/>
      <stop offset="28%"  stop-color="#ffeeae" stop-opacity="0.55"/>
      <stop offset="55%"  stop-color="#f6d98a" stop-opacity="0.22"/>
      <stop offset="100%" stop-color="#f6d98a" stop-opacity="0"/>
    </radialGradient>

    <!-- Moon body -->
    <radialGradient id="moonBody" cx="35%" cy="30%" r="75%">
      <stop offset="0%"   stop-color="#fffdf1"/>
      <stop offset="60%"  stop-color="#fdeeb9"/>
      <stop offset="100%" stop-color="#f2d489"/>
    </radialGradient>

    <!-- Star twinkle -->
    <radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%"   stop-color="#ffffff" stop-opacity="1"/>
      <stop offset="35%"  stop-color="#cfe6ff" stop-opacity="0.75"/>
      <stop offset="100%" stop-color="#cfe6ff" stop-opacity="0"/>
    </radialGradient>

    <!-- Hills -->
    <linearGradient id="farHillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"   stop-color="#1d2a55"/>
      <stop offset="100%" stop-color="#16204a"/>
    </linearGradient>
    <linearGradient id="midHillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"   stop-color="#182653"/>
      <stop offset="100%" stop-color="#121b40"/>
    </linearGradient>
    <linearGradient id="nearHillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"   stop-color="#223263"/>
      <stop offset="55%"  stop-color="#182348"/>
      <stop offset="100%" stop-color="#0d1430"/>
    </linearGradient>

    <!-- Fox fur -->
    <linearGradient id="foxFur" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%"   stop-color="#f98a45"/>
      <stop offset="55%"  stop-color="#ec6f30"/>
      <stop offset="100%" stop-color="#c9521f"/>
    </linearGradient>
    <linearGradient id="foxBody" x1="0.1" y1="0" x2="0.9" y2="1">
      <stop offset="0%"   stop-color="#f78a49"/>
      <stop offset="60%"  stop-color="#e2682c"/>
      <stop offset="100%" stop-color="#b8481c"/>
    </linearGradient>
    <linearGradient id="tailGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%"   stop-color="#f5854a"/>
      <stop offset="60%"  stop-color="#dd6229"/>
      <stop offset="100%" stop-color="#a9411a"/>
    </linearGradient>

    <!-- Soft shadow under fox -->
    <radialGradient id="groundShadow" cx="50%" cy="50%" r="50%">
      <stop offset="0%"   stop-color="#05081a" stop-opacity="0.55"/>
      <stop offset="100%" stop-color="#05081a" stop-opacity="0"/>
    </radialGradient>

    <!-- Shooting star trail -->
    <linearGradient id="trailGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%"   stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="55%"  stop-color="#cfe8ff" stop-opacity="0.55"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="1"/>
    </linearGradient>

    <filter id="softBlur" x="-60%" y="-60%" width="220%" height="220%">
      <feGaussianBlur stdDeviation="6"/>
    </filter>
    <filter id="tinyBlur" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1.6"/>
    </filter>

    <style>
      .star { animation: twinkle var(--d, 3s) ease-in-out infinite; animation-delay: var(--dl, 0s); transform-box: fill-box; transform-origin: center; }
      @keyframes twinkle {
        0%, 100% { opacity: .25; transform: scale(.65); }
        50%      { opacity: 1;   transform: scale(1.15); }
      }
      .star-base { animation: basePulse 7s ease-in-out infinite; }
      @keyframes basePulse {
        0%, 100% { opacity: .7; }
        50%      { opacity: .95; }
      }
      .tail { transform-box: fill-box; transform-origin: 92% 82%; animation: sway 4.4s ease-in-out infinite; }
      @keyframes sway {
        0%, 100% { transform: rotate(0deg); }
        50%      { transform: rotate(4.5deg); }
      }
      .shooting { animation: shoot 4s linear infinite; animation-delay: 1.1s; }
      @keyframes shoot {
        0%     { transform: translate(0,0);   opacity: 0; }
        1%     { transform: translate(0,0);   opacity: 0; }
        3%     { opacity: 1; }
        17%    { transform: translate(-700px,300px); opacity: 1; }
        21%    { transform: translate(-820px,355px); opacity: 0; }
        100%   { transform: translate(-820px,355px); opacity: 0; }
      }
      .moon-breathe { animation: breathe 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
      @keyframes breathe {
        0%, 100% { opacity: .8;  transform: scale(1); }
        50%      { opacity: 1;    transform: scale(1.035); }
      }
      @media (prefers-reduced-motion: reduce) {
        .star, .star-base, .tail, .shooting, .moon-breathe { animation: none; }
        .shooting { opacity: 0; }
      }
    </style>
  </defs>

  <!-- ================= SKY ================= -->
  <rect x="0" y="0" width="800" height="600" fill="url(#skyGrad)"/>

  <!-- Faint atmospheric bands -->
  <ellipse cx="620" cy="140" rx="300" ry="150" fill="#3a4a86" opacity="0.10" filter="url(#softBlur)"/>
  <ellipse cx="180" cy="320" rx="340" ry="90" fill="#5b4b8f" opacity="0.10" filter="url(#softBlur)"/>

  <!-- ================= MOON ================= -->
  <g class="moon-breathe">
    <circle cx="618" cy="132" r="130" fill="url(#moonGlow)"/>
    <circle cx="618" cy="132" r="52" fill="url(#moonBody)"/>
    <!-- craters -->
    <g fill="#e8cb8d" opacity="0.55">
      <ellipse cx="600" cy="112" rx="12" ry="9"/>
      <ellipse cx="634" cy="146" rx="9" ry="7"/>
      <ellipse cx="608" cy="156" rx="6" ry="5"/>
      <ellipse cx="640" cy="112" rx="5.5" ry="4.5"/>
      <ellipse cx="584" cy="140" rx="5" ry="4"/>
    </g>
    <!-- subtle terminator shade -->
    <path d="M618 80 A52 52 0 0 1 618 184 A66 66 0 0 0 618 80 Z" fill="#e0bd76" opacity="0.35"/>
  </g>

  <!-- ================= STARS ================= -->
  <!-- base glow field -->
  <g fill="url(#starGlow)" class="star-base">
    <circle cx="60"  cy="60"  r="9"/>
    <circle cx="140" cy="120" r="7"/>
    <circle cx="255" cy="55"  r="8"/>
    <circle cx="360" cy="150" r="7"/>
    <circle cx="470" cy="70"  r="9"/>
    <circle cx="740" cy="60"  r="8"/>
    <circle cx="690" cy="240" r="7"/>
    <circle cx="90"  cy="260" r="8"/>
    <circle cx="200" cy="330" r="6"/>
    <circle cx="520" cy="300" r="7"/>
    <circle cx="770" cy="170" r="7"/>
    <circle cx="330" cy="255" r="6"/>
  </g>

  <!-- twinkling stars (bright cores) -->
  <g fill="#ffffff">
    <g class="star" style="--d:2.6s;--dl:0s"><circle cx="60"  cy="60"  r="2.4"/></g>
    <g class="star" style="--d:3.4s;--dl:.5s"><circle cx="140" cy="120" r="2.0"/></g>
    <g class="star" style="--d:3.1s;--dl:1.1s"><circle cx="255" cy="55"  r="2.6"/></g>
    <g class="star" style="--d:4.0s;--dl:.2s"><circle cx="360" cy="150" r="2.0"/></g>
    <g class="star" style="--d:2.9s;--dl:1.6s"><circle cx="470" cy="70"  r="2.4"/></g>
    <g class="star" style="--d:3.6s;--dl:.8s"><circle cx="740" cy="60"  r="2.4"/></g>
    <g class="star" style="--d:3.3s;--dl:2.1s"><circle cx="690" cy="240" r="2.0"/></g>
    <g class="star" style="--d:4.2s;--dl:.4s"><circle cx="90"  cy="260" r="2.2"/></g>
    <g class="star" style="--d:2.8s;--dl:1.3s"><circle cx="200" cy="330" r="1.8"/></g>
    <g class="star" style="--d:3.8s;--dl:.9s"><circle cx="520" cy="300" r="2.0"/></g>
    <g class="star" style="--d:3.0s;--dl:1.9s"><circle cx="770" cy="170" r="2.0"/></g>
    <g class="star" style="--d:4.4s;--dl:.6s"><circle cx="330" cy="255" r="1.8"/></g>

    <g class="star" style="--d:3.5s;--dl:.3s"><circle cx="105" cy="45"  r="1.6"/></g>
    <g class="star" style="--d:2.7s;--dl:1.7s"><circle cx="185" cy="185" r="1.5"/></g>
    <g class="star" style="--d:4.1s;--dl:1.0s"><circle cx="290" cy="130" r="1.6"/></g>
    <g class="star" style="--d:3.2s;--dl:2.4s"><circle cx="415" cy="215" r="1.5"/></g>
    <g class="star" style="--d:3.9s;--dl:.7s"><circle cx="445" cy="120" r="1.7"/></g>
    <g class="star" style="--d:3.0s;--dl:1.5s"><circle cx="560" cy="215" r="1.5"/></g>
    <g class="star" style="--d:4.6s;--dl:.1s"><circle cx="645" cy="295" r="1.6"/></g>
    <g class="star" style="--d:3.7s;--dl:2.0s"><circle cx="720" cy="115" r="1.5"/></g>
    <g class="star" style="--d:2.5s;--dl:1.2s"><circle cx="40"  cy="170" r="1.5"/></g>
    <g class="star" style="--d:4.3s;--dl:.5s"><circle cx="150" cy="245" r="1.6"/></g>
    <g class="star" style="--d:3.4s;--dl:2.3s"><circle cx="255" cy="305" r="1.5"/></g>
    <g class="star" style="--d:3.1s;--dl:.9s"><circle cx="360" cy="345" r="1.5"/></g>
    <g class="star" style="--d:4.0s;--dl:1.8s"><circle cx="470" cy="375" r="1.4"/></g>
    <g class="star" style="--d:2.9s;--dl:.4s"><circle cx="580" cy="355" r="1.5"/></g>
    <g class="star" style="--d:4.5s;--dl:1.4s"><circle cx="660" cy="345" r="1.4"/></g>
    <g class="star" style="--d:3.6s;--dl:2.6s"><circle cx="755" cy="300" r="1.5"/></g>
    <g class="star" style="--d:3.3s;--dl:.6s"><circle cx="225" cy="235" r="1.3"/></g>
    <g class="star" style="--d:3.8s;--dl:2.2s"><circle cx="495" cy="170" r="1.4"/></g>
    <g class="star" style="--d:2.6s;--dl:1.6s"><circle cx="600" cy="65"  r="1.5"/></g>
    <g class="star" style="--d:4.2s;--dl:.8s"><circle cx="320" cy="90"  r="1.3"/></g>
    <g class="star" style="--d:3.5s;--dl:2.5s"><circle cx="80"  cy="330" r="1.4"/></g>
    <g class="star" style="--d:3.0s;--dl:1.1s"><circle cx="145" cy="385" r="1.3"/></g>
    <g class="star" style="--d:4.4s;--dl:.3s"><circle cx="705" cy="400" r="1.3"/></g>
    <g class="star" style="--d:2.8s;--dl:2.7s"><circle cx="420" cy="60"  r="1.4"/></g>
    <g class="star" style="--d:3.9s;--dl:1.9s"><circle cx="265" cy="395" r="1.3"/></g>
    <g class="star" style="--d:3.2s;--dl:.7s"><circle cx="535" cy="255" r="1.3"/></g>
    <g class="star" style="--d:4.7s;--dl:2.0s"><circle cx="115" cy="305" r="1.3"/></g>
    <g class="star" style="--d:3.6s;--dl:1.4s"><circle cx="770" cy="235" r="1.3"/></g>
    <g class="star" style="--d:4.1s;--dl:.2s"><circle cx="380" cy="300" r="1.3"/></g>
  </g>

  <!-- a few cross-shaped bright stars -->
  <g stroke="#eaf4ff" stroke-width="1.4" stroke-linecap="round" opacity="0.9">
    <g class="star" style="--d:3.6s;--dl:.4s" transform="translate(60,60)">
      <line x1="-8" y1="0" x2="8" y2="0"/><line x1="0" y1="-8" x2="0" y2="8"/>
    </g>
    <g class="star" style="--d:4.3s;--dl:1.2s" transform="translate(470,70)">
      <line x1="-6" y1="0" x2="6" y2="0"/><line x1="0" y1="-6" x2="0" y2="6"/>
    </g>
    <g class="star" style="--d:3.9s;--dl:2.0s" transform="translate(740,60)">
      <line x1="-7" y1="0" x2="7" y2="0"/><line x1="0" y1="-7" x2="0" y2="7"/>
    </g>
    <g class="star" style="--d:3.1s;--dl:.9s" transform="translate(255,55)">
      <line x1="-6" y1="0" x2="6" y2="0"/><line x1="0" y1="-6" x2="0" y2="6"/>
    </g>
    <g class="star" style="--d:4.5s;--dl:1.7s" transform="translate(90,260)">
      <line x1="-5.5" y1="0" x2="5.5" y2="0"/><line x1="0" y1="-5.5" x2="0" y2="5.5"/>
    </g>
  </g>

  <!-- ================= SHOOTING STAR (every 4s, first within 2s) ================= -->
  <g class="shooting">
    <g transform="translate(760,55) rotate(155)">
      <path d="M0 0 L240 0" stroke="url(#trailGrad)" stroke-width="2.6" stroke-linecap="round" fill="none" filter="url(#tinyBlur)"/>
      <path d="M0 0 L130 0" stroke="#ffffff" stroke-width="1.4" stroke-linecap="round" fill="none" opacity="0.9"/>
      <circle cx="0" cy="0" r="7" fill="#ffffff" opacity="0.9" filter="url(#tinyBlur)"/>
      <circle cx="0" cy="0" r="2.6" fill="#ffffff"/>
    </g>
  </g>

  <!-- ================= DISTANT HILLS ================= -->
  <path d="M0 392 Q70 336 150 366 Q230 396 300 358 Q380 314 460 356 Q540 398 620 356 Q700 314 800 360 L800 600 L0 600 Z"
        fill="url(#farHillGrad)"/>
  <path d="M0 432 Q90 388 175 414 Q265 442 350 404 Q440 364 530 412 Q615 456 700 418 Q755 394 800 410 L800 600 L0 600 Z"
        fill="url(#midHillGrad)"/>

  <!-- ================= PINE TREES (distant) ================= -->
  <g fill="#0e1637" opacity="0.92">
    <!-- left cluster -->
    <g transform="translate(40,352) scale(0.9)">
      <rect x="-2" y="52" width="4" height="20"/>
      <path d="M0 -34 L14 4 L7 4 L18 30 L-18 30 L-7 4 L-14 4 Z"/>
    </g>
    <g transform="translate(78,366) scale(1.15)">
      <rect x="-2" y="52" width="4" height="22"/>
      <path d="M0 -40 L15 2 L8 2 L20 32 L-20 32 L-8 2 L-15 2 Z"/>
    </g>
    <g transform="translate(116,376) scale(0.8)">
      <rect x="-2" y="52" width="4" height="18"/>
      <path d="M0 -30 L13 4 L6 4 L17 28 L-17 28 L-6 4 L-13 4 Z"/>
    </g>
    <g transform="translate(155,384) scale(1.0)">
      <rect x="-2" y="52" width="4" height="20"/>
      <path d="M0 -36 L14 3 L7 3 L19 30 L-19 30 L-7 3 L-14 3 Z"/>
    </g>

    <!-- right cluster -->
    <g transform="translate(660,378) scale(1.05)">
      <rect x="-2" y="52" width="4" height="20"/>
      <path d="M0 -37 L15 3 L7 3 L19 31 L-19 31 L-7 3 L-15 3 Z"/>
    </g>
    <g transform="translate(700,390) scale(1.3)">
      <rect x="-2" y="52" width="4" height="24"/>
      <path d="M0 -42 L16 1 L8 1 L21 33 L-21 33 L-8 1 L-16 1 Z"/>
    </g>
    <g transform="translate(745,384) scale(0.95)">
      <rect x="-2" y="52" width="4" height="20"/>
      <path d="M0 -34 L14 3 L7 3 L18 30 L-18 30 L-7 3 L-14 3 Z"/>
    </g>
    <g transform="translate(782,398) scale(1.15)">
      <rect x="-2" y="52" width="4" height="22"/>
      <path d="M0 -39 L15 2 L8 2 L20 32 L-20 32 L-8 2 L-15 2 Z"/>
    </g>
  </g>

  <!-- middle-distance tree line -->
  <g fill="#0a1130" opacity="0.85">
    <g transform="translate(245,420) scale(0.75)">
      <rect x="-2" y="52" width="4" height="16"/>
      <path d="M0 -30 L13 4 L6 4 L17 28 L-17 28 L-6 4 L-13 4 Z"/>
    </g>
    <g transform="translate(283,428) scale(0.6)">
      <rect x="-2" y="52" width="4" height="14"/>
      <path d="M0 -26 L12 5 L5 5 L15 26 L-15 26 L-5 5 L-12 5 Z"/>
    </g>
    <g transform="translate(575,424) scale(0.8)">
      <rect x="-2" y="52" width="4" height="16"/>
      <path d="M0 -31 L13 4 L6 4 L17 29 L-17 29 L-6 4 L-13 4 Z"/>
    </g>
    <g transform="translate(612,432) scale(0.62)">
      <rect x="-2" y="52" width="4" height="14"/>
      <path d="M0 -27 L12 5 L5 5 L15 26 L-15 26 L-5 5 L-12 5 Z"/>
    </g>
  </g>

  <!-- ================= NEAR HILL (fox sits here) ================= -->
  <path d="M0 520 Q130 448 300 452 Q470 456 585 470 Q700 484 800 462 L800 600 L0 600 Z"
        fill="url(#nearHillGrad)"/>
  <!-- hill highlight rim -->
  <path d="M0 520 Q130 448 300 452 Q470 456 585 470 Q700 484 800 462"
        fill="none" stroke="#3c5391" stroke-width="2" opacity="0.35"/>
  <!-- grass tufts -->
  <g stroke="#0a1029" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.7">
    <path d="M120 495 q4 -14 9 -20 M126 496 q0 -16 -4 -22 M132 497 q6 -12 13 -16"/>
    <path d="M640 492 q5 -13 10 -18 M647 493 q-1 -15 -6 -20 M653 494 q7 -11 14 -15"/>
    <path d="M235 470 q4 -12 8 -17 M241 471 q-1 -14 -5 -19"/>
    <path d="M540 476 q4 -12 9 -17 M547 477 q-1 -14 -6 -18"/>
    <path d="M400 466 q4 -12 9 -17 M407 467 q-1 -14 -6 -18"/>
  </g>

  <!-- shadow beneath fox -->
  <ellipse cx="392" cy="500" rx="92" ry="18" fill="url(#groundShadow)"/>

  <!-- ================= FOX ================= -->
  <!-- Fox faces right, sitting, gazing up at the moon -->
  <g transform="translate(392,470)">

    <!-- Tail (behind body), gently swaying -->
    <g class="tail">
      <path d="M-34 8
               C-78 -4 -110 -34 -104 -66
               C-100 -92 -72 -104 -52 -92
               C-68 -84 -78 -70 -72 -56
               C-66 -42 -48 -34 -26 -34
               C-4 -34 12 -20 10 -2
               C8 12 -12 16 -34 8 Z"
            fill="url(#tailGrad)"/>
      <!-- white tail tip -->
      <path d="M-104 -66
               C-100 -92 -72 -104 -52 -92
               C-70 -86 -84 -74 -84 -58
               C-84 -44 -72 -34 -58 -30
               C-74 -34 -94 -44 -100 -54
               C-103 -59 -104 -63 -104 -66 Z"
            fill="#f7f1e4" opacity="0.95"/>
      <path d="M-96 -60 C-92 -82 -70 -94 -54 -86 C-72 -80 -84 -68 -84 -56 C-84 -46 -76 -38 -64 -33 C-84 -38 -96 -48 -96 -60 Z"
            fill="#fdf7ec" opacity="0.9"/>
      <!-- tail fur strokes -->
      <g stroke="#a94a1e" stroke-width="1.6" fill="none" opacity="0.4" stroke-linecap="round">
        <path d="M-30 -6 C-46 -10 -58 -18 -66 -28"/>
        <path d="M-24 2 C-42 -2 -54 -8 -64 -18"/>
        <path d="M-18 -16 C-32 -22 -44 -30 -52 -40"/>
      </g>
    </g>

    <!-- Body -->
    <path d="M-30 6
             C-42 -14 -34 -38 -14 -48
             C6 -58 34 -50 44 -30
             C54 -10 50 18 40 34
             C30 50 4 56 -14 48
             C-30 41 -24 24 -30 6 Z"
          fill="url(#foxBody)"/>

    <!-- Chest / belly white patch -->
    <path d="M18 -30
             C38 -22 46 -2 42 20
             C38 40 24 50 8 50
             C-6 49 -14 40 -12 28
             C-8 10 4 -6 18 -30 Z"
          fill="#fbf4e7" opacity="0.96"/>
    <path d="M4 -6 C16 2 24 16 22 32 C20 44 12 50 4 50 C-6 48 -12 40 -11 30 C-9 17 -4 5 4 -6 Z"
          fill="#fffaf0" opacity="0.7"/>

    <!-- Front legs -->
    <path d="M6 24 C6 38 6 48 8 56 C9 62 20 62 22 56 C24 46 24 34 22 22 Z" fill="#e4713a"/>
    <path d="M26 24 C27 38 28 48 30 56 C31 62 42 62 44 56 C45 46 44 34 42 22 Z" fill="#d9622e"/>
    <!-- paws -->
    <ellipse cx="14" cy="57" rx="10" ry="6" fill="#fdf6ea"/>
    <ellipse cx="37" cy="57" rx="10" ry="6" fill="#fbf0e0"/>
    <g stroke="#d9b6a0" stroke-width="1.2" stroke-linecap="round" opacity="0.7">
      <path d="M10 57 h8 M33 57 h8"/>
    </g>

    <!-- Head -->
    <g transform="translate(6,-74)">
      <!-- head base -->
      <path d="M-30 -6
               C-34 -28 -20 -44 0 -46
               C20 -48 38 -34 40 -14
               C42 4 32 20 14 26
               C-4 32 -24 24 -30 6 Z"
            fill="url(#foxFur)"/>

      <!-- Left ear (viewer left) -->
      <path d="M-30 -14 L-40 -56 L-4 -36 Z" fill="#e2662c"/>
      <path d="M-28 -18 L-36 -47 L-10 -34 Z" fill="#2b1a24"/>
      <!-- Right ear -->
      <path d="M6 -42 L20 -74 L36 -34 Z" fill="#ee7a3a"/>
      <path d="M11 -42 L21 -66 L31 -36 Z" fill="#2b1a24"/>

      <!-- Cheek fluff -->
      <path d="M-30 -4 C-42 0 -46 12 -38 20 C-32 26 -22 28 -14 26 C-22 18 -26 8 -30 -4 Z"
            fill="#f9a06a" opacity="0.95"/>
      <path d="M34 -8 C44 -4 47 8 40 16 C35 22 26 25 18 25 C26 17 31 6 34 -8 Z"
            fill="#f7955c" opacity="0.95"/>

      <!-- Snout (muzzle) pointing right and slightly up toward the moon -->
      <path d="M14 -2
               C26 -6 42 -8 54 -4
               C64 -1 66 6 58 10
               C48 15 30 16 16 12
               C8 9 8 1 14 -2 Z"
            fill="#fdf6ea"/>
      <path d="M16 6 C28 12 44 13 56 10 C62 8 64 5 62 3 C66 8 62 13 54 15 C42 18 24 17 14 12 Z"
            fill="#f0dcc8" opacity="0.6"/>

      <!-- Nose -->
      <path d="M54 -6 C62 -7 67 -2 65 3 C63 8 56 9 52 6 C49 3 50 -5 54 -6 Z" fill="#3a2029"/>
      <ellipse cx="58" cy="0" rx="2.6" ry="1.8" fill="#8a6470" opacity="0.7"/>

      <!-- Eye looking up-right toward the moon -->
      <path d="M16 -16 C22 -22 30 -22 36 -17" stroke="#3a2029" stroke-width="2.4" fill="none" stroke-linecap="round"/>
      <ellipse cx="27" cy="-9" rx="6.4" ry="6" fill="#fdf6ea"/>
      <circle cx="29" cy="-11" r="3.6" fill="#31202a"/>
      <circle cx="30.4" cy="-12.4" r="1.3" fill="#ffffff"/>
      <!-- far eye hint (slight 3/4 view) -->
      <path d="M-4 -20 C0 -25 7 -26 12 -23" stroke="#3a2029" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.85"/>
      <ellipse cx="4" cy="-15" rx="4.6" ry="4.4" fill="#fdf6ea" opacity="0.95"/>
      <circle cx="5.4" cy="-16.6" r="2.6" fill="#31202a"/>
      <circle cx="6.3" cy="-17.6" r="0.9" fill="#ffffff"/>

      <!-- Brow / muzzle markings -->
      <path d="M-8 -30 C-2 -36 8 -38 16 -34" stroke="#fbc9a4" stroke-width="2.6" fill="none" stroke-linecap="round" opacity="0.75"/>
      <path d="M-26 -6 C-20 4 -16 14 -14 24" stroke="#c9521f" stroke-width="1.6" fill="none" opacity="0.4"/>
      <!-- whiskers -->
      <g stroke="#efe6da" stroke-width="1.2" fill="none" opacity="0.55" stroke-linecap="round">
        <path d="M52 6 C60 6 68 4 74 0"/>
        <path d="M52 10 C60 12 68 13 74 12"/>
        <path d="M50 2 C58 -2 66 -6 70 -10"/>
      </g>
    </g>

    <!-- warm rim light from the moon (right side) -->
    <path d="M44 -30 C54 -10 50 18 40 34 C48 14 46 -8 36 -30 Z" fill="#ffd9a0" opacity="0.35"/>
    <path d="M40 -14 C42 4 32 20 14 26 C30 18 38 4 34 -12 Z" fill="#ffcf95" opacity="0.3"/>
  </g>

  <!-- foreground grass over paws -->
  <g stroke="#080d24" stroke-width="2.2" stroke-linecap="round" fill="none" opacity="0.75">
    <path d="M330 505 q6 -16 12 -22 M337 506 q-1 -18 -6 -24 M344 507 q8 -14 16 -19"/>
    <path d="M432 508 q6 -15 12 -21 M439 509 q-1 -17 -6 -23"/>
    <path d="M300 520 q7 -18 15 -24 M308 521 q-1 -20 -7 -26"/>
    <path d="M470 516 q7 -17 15 -23 M478 517 q-1 -19 -7 -25"/>
  </g>

  <!-- vignette -->
  <rect x="0" y="0" width="800" height="600" fill="none" stroke="#05081a" stroke-width="40" opacity="0.25" pointer-events="none"/>
</svg>