Gemini 3.8 Flash

by GoogleReasoningClean

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

How it went

Total time: 38.5 s
Cost: $0.026
Output tokens: 6,902
Spent thinking: 0 tokens
Speed: 194.8 tok/s
Console errors: 0

First token after: 3.1 s
First visible text after: 3.1 s
Prompt tokens: 533
Code size: 13.9 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.8-flash
Reasoning sent: {"effort":"low"}
Max output: 65,536 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 · 342 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
  <defs>
    <!-- Sky Gradient -->
    <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#050716" />
      <stop offset="40%" stop-color="#0c1033" />
      <stop offset="75%" stop-color="#191d4a" />
      <stop offset="100%" stop-color="#282347" />
    </linearGradient>

    <!-- Moon Glow Filter -->
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="12" result="blur1" />
      <feGaussianBlur stdDeviation="25" result="blur2" />
      <feMerge>
        <feMergeNode in="blur2" />
        <feMergeNode in="blur1" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <!-- Star Glow Filter -->
    <filter id="starGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="1.5" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <!-- Radial Gradients for Moon Glow -->
    <radialGradient id="moonAura" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fffde8" stop-opacity="0.35" />
      <stop offset="40%" stop-color="#fed695" stop-opacity="0.12" />
      <stop offset="100%" stop-color="#191d4a" stop-opacity="0" />
    </radialGradient>

    <radialGradient id="moonBody" cx="35%" cy="35%" r="65%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="70%" stop-color="#fff4d0" />
      <stop offset="100%" stop-color="#fae3a0" />
    </radialGradient>

    <!-- Hills Gradients -->
    <linearGradient id="farHillGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#161a38" />
      <stop offset="100%" stop-color="#0d0f22" />
    </linearGradient>

    <linearGradient id="midHillGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#11162e" />
      <stop offset="100%" stop-color="#080a14" />
    </linearGradient>

    <linearGradient id="foreHillGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0b0e1d" />
      <stop offset="100%" stop-color="#030408" />
    </linearGradient>

    <!-- Shooting Star Gradient -->
    <linearGradient id="shootingStarGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0" />
      <stop offset="70%" stop-color="#fed695" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#ffffff" stop-opacity="1" />
    </linearGradient>

    <!-- Pine Tree Template -->
    <g id="pineTree">
      <path d="M 0,-45 L 12,-25 L 7,-25 L 16,-5 L 10,-5 L 20,20 L -20,20 L -10,-5 L -16,-5 L -7,-25 L -12,-25 Z" fill="#090c1a" />
      <rect x="-2" y="20" width="4" height="6" fill="#05060d" />
    </g>
  </defs>

  <style>
    /* CSS Animations for smooth twinkling and effects */
    .twinkle-fast {
      animation: pulse 1.8s ease-in-out infinite alternate;
    }
    .twinkle-mid {
      animation: pulse 2.6s ease-in-out infinite alternate;
    }
    .twinkle-slow {
      animation: pulse 3.8s ease-in-out infinite alternate;
    }

    @keyframes pulse {
      0% { opacity: 0.2; transform: scale(0.8); }
      50% { opacity: 0.7; }
      100% { opacity: 1; transform: scale(1.2); }
    }

    /* Swaying fox tail animation */
    #foxTail {
      transform-origin: 345px 445px;
      animation: tailSway 4.5s ease-in-out infinite alternate;
    }

    @keyframes tailSway {
      0% {
        transform: rotate(0deg);
      }
      50% {
        transform: rotate(5deg) scaleY(1.02);
      }
      100% {
        transform: rotate(-6deg) scaleY(0.98);
      }
    }

    /* Fox breathing motion */
    #foxBodyGroup {
      transform-origin: 320px 450px;
      animation: breathe 4s ease-in-out infinite alternate;
    }

    @keyframes breathe {
      0% { transform: scale(1) translateY(0); }
      100% { transform: scale(1.015, 1.025) translateY(-1px); }
    }

    /* Fox ear slight twitch */
    #foxHeadGroup {
      transform-origin: 300px 345px;
      animation: earTwitch 6s ease-in-out infinite;
    }

    @keyframes earTwitch {
      0%, 85%, 100% { transform: rotate(0deg); }
      88% { transform: rotate(-2deg); }
      92% { transform: rotate(1.5deg); }
      96% { transform: rotate(0deg); }
    }
  </style>

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

  <!-- Stars Group (with subtle glowing and varied twinkling rates) -->
  <g id="stars" filter="url(#starGlow)" fill="#ffffff">
    <!-- Fast twinkling stars -->
    <g class="twinkle-fast">
      <circle cx="80" cy="110" r="1.5" />
      <circle cx="210" cy="65" r="1.2" />
      <circle cx="370" cy="95" r="2" />
      <circle cx="490" cy="45" r="1.5" />
      <circle cx="680" cy="120" r="1.8" />
      <circle cx="740" cy="190" r="1.2" />
      <circle cx="280" cy="190" r="1" />
      <circle cx="130" cy="230" r="1.5" />
      <circle cx="450" cy="220" r="1.2" />
    </g>

    <!-- Mid twinkling stars -->
    <g class="twinkle-mid">
      <circle cx="40" cy="70" r="1.2" />
      <circle cx="150" cy="140" r="1.8" />
      <circle cx="260" cy="80" r="2.2" />
      <circle cx="340" cy="30" r="1.5" />
      <circle cx="430" cy="110" r="1" />
      <circle cx="610" cy="70" r="2.5" />
      <circle cx="720" cy="90" r="1.5" />
      <circle cx="770" cy="40" r="1.2" />
      <circle cx="60" cy="180" r="1.5" />
      <circle cx="670" cy="240" r="1.3" />
    </g>

    <!-- Slow twinkling / 4-point sparkle stars -->
    <g class="twinkle-slow">
      <circle cx="110" cy="40" r="2.2" />
      <path d="M 110,35 Q 110,40 105,40 Q 110,40 110,45 Q 110,40 115,40 Q 110,40 110,35 Z" fill="#ffffff" opacity="0.8" />

      <circle cx="530" cy="130" r="2" />
      <path d="M 530,124 Q 530,130 524,130 Q 530,130 530,136 Q 530,130 536,130 Q 530,130 530,124 Z" fill="#ffffff" opacity="0.9" />

      <circle cx="640" cy="160" r="1.5" />
      <circle cx="190" cy="210" r="1.3" />
      <circle cx="310" cy="140" r="1.6" />
      <circle cx="480" cy="180" r="2.4" />
      <circle cx="760" cy="260" r="1" />
      <circle cx="20" cy="130" r="1" />
      <circle cx="230" cy="20" r="1.5" />
      <circle cx="580" cy="200" r="1.7" />
    </g>
  </g>

  <!-- Shooting Star (Animates every 4s, first starts at ~1.5s, crosses from right to left downwards) -->
  <g transform="translate(0, 0)">
    <g>
      <line x1="0" y1="0" x2="-80" y2="-45" stroke="url(#shootingStarGrad)" stroke-width="2.5" stroke-linecap="round" />
      <circle cx="0" cy="0" r="2" fill="#ffffff" filter="url(#glow)" />
      
      <!-- Seamless loop: 4 seconds period, first run visible at 1.5s -->
      <animateTransform
        attributeName="transform"
        type="translate"
        values="850,30; 520,220; -100,500; -100,500"
        keyTimes="0; 0.22; 0.44; 1"
        dur="4s"
        begin="0.8s"
        repeatCount="indefinite" />
      <animate
        attributeName="opacity"
        values="0; 1; 1; 0; 0"
        keyTimes="0; 0.04; 0.22; 0.28; 1"
        dur="4s"
        begin="0.8s"
        repeatCount="indefinite" />
    </g>
  </g>

  <!-- The Moon with Glow and Aura -->
  <g id="moonGroup">
    <!-- Huge subtle atmosphere aura -->
    <circle cx="580" cy="170" r="170" fill="url(#moonAura)" />
    <!-- Bright inner glow -->
    <circle cx="580" cy="170" r="62" fill="#fff5cc" opacity="0.3" filter="url(#glow)" />
    <!-- Main Moon body -->
    <circle cx="580" cy="170" r="48" fill="url(#moonBody)" filter="url(#glow)" />
    <!-- Moon Maria / Craters (soft organic details) -->
    <path d="M 565,152 Q 575,148 585,154 Q 590,165 580,172 Q 568,170 565,152 Z" fill="#edd896" opacity="0.4" />
    <path d="M 590,175 Q 602,174 606,183 Q 600,195 588,190 Q 582,182 590,175 Z" fill="#edd896" opacity="0.35" />
    <circle cx="560" cy="180" r="6" fill="#eed99a" opacity="0.3" />
    <circle cx="578" cy="138" r="4" fill="#eed99a" opacity="0.3" />
    <circle cx="605" cy="158" r="5" fill="#eed99a" opacity="0.25" />
  </g>

  <!-- Distant Background Mountains / Hills -->
  <path d="M -50,420 Q 90,320 280,360 Q 450,390 560,340 Q 690,290 850,370 L 850,600 L -50,600 Z" fill="url(#farHillGrad)" opacity="0.75" />

  <!-- Midground Mountain Hill with Forest Silhouettes -->
  <path d="M -20,440 Q 150,370 330,410 Q 520,450 680,380 Q 770,350 850,390 L 850,600 L -20,600 Z" fill="url(#midHillGrad)" />
  
  <!-- Pine trees on the distant ridge -->
  <use href="#pineTree" x="90" y="365" transform="scale(0.6)" />
  <use href="#pineTree" x="120" y="375" transform="scale(0.55)" />
  <use href="#pineTree" x="145" y="380" transform="scale(0.65)" />
  <use href="#pineTree" x="220" y="385" transform="scale(0.5)" />
  <use href="#pineTree" x="650" y="380" transform="scale(0.7)" />
  <use href="#pineTree" x="680" y="375" transform="scale(0.6)" />
  <use href="#pineTree" x="710" y="365" transform="scale(0.75)" />
  <use href="#pineTree" x="740" y="370" transform="scale(0.65)" />

  <!-- Foreground Main Rolling Hill -->
  <path d="M -40,480 Q 180,390 410,430 Q 600,460 850,510 L 850,600 L -40,600 Z" fill="url(#foreHillGrad)" />

  <!-- Foreground Wild Grass silhouettes on the hill ridge -->
  <g fill="#0b0e1d">
    <path d="M 160,432 Q 163,415 158,405 Q 166,415 168,430 Z" />
    <path d="M 166,432 Q 172,418 175,408 Q 175,420 172,431 Z" />
    <path d="M 210,425 Q 215,405 222,398 Q 220,412 216,425 Z" />
    <path d="M 370,435 Q 380,415 390,410 Q 384,425 378,436 Z" />
    <path d="M 440,440 Q 448,422 458,418 Q 452,432 446,442 Z" />
    <path d="M 448,442 Q 456,428 465,425 Q 458,435 454,444 Z" />
    <path d="M 530,455 Q 542,438 555,435 Q 546,448 538,458 Z" />
  </g>

  <!-- ==================== THE FOX ==================== -->
  <!-- Placed peacefully seated on the crest of the hill, gazing up towards the moon at right -->
  <g id="fox" transform="translate(15, 0)">

    <!-- Fox Tail (Animated layer behind the body, flowing gracefully over the hill) -->
    <g id="foxTail">
      <!-- Outer Orange Tail -->
      <path d="M 345,455 C 380,465 440,465 445,410 C 450,360 380,345 355,385 C 335,415 330,445 345,455 Z" fill="#d9531e" />
      
      <!-- Tail Shadow / Depth -->
      <path d="M 345,455 C 375,465 410,465 425,445 C 390,445 355,435 345,455 Z" fill="#a8360c" opacity="0.7" />

      <!-- Bushy Tail White Tip -->
      <path d="M 445,410 C 448,385 432,365 410,356 C 413,365 408,370 415,376 C 405,378 402,385 408,393 C 398,396 398,405 408,412 C 425,412 438,415 445,410 Z" fill="#fdedd6" />
    </g>

    <!-- Hind Leg / Paw Resting on Ground -->
    <ellipse cx="330" cy="468" rx="25" ry="14" fill="#a8360c" />
    <ellipse cx="320" cy="466" rx="18" ry="10" fill="#d9531e" />
    <!-- Dark Paw -->
    <path d="M 335,472 Q 352,472 350,465 Q 340,460 330,466 Z" fill="#261b1b" />

    <!-- Fox Main Body (Breathing animation) -->
    <g id="foxBodyGroup">
      <!-- Torso curved upward in seated posture -->
      <path d="M 275,465 C 270,410 275,365 305,340 C 325,325 345,345 340,385 C 335,425 340,460 330,470 C 310,475 285,475 275,465 Z" fill="#d9531e" />
      
      <!-- Fox Chest Fluff (Soft cream/white) turned toward moonlit right -->
      <path d="M 305,340 C 322,342 338,360 336,388 C 334,410 325,435 315,455 C 308,440 302,410 300,385 C 298,365 302,348 305,340 Z" fill="#fceddb" />
      
      <!-- Back contour shading for 3D moonlight depth -->
      <path d="M 275,465 C 270,420 274,375 300,345 C 290,365 284,410 286,465 Z" fill="#aa370d" />

      <!-- Front Leg & Paw -->
      <path d="M 315,395 L 328,465 C 328,470 322,472 316,472 C 310,472 306,467 307,460 L 303,405 Z" fill="#c44312" />
      <!-- Dark Front Sock/Paw -->
      <path d="M 324,445 L 328,465 C 328,471 321,472 315,472 C 310,472 308,468 309,460 L 312,445 Z" fill="#241919" />
    </g>

    <!-- Fox Head & Ears (Looking right and upward toward the moon) -->
    <g id="foxHeadGroup">
      <!-- Left Ear (Farther, darker inside) -->
      <g>
        <path d="M 282,335 L 270,275 C 275,272 284,278 296,298 L 298,330 Z" fill="#b83d0f" />
        <path d="M 276,325 L 273,283 C 277,282 283,288 290,305 L 290,325 Z" fill="#381e18" />
      </g>

      <!-- Head Base -->
      <path d="M 285,342 C 275,325 285,305 305,305 C 325,305 345,320 340,340 C 335,360 300,360 285,342 Z" fill="#d9531e" />

      <!-- Pointed Snout pointing towards moon (top-right) -->
      <path d="M 315,312 L 358,328 C 365,331 364,335 358,339 L 320,352 Z" fill="#e05b24" />
      
      <!-- Snout White Cheek & Under-muzzle -->
      <path d="M 322,351 L 358,339 C 352,341 345,344 336,347 C 325,355 315,358 308,356 Z" fill="#fceddb" />
      <path d="M 330,332 L 358,334 C 362,336 360,338 356,339 L 328,345 Z" fill="#fceddb" opacity="0.9" />

      <!-- Cute Black Nose Tip -->
      <ellipse cx="361" cy="333" rx="3" ry="2.5" fill="#181318" />

      <!-- Peaceful Contemplative Eye (gazing up at moon) -->
      <path d="M 324,324 Q 330,320 336,324" stroke="#1d1315" stroke-width="2.2" stroke-linecap="round" fill="none" />
      <path d="M 334,324 L 338,322" stroke="#1d1315" stroke-width="1.2" stroke-linecap="round" />

      <!-- Right Ear (Closer, prominent with white tufts) -->
      <g>
        <path d="M 302,320 L 312,260 C 322,265 330,285 328,315 Z" fill="#e05b24" />
        <!-- Ear Inner Dark -->
        <path d="M 308,312 L 314,272 C 319,278 322,290 322,312 Z" fill="#421a15" />
        <!-- Ear Fluff White Inside -->
        <path d="M 306,315 Q 312,300 310,288 Q 318,300 316,316 Z" fill="#fceddb" />
      </g>
    </g>

    <!-- Gentle Moonlight Rim Highlight on Fox's back & head -->
    <path d="M 312,262 C 322,272 329,295 328,318 C 338,328 352,332 360,334" stroke="#fed695" stroke-width="1.2" stroke-linecap="round" fill="none" opacity="0.75" />
    <path d="M 338,365 C 338,390 334,420 324,445" stroke="#fed695" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.5" />
  </g>

  <!-- Hill Silhouette Grass in Front of Fox's Paws -->
  <g fill="#070912">
    <path d="M 290,478 Q 295,455 305,450 Q 299,465 296,478 Z" />
    <path d="M 325,480 Q 332,460 342,458 Q 335,470 330,480 Z" />
    <path d="M 350,477 Q 360,458 372,458 Q 362,470 355,480 Z" />
  </g>
</svg>