Gemini 4 Argon

by Googlereasoning defaultClean

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

How it went

Total time: 2 min 23 s
Cost: $0.101
Output tokens: 9,989
Spent thinking: 0 tokens
Speed: 71.8 tok/s
Console errors: 0

First token after: 4.1 s
First visible text after: 4.1 s
Prompt tokens: 574
Code size: 19.6 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-4-argon
Reasoning sent: model default
Max output: 943,718 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 · 474 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%" style="background:#05060f; display:block;">
  <defs>
    <!-- Sky and Moon Gradients -->
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#050714"/>
      <stop offset="45%" stop-color="#111838"/>
      <stop offset="80%" stop-color="#232c5c"/>
      <stop offset="100%" stop-color="#373c6e"/>
    </linearGradient>

    <radialGradient id="moonGlow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0%" stop-color="#fffbe8" stop-opacity="0.9"/>
      <stop offset="22%" stop-color="#ffefc2" stop-opacity="0.45"/>
      <stop offset="50%" stop-color="#a8b8ff" stop-opacity="0.14"/>
      <stop offset="100%" stop-color="#111838" stop-opacity="0"/>
    </radialGradient>

    <linearGradient id="moonSurface" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="65%" stop-color="#fff6d6"/>
      <stop offset="100%" stop-color="#edd9a3"/>
    </linearGradient>

    <!-- Landscape Gradients -->
    <linearGradient id="mistGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#5d69a3" stop-opacity="0"/>
      <stop offset="50%" stop-color="#5d69a3" stop-opacity="0.22"/>
      <stop offset="100%" stop-color="#141833" stop-opacity="0"/>
    </linearGradient>

    <linearGradient id="hillFar" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1d2447"/>
      <stop offset="100%" stop-color="#0f1329"/>
    </linearGradient>

    <linearGradient id="hillMid" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#131936"/>
      <stop offset="100%" stop-color="#090c1c"/>
    </linearGradient>

    <linearGradient id="hillFg" x1="0.7" y1="0" x2="0.2" y2="1">
      <stop offset="0%" stop-color="#192142"/>
      <stop offset="35%" stop-color="#0d1226"/>
      <stop offset="100%" stop-color="#050712"/>
    </linearGradient>

    <!-- Fox Gradients -->
    <linearGradient id="foxFur" x1="1" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ff934f"/>
      <stop offset="45%" stop-color="#e35622"/>
      <stop offset="100%" stop-color="#8f2912"/>
    </linearGradient>

    <linearGradient id="foxBackShadow" x1="1" y1="0.2" x2="0" y2="0.8">
      <stop offset="0%" stop-color="#f26b30"/>
      <stop offset="55%" stop-color="#b83716"/>
      <stop offset="100%" stop-color="#6e1b09"/>
    </linearGradient>

    <linearGradient id="foxCream" x1="1" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="55%" stop-color="#ffeedb"/>
      <stop offset="100%" stop-color="#c9b4a9"/>
    </linearGradient>

    <linearGradient id="shootingStarGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
      <stop offset="25%" stop-color="#d4e4ff" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#7094ff" stop-opacity="0"/>
    </linearGradient>

    <!-- Reusable Pine Tree -->
    <g id="pine">
      <path d="M0,0 L-10,26 L-5,25 L-15,50 L-8,48 L-20,76 L20,76 L8,48 L15,50 L5,25 L10,26 Z"/>
    </g>

    <!-- Sparkle Star Shape -->
    <path id="sparkle" d="M0,-5.5 C1,-1.5 1.5,-1 5.5,0 C1.5,1 1,1.5 0,5.5 C-1,1.5 -1.5,1 -5.5,0 C-1.5,-1 -1,-1.5 0,-5.5 Z" fill="#ffffff"/>
  </defs>

  <style>
    /* Star Twinkling Animations */
    .twinkle-1 { animation: twinkle 3.2s ease-in-out infinite; }
    .twinkle-2 { animation: twinkle 4.5s ease-in-out 1.1s infinite; }
    .twinkle-3 { animation: twinkle 2.7s ease-in-out 0.6s infinite; }
    .twinkle-4 { animation: twinkle 5.1s ease-in-out 2.3s infinite; }
    .twinkle-5 { animation: twinkle 3.8s ease-in-out 1.8s infinite; }

    @keyframes twinkle {
      0%, 100% { opacity: 0.95; }
      50% { opacity: 0.2; }
    }

    /* Fox Animations */
    .fox-tail {
      transform-origin: 312px 474px;
      animation: tailSway 4.2s ease-in-out infinite;
    }

    @keyframes tailSway {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(6.5deg); }
    }

    .fox-ear {
      transform-origin: 332px 338px;
      animation: earTwitch 7s ease-in-out infinite;
    }

    @keyframes earTwitch {
      0%, 84%, 92%, 100% { transform: rotate(0deg); }
      88% { transform: rotate(-5deg); }
    }

    /* Shooting Star Animation (Every 4s, first one within 1.2s) */
    .shooting-star {
      opacity: 0;
      animation: shoot 4s ease-out 0.8s infinite;
    }

    @keyframes shoot {
      0% {
        transform: translate(430px, 75px) rotate(-26deg) scaleX(0.3);
        opacity: 0;
      }
      3% {
        opacity: 1;
        transform: translate(390px, 95px) rotate(-26deg) scaleX(1);
      }
      18% {
        transform: translate(75px, 249px) rotate(-26deg) scaleX(0.6);
        opacity: 0;
      }
      100% {
        transform: translate(75px, 249px) rotate(-26deg) scaleX(0.2);
        opacity: 0;
      }
    }

    /* Subtle Moon Pulse */
    .moon-halo {
      transform-origin: 620px 155px;
      animation: haloPulse 6s ease-in-out infinite;
    }

    @keyframes haloPulse {
      0%, 100% { transform: scale(1); opacity: 0.95; }
      50% { transform: scale(1.05); opacity: 0.8; }
    }

    /* Drifting Fireflies */
    .firefly-1 { animation: floatFly 6s ease-in-out infinite; }
    .firefly-2 { animation: floatFly 8s ease-in-out 2s infinite; }

    @keyframes floatFly {
      0%, 100% { transform: translate(0, 0); opacity: 0.2; }
      50% { transform: translate(8px, -10px); opacity: 0.85; }
    }
  </style>

  <!-- 1. SKY BACKGROUND -->
  <rect width="800" height="600" fill="url(#skyGrad)"/>

  <!-- Subtle Milky Way Band -->
  <g opacity="0.07" transform="rotate(-28 400 220)">
    <ellipse cx="400" cy="180" rx="450" ry="70" fill="#a8c2ff"/>
    <ellipse cx="360" cy="165" rx="320" ry="38" fill="#ffffff"/>
  </g>

  <!-- 2. STARFIELD -->
  <!-- Group 1 -->
  <g class="twinkle-1" fill="#ffffff">
    <circle cx="48" cy="52" r="1.3"/>
    <circle cx="145" cy="34" r="1.8"/>
    <circle cx="235" cy="95" r="1.2"/>
    <circle cx="318" cy="42" r="1.5"/>
    <circle cx="440" cy="68" r="1.4"/>
    <circle cx="515" cy="35" r="1.7"/>
    <circle cx="695" cy="45" r="1.2"/>
    <circle cx="755" cy="90" r="1.5"/>
    <circle cx="88" cy="165" r="1.2"/>
    <circle cx="190" cy="215" r="1.4"/>
    <circle cx="490" cy="195" r="1.3"/>
    <circle cx="740" cy="245" r="1.6"/>
    <use href="#sparkle" transform="translate(145, 34) scale(0.9)"/>
    <use href="#sparkle" transform="translate(465, 110) scale(0.7)"/>
  </g>

  <!-- Group 2 -->
  <g class="twinkle-2" fill="#e6f0ff">
    <circle cx="72" cy="108" r="1.7"/>
    <circle cx="122" cy="82" r="1.1"/>
    <circle cx="268" cy="48" r="1.9"/>
    <circle cx="372" cy="88" r="1.3"/>
    <circle cx="412" cy="28" r="1.5"/>
    <circle cx="558" cy="72" r="1.2"/>
    <circle cx="722" cy="148" r="1.4"/>
    <circle cx="38" cy="230" r="1.5"/>
    <circle cx="150" cy="275" r="1.2"/>
    <circle cx="290" cy="175" r="1.6"/>
    <circle cx="540" cy="260" r="1.3"/>
    <circle cx="685" cy="295" r="1.2"/>
    <use href="#sparkle" transform="translate(268, 48) scale(1.1)"/>
    <use href="#sparkle" transform="translate(72, 108) scale(0.75)"/>
  </g>

  <!-- Group 3 -->
  <g class="twinkle-3" fill="#fff6e0">
    <circle cx="28" cy="140" r="1.2"/>
    <circle cx="178" cy="128" r="1.8"/>
    <circle cx="215" cy="60" r="1.1"/>
    <circle cx="348" cy="142" r="1.6"/>
    <circle cx="458" cy="152" r="1.2"/>
    <circle cx="585" cy="40" r="1.5"/>
    <circle cx="655" cy="62" r="1.3"/>
    <circle cx="772" cy="182" r="1.7"/>
    <circle cx="65" cy="295" r="1.4"/>
    <circle cx="242" cy="245" r="1.3"/>
    <circle cx="422" cy="212" r="1.5"/>
    <use href="#sparkle" transform="translate(348, 142) scale(0.8)"/>
    <use href="#sparkle" transform="translate(772, 182) scale(0.85)"/>
  </g>

  <!-- Group 4 -->
  <g class="twinkle-4" fill="#d6e4ff">
    <circle cx="96" cy="26" r="1.4"/>
    <circle cx="162" cy="178" r="1.2"/>
    <circle cx="285" cy="118" r="1.5"/>
    <circle cx="395" cy="130" r="1.1"/>
    <circle cx="482" cy="78" r="1.6"/>
    <circle cx="525" cy="135" r="1.3"/>
    <circle cx="715" cy="85" r="1.8"/>
    <circle cx="112" cy="238" r="1.5"/>
    <circle cx="315" cy="230" r="1.2"/>
    <circle cx="605" cy="285" r="1.4"/>
    <circle cx="765" cy="310" r="1.2"/>
    <use href="#sparkle" transform="translate(715, 85) scale(0.95)"/>
  </g>

  <!-- Group 5 (Faint background dust stars) -->
  <g class="twinkle-5" fill="#b8ccff" opacity="0.7">
    <circle cx="58" cy="78" r="0.9"/>
    <circle cx="132" cy="145" r="0.8"/>
    <circle cx="205" cy="160" r="1.0"/>
    <circle cx="252" cy="195" r="0.9"/>
    <circle cx="330" cy="75" r="0.8"/>
    <circle cx="380" cy="48" r="1.0"/>
    <circle cx="435" cy="102" r="0.9"/>
    <circle cx="502" cy="168" r="0.8"/>
    <circle cx="565" cy="222" r="1.0"/>
    <circle cx="645" cy="265" r="0.9"/>
    <circle cx="735" cy="205" r="0.8"/>
    <circle cx="82" cy="332" r="1.0"/>
    <circle cx="195" cy="310" r="0.9"/>
  </g>

  <!-- Subtle Constellation Lines (Ursa Minor-inspired) -->
  <path d="M145,34 L178,72 L215,60 L235,95 L285,118 L268,48 L215,60" fill="none" stroke="#8aa8ff" stroke-width="0.6" stroke-dasharray="2 3" opacity="0.22"/>
  <circle cx="178" cy="72" r="1.4" fill="#ffffff" class="twinkle-1"/>

  <!-- 3. SHOOTING STAR -->
  <g class="shooting-star">
    <path d="M0,0 L125,-1.8 L125,1.8 Z" fill="url(#shootingStarGrad)"/>
    <circle cx="0" cy="0" r="2.2" fill="#ffffff"/>
    <circle cx="0" cy="0" r="5" fill="#ffffff" opacity="0.35"/>
  </g>

  <!-- 4. THE MOON -->
  <g>
    <!-- Outer Soft Glow -->
    <circle cx="620" cy="155" r="210" fill="url(#moonGlow)" class="moon-halo"/>
    <circle cx="620" cy="155" r="95" fill="#fff8de" opacity="0.16"/>
    <!-- Moon Disc -->
    <circle cx="620" cy="155" r="56" fill="url(#moonSurface)"/>
    <!-- Subtle Moon Seas / Craters -->
    <g fill="#e0c88d" opacity="0.38">
      <ellipse cx="602" cy="134" rx="13" ry="9" transform="rotate(-18 602 134)"/>
      <circle cx="642" cy="144" r="11"/>
      <ellipse cx="630" cy="176" rx="17" ry="11" transform="rotate(12 630 176)"/>
      <circle cx="592" cy="168" r="7.5"/>
      <circle cx="614" cy="152" r="5"/>
      <circle cx="652" cy="168" r="4.5"/>
    </g>
    <!-- Bright Rim Highlight -->
    <path d="M578,118 A56,56 0 0,1 664,121 A54,55 0 0,0 578,118 Z" fill="#ffffff" opacity="0.7"/>
  </g>

  <!-- 5. DISTANT HILLS & BACKGROUND TREES -->
  <!-- Far Mountain Range -->
  <path d="M-20,455 Q110,375 255,418 T535,388 Q685,355 820,415 L820,600 L-20,600 Z" fill="url(#hillFar)"/>
  <!-- Moonlit Rim on Far Hills -->
  <path d="M255,418 Q395,455 535,388 Q685,355 820,415" fill="none" stroke="#53629e" stroke-width="1.2" opacity="0.35"/>

  <!-- Far Pine Ridge (Right) -->
  <g fill="#161d3d" opacity="0.9">
    <use href="#pine" transform="translate(555, 360) scale(0.42)"/>
    <use href="#pine" transform="translate(572, 353) scale(0.5)"/>
    <use href="#pine" transform="translate(590, 357) scale(0.38)"/>
    <use href="#pine" transform="translate(638, 345) scale(0.55)"/>
    <use href="#pine" transform="translate(658, 340) scale(0.68)"/>
    <use href="#pine" transform="translate(678, 346) scale(0.5)"/>
    <use href="#pine" transform="translate(695, 350) scale(0.45)"/>
    <use href="#pine" transform="translate(742, 358) scale(0.62)"/>
    <use href="#pine" transform="translate(762, 366) scale(0.48)"/>
  </g>

  <!-- Valley Mist Layer 1 -->
  <rect x="0" y="385" width="800" height="85" fill="url(#mistGrad)"/>

  <!-- Midground Hills -->
  <path d="M-20,432 Q155,392 335,442 T695,420 Q760,412 820,430 L820,600 L-20,600 Z" fill="url(#hillMid)"/>

  <!-- Midground Pine Forest (Left & Right) -->
  <g fill="#0c1024">
    <!-- Left cluster -->
    <use href="#pine" transform="translate(22, 365) scale(0.85)"/>
    <use href="#pine" transform="translate(48, 354) scale(1.05)"/>
    <use href="#pine" transform="translate(76, 368) scale(0.8)"/>
    <use href="#pine" transform="translate(98, 378) scale(0.65)"/>
    <use href="#pine" transform="translate(132, 375) scale(0.75)"/>
    <use href="#pine" transform="translate(154, 386) scale(0.58)"/>
    <!-- Right cluster -->
    <use href="#pine" transform="translate(612, 382) scale(0.68)"/>
    <use href="#pine" transform="translate(635, 372) scale(0.85)"/>
    <use href="#pine" transform="translate(708, 364) scale(0.92)"/>
    <use href="#pine" transform="translate(736, 350) scale(1.12)"/>
    <use href="#pine" transform="translate(768, 365) scale(0.88)"/>
    <use href="#pine" transform="translate(792, 375) scale(0.7)"/>
  </g>

  <!-- Subtle Moonlight Highlights on Right Midground Pines -->
  <g fill="#3a4982" opacity="0.3">
    <path d="M736,350 L725,379 L730,378 L719,406 L727,404 L714,435 L736,435 Z"/>
    <path d="M708,364 L699,388 L703,387 L694,410 L701,408 L690,434 L708,434 Z"/>
    <path d="M635,372 L627,394 L631,393 L622,414 L628,412 L618,436 L635,436 Z"/>
  </g>

  <!-- Valley Mist Layer 2 -->
  <rect x="0" y="425" width="800" height="75" fill="url(#mistGrad)"/>

  <!-- 6. FOREGROUND HILL -->
  <g>
    <!-- Main Hill Shape -->
    <path d="M-20,535 C105,455 245,442 365,458 C495,475 635,525 820,552 L820,610 L-20,610 Z" fill="url(#hillFg)"/>

    <!-- Moonlit Rim Highlight on Foreground Hill -->
    <path d="M120,478 C220,448 310,450 385,461 C490,476 595,512 730,538" fill="none" stroke="#6374b5" stroke-width="2" opacity="0.45"/>

    <!-- Foreground Silhouetted Grass & Flora -->
    <g fill="#080b18">
      <!-- Left grass tuft -->
      <path d="M155,472 Q148,452 140,446 Q146,456 150,473 Z"/>
      <path d="M158,471 Q158,448 154,440 Q156,453 155,472 Z"/>
      <path d="M161,471 Q167,453 174,447 Q166,457 160,472 Z"/>

      <!-- Near-fox grass blades -->
      <path d="M258,460 Q250,443 242,438 Q249,447 254,461 Z"/>
      <path d="M262,459 Q262,440 258,433 Q259,444 259,460 Z"/>

      <!-- Right slope grass & wildflower stems -->
      <path d="M432,469 Q438,448 447,441 Q439,452 436,470 Z"/>
      <path d="M436,470 Q446,454 456,450 Q446,458 439,471 Z"/>
      <path d="M429,468 Q427,449 422,442 Q425,452 426,469 Z"/>

      <path d="M518,488 Q525,468 534,460 Q526,472 522,489 Z"/>
      <path d="M514,487 Q512,470 506,462 Q510,472 511,487 Z"/>
    </g>

    <!-- Tiny Moonlit Wildflower Dots -->
    <g fill="#8ea4ed" opacity="0.6">
      <circle cx="154" cy="439" r="1.5"/>
      <circle cx="140" cy="445" r="1.2"/>
      <circle cx="447" cy="440" r="1.6"/>
      <circle cx="422" cy="441" r="1.3"/>
      <circle cx="534" cy="459" r="1.4"/>
    </g>
  </g>

  <!-- Ambient Fireflies near the hill -->
  <g class="firefly-1">
    <circle cx="465" cy="432" r="4.5" fill="#fff2a1" opacity="0.25"/>
    <circle cx="465" cy="432" r="1.6" fill="#fffbe0"/>
  </g>
  <g class="firefly-2">
    <circle cx="215" cy="422" r="4" fill="#fff2a1" opacity="0.25"/>
    <circle cx="215" cy="422" r="1.4" fill="#fffbe0"/>
  </g>

  <!-- 7. THE FOX -->
  <g id="fox">
    <!-- Ground Contact Shadow -->
    <ellipse cx="328" cy="472" rx="68" ry="12" fill="#04050c" opacity="0.75"/>

    <!-- Back Ear (Right ear, further from viewer) -->
    <g>
      <path d="M352,333 L366,296 L375,335 Z" fill="#9c2c13"/>
      <path d="M357,331 L365,303 L371,333 Z" fill="#2b1216"/>
    </g>

    <!-- Front Leg (Seated, straight down on the right) -->
    <path d="M366,406 C373,428 377,448 379,465 C382,466 387,467 387,471 C387,474 373,474 368,472 C365,456 359,435 352,414 Z" fill="#b33417"/>
    <!-- Dark Sock on Front Leg -->
    <path d="M374,441 C376,451 378,459 379,465 C382,466 387,467 387,471 C387,474 373,474 368,472 C366,462 364,452 362,443 C366,441 370,440 374,441 Z" fill="#1d1118"/>

    <!-- Torso / Back -->
    <path d="M294,466 C282,434 292,385 325,356 C339,346 358,348 368,362 C382,382 385,405 375,436 C367,458 352,471 326,472 C308,472 298,470 294,466 Z" fill="url(#foxFur)"/>

    <!-- Deeper Shading along Left Back & Haunch -->
    <path d="M294,466 C282,434 292,385 325,356 C332,351 339,349 346,349 C318,378 308,422 318,471 C305,471 297,469 294,466 Z" fill="url(#foxBackShadow)"/>

    <!-- Folded Hind Leg / Haunch Detail -->
    <path d="M302,422 C324,416 346,432 348,458 C349,465 358,466 358,471 C358,474 335,474 322,472 C302,470 294,464 295,448 C295,436 298,427 302,422 Z" fill="url(#foxBackShadow)"/>
    <!-- Hind Paw Dark Tip -->
    <path d="M344,462 C348,463 358,466 358,471 C358,474 342,474 334,473 C335,468 339,463 344,462 Z" fill="#1d1118"/>

    <!-- White Chest Ruff (Facing Moon) -->
    <path d="M362,354 C378,366 387,385 384,405 C382,418 374,427 364,432 C362,417 356,406 347,398 C352,398 356,396 358,392 C352,384 348,372 352,358 Z" fill="url(#foxCream)"/>

    <!-- Head & Pointed Snout (Tilted Upward toward the Moon) -->
    <path d="M320,358 C316,342 325,326 343,323 C357,321 368,324 379,327 C391,330 403,329 409,331 C411,333 409,338 403,343 C395,349 382,354 368,357 C352,361 332,363 320,358 Z" fill="url(#foxFur)"/>

    <!-- White Cheek & Under-Jaw Marking -->
    <path d="M409,331 C411,333 409,338 403,343 C394,350 380,355 364,358 C355,356 349,351 348,345 C358,346 369,344 378,339 C389,334 399,333 409,331 Z" fill="url(#foxCream)"/>

    <!-- Nose -->
    <ellipse cx="408" cy="331.5" rx="3.5" ry="2.6" transform="rotate(-12 408 331.5)" fill="#171016"/>
    <ellipse cx="407.2" cy="330.6" rx="1.2" ry="0.7" fill="#ffffff" opacity="0.65"/>

    <!-- Eye (Closed/peaceful or bright-eyed looking up at the moon) -->
    <ellipse cx="375" cy="334.5" rx="3.4" ry="2.8" transform="rotate(-12 375 334.5)" fill="#171016"/>
    <!-- Moon reflection in the eye -->
    <circle cx="376.2" cy="333.6" r="1.2" fill="#ffffff"/>
    <circle cx="374.2" cy="335.5" r="0.6" fill="#ffefc2" opacity="0.8"/>

    <!-- Subtle Eyebrow / Snout Bridge Highlight -->
    <path d="M352,323 C363,322 373,325 384,328 C393,330 401,329 406,330" fill="none" stroke="#ffcf9e" stroke-width="1.3" stroke-linecap="round" opacity="0.8"/>

    <!-- Front Ear (Left ear, with gentle twitch animation) -->
    <g class="fox-ear">
      <!-- Outer Ear -->
      <path d="M324,342 L334,296 C335,293 338,293 340,296 L354,332 C345,337 334,341 324,342 Z" fill="url(#foxFur)"/>
      <!-- Inner Ear Dark/Warm Fur -->
      <path d="M331,337 L337,303 L349,331 C343,334 337,336 331,337 Z" fill="#3b1719"/>
      <!-- Ear Rim Light -->
      <path d="M337,295 L353,331" fill="none" stroke="#ffbe85" stroke-width="1" stroke-linecap="round" opacity="0.65"/>
    </g>

    <!-- Moonlit Rim Highlights on Chest & Front Leg -->
    <path d="M372,362 C382,374 386,390 383,405" fill="none" stroke="#ffffff" stroke-width="1.4" stroke-linecap="round" opacity="0.75"/>
    <path d="M369,412 C374,429 377,446 379,463" fill="none" stroke="#ffbe85" stroke-width="1.1" stroke-linecap="round" opacity="0.5"/>

    <!-- Bushy Tail (Animated gentle sway) -->
    <g class="fox-tail">
      <!-- Main Orange Tail Body -->
      <path d="M314,468 C288,480 245,482 212,456 C182,432 174,392 194,368 C206,385 228,390 256,408 C282,425 304,446 322,462 Z" fill="url(#foxFur)"/>

      <!-- Tail Underside / Shadow Fur -->
      <path d="M314,468 C288,480 245,482 212,456 C192,440 182,417 184,396 C198,424 228,448 265,456 C286,461 302,464 314,468 Z" fill="url(#foxBackShadow)" opacity="0.75"/>

      <!-- Fluffy White Tail Tip -->
      <path d="M194,368 C181,384 180,409 194,433 C198,424 202,418 210,422 C210,412 215,406 225,409 C223,399 228,394 236,396 C219,384 204,379 194,368 Z" fill="url(#foxCream)"/>

      <!-- Subtle Top Highlight on Tail -->
      <path d="M195,370 C208,385 229,391 256,408 C276,421 295,437 312,452" fill="none" stroke="#ffbe85" stroke-width="1.2" stroke-linecap="round" opacity="0.45"/>
    </g>

    <!-- Small Foreground Grass Blades Overlapping Fox's Base -->
    <g fill="#080b18">
      <path d="M306,476 Q300,460 293,454 Q299,463 302,476 Z"/>
      <path d="M310,476 Q311,458 308,450 Q308,461 307,476 Z"/>
      <path d="M342,476 Q348,462 355,457 Q347,464 345,476 Z"/>
    </g>
  </g>
</svg>