Nemotron 3 Ultra (free)

We need to produce a single SVG file with viewBox 0 0 800 600. No external references, no JS. Use SMIL or CSS animations. Must include fox, hill, moon with glow, stars, trees, distant hills. Coherent color palette, at least one gradient. Animations: stars twinkling, fox tail swaying, shooting star every 4 seconds, first within 2 seconds.

We need to write SVG code with appropriate shapes. Let's design.

We'll use a night color palette: dark blues, purples, with moon yellowish, stars white, fox orange/brown.

We'll create gradients for sky (radial gradient for moon glow, linear gradient for sky). Use defs.

Fox: body, head, ears, snout, eyes, tail. Tail with white tip. Tail swaying animation: rotate slightly around base.

Stars: many small circles with animate opacity twinkling.

Shooting star: a path or line that moves across sky. Use animateMotion along a path, repeat every 4s, begin at 0.5s? First within 2 seconds: set begin="0.5s" and repeatDur="indefinite". Or use begin="0s; 4s; 8s..." but first within 2 seconds: begin="1s". We'll do begin="1s" and repeat every 4s: repeatCount="indefinite" with dur="4s". But SMIL animateMotion can have repeatCount and dur. We'll create a shooting star group with a polygon (triangle) and animate its transform.

Better: Use <animateTransform> for translation and rotation? Simpler: create a shooting star as a <line> with stroke gradient, animate its x1,y1,x2,y2? But SMIL can animate attributes. Could use <animate> on x1,y1 etc. But easier: create a group with a path representing a streak, and animate its transform (translate) along a diagonal path.

We'll define a path for shooting star motion: from top right to bottom left. Use animateMotion with path.

We'll need to ensure all animations loop seamlessly.

Let's outline SVG structure:

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a0a2a"/>
      <stop offset="100%" stop-color="#1a1a4a"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#fff8c6" stop-opacity="1"/>
      <stop offset="70%" stop-color="#ffeb8a" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#ffeb8a" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="foxBodyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e87b2e"/>
      <stop offset="100%" stop-color="#c45a1a"/>
    </linearGradient>
    <linearGradient id="tailGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#e87b2e"/>
      <stop offset="80%" stop-color="#e87b2e"/>
      <stop offset="100%" stop-color="#ffffff"/>
    </linearGradient>
  </defs>

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

  <!-- Distant hills -->
  <path d="M0,400 Q200,350 400,380 T800,380 L800,600 L0,600 Z" fill="#101030" opacity="0.8"/>
  <path d="M0,450 Q200,420 400,440 T800,440 L800,600 L0,600 Z" fill="#0a0a25" opacity="0.6"/>

  <!-- Hill where fox sits -->
  <path d="M0,500 Q200,450 400,480 Q600,510 800,500 L800,600 L0,600 Z" fill="#1a1a3a"/>

  <!-- Moon with glow -->
  <circle cx="650" cy="120" r="80" fill="url(#moonGlow)" filter="url(#blur)"/> but we don't have filter. Could just use gradient with opacity. But we can add a larger circle with gradient for glow. Let's do two circles: outer glow larger with radial gradient, inner moon solid.

  Actually we have radial gradient moonGlow that fades to transparent. So a circle with that gradient will act as glow. Then a smaller circle for moon surface.

  <circle cx="650" cy="120" r="90" fill="url(#moonGlow)"/>
  <circle cx="650" cy="120" r="50" fill="#fff8c6"/>

  <!-- Stars -->
  We'll create many <circle> with class "star" and animate opacity.

  We'll generate maybe 30 stars with random positions. Since we can't use script, we must manually write them. But we can write a bunch with different positions and animation delays.

  We'll use <animate> attributeName="opacity" values="1;0.2;1" dur="2s" repeatCount="indefinite" begin="0s" but with different begin times for twinkling.

  We'll write maybe 20 stars.

  <!-- Trees -->
  Simple triangles for pine trees on distant hills.

  <!-- Fox -->
  Group for fox with tail separate for animation.

  Fox body: use paths.

  We'll design fox sitting on hill. Position around x=200, y=400 (on hill). Hill peaks at 450? Actually hill path: M0,500 Q200,450 400,480 Q600,510 800,500. So at x=200, hill y~450. Fox sitting, so its bottom at y~450.

  Let's define fox group with transform translate(200,400) maybe.

  Fox parts:
  - Body: ellipse or path.
  - Head: circle with snout.
  - Ears: two triangles.
  - Eyes: small circles.
  - Tail: path with gradient, attached to body, animate rotation.

  We'll create tail as a separate group with transform-origin at base, animate rotation.

  Use <animateTransform> type="rotate" from="-10" to="10" dur="3s" repeatCount="indefinite" additive="sum"? Actually we want swaying: rotate back and forth. Use values="-10;10;-10" dur="4s" repeatCount="indefinite". Center of rotation at tail base.

  We'll set transform-origin via transform="rotate(0, tailBaseX, tailBaseY)" but SMIL animateTransform can specify rotation around a point using "rotate(angle, cx, cy)". So we can do <animateTransform attributeName="transform" type="rotate" values="-10, tailBaseX, tailBaseY; 10, tailBaseX, tailBaseY; -10, tailBaseX, tailBaseY" dur="4s" repeatCount="indefinite"/>.

  Need to compute tail base coordinates in fox group coordinates.

  Let's design fox in its own coordinate system (0,0 at fox center?). Better to draw fox with absolute coordinates in the main SVG, but then tail animation easier if we group tail and use transform.

  We'll create a group <g id="fox"> with all fox parts. Then tail is a <path id="tail"> inside. We'll apply animateTransform on the tail path.

  But animateTransform on a path will rotate the path around origin (0,0). So we need to set the tail's base at origin? Or we can wrap tail in a <g> with transform translating base to origin, then rotate, then translate back. Simpler: define tail path with its base at (0,0) and then position the tail group with transform="translate(tailBaseX, tailBaseY)". Then animateTransform on that group with rotate around (0,0). That works.

  So we'll create a group for tail: <g id="tailGroup" transform="translate(300, 350)"> (example coordinates). Then inside, the tail path drawn relative to base at (0,0). Then animateTransform on tailGroup.

  Let's design fox coordinates:

  We'll place fox center at (200, 400) on hill. But we'll draw each part with absolute coordinates.

  Let's sketch:

  Hill at x=200, y≈450. Fox sitting, so its hind legs on hill. Body roughly from x=150 to 250, y=350 to 450.

  We'll define:

  Body: ellipse cx=200 cy=420 rx=50 ry=30 fill=url(#foxBodyGradient)

  Head: circle cx=260 cy=380 r=30 fill=url(#foxBodyGradient)

  Ears: two triangles: left ear points (240,350) (250,310) (260,350). Right ear (260,350) (270,310) (280,350). Fill same gradient.

  Snout: ellipse cx=285 cy=385 rx=15 ry=10 fill="#d46b2a"

  Nose: small circle cx=295 cy=385 r=3 fill="#333"

  Eyes: two circles: left eye cx=250 cy=370 r=4 fill="#333", right eye cx=270 cy=370 r=4 fill="#333". Maybe white highlight.

  Tail: base at body rear: around (150, 420). Tail extends outward and upward. We'll create tail group at (150, 420). Tail path: from (0,0) to (-60, -80) to (-100, -50) to (-80, -20) to (0,0) - a bushy shape. Fill with tailGradient.

  Tail tip white: the gradient already goes to white at end.

  Tail animation: rotate around (0,0) from -15 to 15 degrees.

  Now, we need to ensure the fox is clearly recognizable.

  Trees: on distant hills, maybe at x=100, 300, 500, 700 on the far hill (y~380). Simple triangles.

  Shooting star: create a group with a path representing a streak (a thin triangle). Use animateMotion along a path from top right to bottom left. Path: M 750, 50 L 50, 550. Duration 2s? But requirement: shooting star crossing the sky every 4 seconds, first within 2 seconds. So we can set begin="1s" dur="3s" repeatCount="indefinite"? But crossing should take maybe 2 seconds. Let's do dur="2s" repeatCount="indefinite" begin="1s". But then it would repeat every 2s. We need every 4 seconds. So we can set repeatDur="4s"? Actually SMIL: if we set dur="2s" and repeatCount="indefinite", it repeats every 2s. To have a pause, we can use a longer dur with keyTimes? Simpler: use animateMotion with dur="4s" and the path covers the whole motion in 4s, but the star is visible only part of the time? We can animate opacity to show only during the streak. But easier: create a shooting star that moves across in 2s, then waits 2s invisible. We can animate opacity with keyTimes: visible for first half, invisible for second half. But that's complex.

  Alternative: Use two animations: one for motion (dur="2s") and one for opacity (dur="4s") with keyTimes. But we can also just set the motion dur="4s" and make the star move slowly across the sky, but shooting stars are fast. However, requirement: "a shooting star crossing the sky every 4 seconds (the first one within 2 seconds)." So we can have a shooting star that appears, crosses quickly, disappears, and then 4 seconds later another. We can achieve by having the shooting star group with animateMotion dur="2s" and repeatCount="indefinite" but with begin="1s; 5s; 9s..." but SMIL doesn't support multiple begin times easily? It does: begin="1s; 5s; 9s" etc. But we need infinite. We can use begin="1s" and then set repeatCount="indefinite" with a syncbase? Actually we can set begin="1s; 1s+4s; 1s+8s" but not infinite. We can use begin="1s" and then set repeatDur="indefinite" and use a <animate> with repeatCount="indefinite" and dur="4s" but the motion only lasts 2s? Hmm.

  Simpler: Use CSS animation inside SVG? But CSS animations also loop. We can define a keyframes for shooting star that translates and fades, with animation-duration: 4s, iteration-count: infinite. And set animation-delay: 1s for first within 2 seconds. That might be easier. Since we can include <style> in SVG. CSS animations are supported in SVG. We'll use CSS for shooting star and maybe for tail and stars twinkling? But stars twinkling we can do with SMIL animate on each star. But we can also use CSS with nth-child? But we have many stars individually, so SMIL per star is fine.

  For shooting star, we can create a single element (e.g., a <line> or <polygon>) and apply CSS animation.

  Let's do CSS for shooting star and tail swaying? Tail swaying can be CSS too. But SMIL is fine. We'll mix.

  However, the requirement: "Animations (SMIL or CSS inside the SVG), all looping seamlessly". So both allowed.

  We'll use SMIL for stars twinkling (each star has animate). For tail, use SMIL animateTransform. For shooting star, use CSS animation for simplicity.

  Let's write CSS inside <style>:

  <style>
    .shooting-star {
      opacity: 0;
      animation: shoot 4s infinite;
      animation-delay: 1s;
    }
    @keyframes shoot {
      0% { transform: translate(0,0) rotate(-30deg); opacity: 0; }
      5% { opacity: 1; }
      50% { transform: translate(-700px, 500px) rotate(-30deg); opacity: 1; }
      55% { opacity: 0; }
      100% { opacity: 0; }
    }
  </style>

  But CSS transform on SVG elements works in modern browsers. However, the transform origin may be center of element. We'll create a shooting star as a <line> or <polygon> at starting position (top right). The animation will translate it. But CSS transform uses pixels, but our viewBox is 800x600. The translation values should be in user units (same as viewBox). In CSS, transform units are px, but in SVG, 1px = 1 user unit if no scaling. Since viewBox 800x600 and viewport maybe same, it's okay. But we need to ensure the element's initial position is at top right. We'll set the shooting star group at (750, 50) and then animate transform: translate(-700, 500) to go to bottom left. That works.

  But CSS animation on SVG elements may not be supported in all browsers? But the task says latest Chrome, so it's fine.

  However, we must ensure the shooting star is visible only during the streak. The keyframes above make it visible 5%-55%. That's a 2.5s window out of 4s. Good.

  Now stars twinkling: We'll create many <circle class="star"> with SMIL animate.

  Example star:
  <circle cx="100" cy="100" r="1.5" fill="white">
    <animate attributeName="opacity" values="1;0.3;1" dur="3s" repeatCount="indefinite" begin="0.5s"/>
  </circle>

  We'll give each star a random begin offset to make them twinkle asynchronously.

  We'll manually write maybe 30 stars with different positions and begin times.

  Let's generate coordinates mentally: spread across sky (y<400). We'll write a bunch.

  Trees: simple triangles on distant hills. Use path for each tree: a triangle for foliage and a rectangle for trunk.

  We'll place them on the far hill (y~380). For x=150, 350, 550, 750.

  Now, assemble SVG.

  We must ensure the SVG is valid and self-contained.

  Let's write the code.

  We'll start with <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">.

  Then <defs> with gradients.

  Then <style> for shooting star.

  Then background rect.

  Then distant hills.

  Then hill.

  Then moon.

  Then stars.

  Then trees.

  Then fox.

  Then shooting star element.

  Let's craft.

  Note: The fox tail animation uses SMIL animateTransform on the tail group. We'll give tail group id="tailGroup". We'll set its transform="translate(150, 420)" (base coordinates). Then inside, the tail path drawn relative to base. Then animateTransform on tailGroup.

  But the tail group is inside the fox group? We'll just place tailGroup at absolute coordinates.

  Let's compute fox parts absolute coordinates:

  We'll set a group for fox with transform="translate(0,0)" but we'll just place each element with absolute coordinates.

  Body: ellipse cx=200 cy=420 rx=50 ry=30 fill="url(#foxBodyGradient)"
  Head: circle cx=260 cy=380 r=30 fill="url(#foxBodyGradient)"
  Ears: two paths.
  Snout: ellipse cx=285 cy=385 rx=15 ry=10 fill="#d46b2a"
  Nose: circle cx=295 cy=385 r=3 fill="#333"
  Eyes: circles at (250,370) and (270,370) r=4 fill="#333"
  Maybe white highlights: small circles at (248,368) r=1.5 fill="white", (268,368) r=1.5 fill="white"

  Tail group: transform="translate(150, 420)" (base at left side of body). Inside tailGroup:
    <path d="M0,0 Q -40,-30 -60,-60 Q -80,-80 -100,-50 Q -80,-30 -60,-10 Q -30,0 0,0 Z" fill="url(#tailGradient)"/>
  Then animateTransform on tailGroup:
    <animateTransform attributeName="transform" type="rotate" values="-15;15;-15" dur="4s" repeatCount="indefinite" additive="replace"/> But careful: the transform attribute already has translate. If we animateTransform with type="rotate", it will replace the transform? Actually animateTransform adds to the transform list if additive="sum". But we want to rotate around the base (0,0) after the translation. So we can set the tailGroup's transform to "translate(150,420)" and then animateTransform with type="rotate" and additive="sum" will add rotation after translation? The transform list order matters. In SVG, transform attribute can have multiple functions: e.g., transform="translate(150,420) rotate(0)". If we animate the rotate value, we can use animateTransform with attributeName="transform" type="rotate" and it will animate the rotate part. But we need to have a rotate in the transform list initially. So we can set transform="translate(150,420) rotate(0)". Then animateTransform from="-15" to="15" etc. But animateTransform with from/to only works if there is a single transform function? Actually animateTransform can animate a specific transform function by specifying type. It will create a transform function of that type and animate its value. If the element already has a transform list, the animation will be added to the list (if additive="sum") or replace? The spec: animateTransform adds a transform to the list. By default additive="replace"? Actually for animateTransform, the default additive is "replace"? I'm not 100% sure. Safer: wrap tail in a group: outer group with translate, inner group with rotate animation. So:

  <g transform="translate(150,420)">
    <g id="tailRot">
      <path .../>
      <animateTransform attributeName="transform" type="rotate" values="-15;15;-15" dur="4s" repeatCount="indefinite"/>
    </g>
  </g>

  This way, the inner group initially has no transform, animateTransform will add rotate transform. That works.

  So we'll do that.

  Now shooting star: We'll create a group with class="shooting-star" and transform="translate(750,50)" (starting position). Inside, a polygon for the star streak: maybe a thin triangle: <polygon points="0,0 20,5 0,10" fill="white" opacity="0.8"/> But we want a streak, maybe a line with gradient. Simpler: a <line> with stroke="white" stroke-width="2" stroke-linecap="round" x1="0" y1="0" x2="-100" y2="50"? But CSS animation will transform the whole group. We'll just use a polygon shaped like a star with a tail.

  Let's create a path for a shooting star: a small triangle for the head and a long tail. But we can just use a <line> with a gradient stroke. However, CSS animation on stroke might be tricky. Simpler: use a <polygon> for a streak: points="0,0 30,2 0,4" but that's short. We'll make a longer shape: points="0,0 100,5 0,10" but that's 100 units long. We'll set the group at (750,50) and animate translate(-700,500). That will move it across.

  We'll define the shooting star group:

  <g class="shooting-star" transform="translate(750,50)">
    <polygon points="0,0 80,2 0,4" fill="white" opacity="0.9"/>
  </g>

  But the polygon is very thin. Maybe better: a path with a gradient? But we can keep simple.

  Now CSS for .shooting-star: we need to define animation. Since we are using transform on the group, the polygon will move.

  We'll write:

  <style>
    .shooting-star {
      opacity: 0;
      animation: shoot 4s infinite;
      animation-delay: 1s;
    }
    @keyframes shoot {
      0% { transform: translate(0,0) rotate(-30deg); opacity: 0; }
      5% { opacity: 1; }
      50% { transform: translate(-700px, 500px) rotate(-30deg); opacity: 1; }
      55% { opacity: 0; }
      100% { opacity: 0; }
    }
  </style>

  Note: In SVG, transform attribute is separate from CSS transform. But CSS transform property works on SVG elements in modern browsers. However, the initial transform="translate(750,50)" is an SVG transform attribute. CSS transform will be applied in addition. That's fine.

  But we must ensure the animation uses the correct units. The translate values in CSS are in px, which correspond to user units. Since viewBox is 800x600, 700px is 700 units. Good.

  Now stars: We'll create maybe 25 stars. We'll write them manually with varying cx, cy, r (1-2), and animate opacity with different begin times.

  Let's list star positions (x,y) and begin offsets (0-3s). We'll write them in the SVG.

  We'll also add a few larger stars with cross shape? But circles are fine.

  We'll generate a set:

  Star 1: cx=50 cy=80 r=1.5 begin=0.2
  Star 2: cx=120 cy=50 r=1 begin=0.5
  Star 3: cx=200 cy=120 r=1.2 begin=1.0
  Star 4: cx=300 cy=60 r=1.8 begin=1.3
  Star 5: cx=400 cy=90 r=1 begin=0.8
  Star 6: cx=500 cy=40 r=1.5 begin=1.5
  Star 7: cx=600 cy=110 r=1.2 begin=2.0
  Star 8: cx=700 cy=80 r=1 begin=0.3
  Star 9: cx=150 cy=200 r=1.3 begin=1.8
  Star 10: cx=250 cy=180 r=1.6 begin=2.2
  Star 11: cx=350 cy=220 r=1 begin=0.7
  Star 12: cx=450 cy=150 r=1.4 begin=1.1
  Star 13: cx=550 cy=190 r=1.2 begin=2.5
  Star 14: cx=650 cy=160 r=1.5 begin=0.9
  Star 15: cx=750 cy=200 r=1 begin=1.4
  Star 16: cx=80 cy=300 r=1.3 begin=2.8
  Star 17: cx=180 cy=280 r=1 begin=0.4
  Star 18: cx=280 cy=320 r=1.7 begin=1.6
  Star 19: cx=380 cy=260 r=1.2 begin=2.1
  Star 20: cx=480 cy=310 r=1.5 begin=0.6
  Star 21: cx=580 cy=290 r=1 begin=1.9
  Star 22: cx=680 cy=330 r=1.3 begin=2.3
  Star 23: cx=720 cy=250 r=1.6 begin=0.1
  Star 24: cx=100 cy=380 r=1 begin=1.2
  Star 25: cx=200 cy=350 r=1.4 begin=2.6

  We'll write each with <animate>.

  Now trees: On distant hills (the first far hill at y~380). We'll place trees at x=100, 300, 500, 700. Each tree: a trunk rectangle and a triangle foliage.

  For each tree:
    <rect x="x-5" y="380" width="10" height="40" fill="#2a1a0a"/>
    <path d="M x-30,380 L x,320 L x+30,380 Z" fill="#1a3a1a"/>

  But the hill is not flat; the distant hill path is at y~380? Actually the distant hill path: M0,400 Q200,350 400,380 T800,380. So at x=100, y~? Let's approximate: we'll just place trees at y=380 base.

  We'll do four trees.

  Now, assemble all.

  We must ensure the SVG is valid and all IDs unique.

  Let's write the full SVG code.

  We'll start with the SVG tag.

  Note: The viewBox is 0 0 800 600.

  We'll include the xmlns.

  We'll put <defs> first.

  Then <style>.

  Then background.

  Then distant hills.

  Then hill.

  Then moon.

  Then stars.

  Then trees.

  Then fox.

  Then shooting star.

  Let's write.

  We'll be careful with the order: background, then far hills, then hill, then moon, then stars, then trees, then fox, then shooting star (on top).

  The moon should be behind stars? Actually stars are in sky, moon is also in sky. But moon glow might be behind stars? Usually stars are behind moon? But we can put moon before stars so stars appear on top. But stars are small, moon is large. It's fine either way. We'll put moon before stars.

  The shooting star should be on top of everything.

  Now, write the code.

  We'll need to escape any & in values? Not needed.

  Let's produce the final SVG.

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a0a2a"/>
      <stop offset="100%" stop-color="#1a1a4a"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#fff8c6" stop-opacity="1"/>
      <stop offset="70%" stop-color="#ffeb8a" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#ffeb8a" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="foxBodyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e87b2e"/>
      <stop offset="100%" stop-color="#c45a1a"/>
    </linearGradient>
    <linearGradient id="tailGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#e87b2e"/>
      <stop offset="80%" stop-color="#e87b2e"/>
      <stop offset="100%" stop-color="#ffffff"/>
    </linearGradient>
  </defs>

  <style>
    .shooting-star {
      opacity: 0;
      animation: shoot 4s infinite;
      animation-delay: 1s;
    }
    @keyframes shoot {
      0%   { transform: translate(0, 0) rotate(-30deg); opacity: 0; }
      5%   { opacity: 1; }
      50%  { transform: translate(-700px, 500px) rotate(-30deg); opacity: 1; }
      55%  { opacity: 0; }
      100% { opacity: 0; }
    }
  </style>

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

  <!-- Distant hills -->
  <path d="M0,400 Q200,350 400,380 T800,380 L800,600 L0,600 Z" fill="#101030" opacity="0.8"/>
  <path d="M0,450 Q200,420 400,440 T800,440 L800,600 L0,600 Z" fill="#0a0a25" opacity="0.6"/>

  <!-- Main hill -->
  <path d="M0,500 Q200,450 400,480 Q600,510 800,500 L800,600 L0,600 Z" fill="#1a1a3a"/>

  <!-- Moon with glow -->
  <circle cx="650" cy="120" r="90" fill="url(#moonGlow)"/>
  <circle cx="650" cy="120" r="50" fill="#fff8c6"/>

  <!-- Stars -->
  <circle cx="50"  cy="80"  r="1.5" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3s" repeatCount="indefinite" begin="0.2s"/></circle>
  <circle cx="120" cy="50"  r="1"   fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.5s" repeatCount="indefinite" begin="0.5s"/></circle>
  <circle cx="200" cy="120" r="1.2" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.2s" repeatCount="indefinite" begin="1.0s"/></circle>
  <circle cx="300" cy="60"  r="1.8" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.8s" repeatCount="indefinite" begin="1.3s"/></circle>
  <circle cx="400" cy="90"  r="1"   fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3s"   repeatCount="indefinite" begin="0.8s"/></circle>
  <circle cx="500" cy="40"  r="1.5" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.7s" repeatCount="indefinite" begin="1.5s"/></circle>
  <circle cx="600" cy="110" r="1.2" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.1s" repeatCount="indefinite" begin="2.0s"/></circle>
  <circle cx="700" cy="80"  r="1"   fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.9s" repeatCount="indefinite" begin="0.3s"/></circle>
  <circle cx="150" cy="200" r="1.3" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.3s" repeatCount="indefinite" begin="1.8s"/></circle>
  <circle cx="250" cy="180" r="1.6" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.6s" repeatCount="indefinite" begin="2.2s"/></circle>
  <circle cx="350" cy="220" r="1"   fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.4s" repeatCount="indefinite" begin="0.7s"/></circle>
  <circle cx="450" cy="150" r="1.4" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.9s" repeatCount="indefinite" begin="1.1s"/></circle>
  <circle cx="550" cy="190" r="1.2" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.2s" repeatCount="indefinite" begin="2.5s"/></circle>
  <circle cx="650" cy="160" r="1.5" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.8s" repeatCount="indefinite" begin="0.9s"/></circle>
  <circle cx="750" cy="200" r="1"   fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.1s" repeatCount="indefinite" begin="1.4s"/></circle>
  <circle cx="80"  cy="300" r="1.3" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.7s" repeatCount="indefinite" begin="2.8s"/></circle>
  <circle cx="180" cy="280" r="1"   fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.3s" repeatCount="indefinite" begin="0.4s"/></circle>
  <circle cx="280" cy="320" r="1.7" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.5s" repeatCount="indefinite" begin="1.6s"/></circle>
  <circle cx="380" cy="260" r="1.2" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.2s" repeatCount="indefinite" begin="2.1s"/></circle>
  <circle cx="480" cy="310" r="1.5" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.9s" repeatCount="indefinite" begin="0.6s"/></circle>
  <circle cx="580" cy="290" r="1"   fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.4s" repeatCount="indefinite" begin="1.9s"/></circle>
  <circle cx="680" cy="330" r="1.3" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.6s" repeatCount="indefinite" begin="2.3s"/></circle>
  <circle cx="720" cy="250" r="1.6" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.1s" repeatCount="indefinite" begin="0.1s"/></circle>
  <circle cx="100" cy="380" r="1"   fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="2.8s" repeatCount="indefinite" begin="1.2s"/></circle>
  <circle cx="200" cy="350" r="1.4" fill="white"><animate attributeName="opacity" values="1;0.3;1" dur="3.3s" repeatCount="indefinite" begin="2.6s"/></circle>

  <!-- Trees on distant hill -->
  <g fill="#1a3a1a">
    <path d="M70,380 L100,320 L130,380 Z"/>
    <path d="M270,380 L300,320 L330,380 Z"/>
    <path d="M470,380 L500,320 L530,380 Z"/>
    <path d="M670,380 L700,320 L730,380 Z"/>
  </g>
  <g fill="#2a1a0a">
    <rect x="95" y="380" width="10" height="40"/>
    <rect x="295" y="380" width="10" height="40"/>
    <rect x="495" y="380" width="10" height="40"/>
    <rect x="695" y="380" width="10" height="40"/>
  </g>

  <!-- Fox -->
  <g>
    <!-- Body -->
    <ellipse cx="200" cy="420" rx="50" ry="30" fill="url(#foxBodyGradient)"/>
    <!-- Head -->
    <circle cx="260" cy="380" r="30" fill="url(#foxBodyGradient)"/>
    <!-- Ears -->
    <path d="M240,350 L250,310 L260,350 Z" fill="url(#foxBodyGradient)"/>
    <path d="M260,350 L270,310 L280,350 Z" fill="url(#foxBodyGradient)"/>
    <!-- Snout -->
    <ellipse cx="285" cy="385" rx="15" ry="10" fill="#d46b2a"/>
    <!-- Nose -->
    <circle cx="295" cy="385" r="3" fill="#333"/>
    <!-- Eyes -->
    <circle cx="250" cy="370" r="4" fill="#333"/>
    <circle cx="270" cy="370" r="4" fill="#333"/>
    <circle cx="248" cy="368" r="1.5" fill="white"/>
    <circle cx="268" cy="368" r="1.5" fill="white"/>
    <!-- Tail -->
    <g transform="translate(150,420)">
      <g id="tailRot">
        <path d="M0,0 Q -40,-30 -60,-60 Q -80,-80 -100,-50 Q -80,-30 -60,-10 Q -30,0 0,0 Z" fill="url(#tailGradient)"/>
        <animateTransform attributeName="transform" type="rotate" values="-15;15;-15" dur="4s" repeatCount="indefinite"/>
      </g>
    </g>
  </g>

  <!-- Shooting star -->
  <g class="shooting-star" transform="translate(750,50)">
    <polygon points="0,0 80,2 0,4" fill="white" opacity="0.9"/>
  </g>
</svg>