Nemotron 3 Ultra (free)

by NVIDIAReasoningClean

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

How it went

Total time: 1 min 23 s
Cost: $0
Output tokens: 8,239
Spent thinking: 0 tokens
Speed: 99.8 tok/s
Console errors: 0

First token after: 585 ms
First visible text after: 585 ms
Prompt tokens: 548
Code size: 16.8 KB
Finish reason: stop
Served by: Nvidia
Model id: nvidia/nemotron-3-ultra-550b-a55b:free
Reasoning sent: {"effort":"none"}
Max output: 32,000 tokens
Generated: Nov 9, 2026

What it was asked

The prompt

Create a standalone SVG illustration of a fox sitting on a hill, looking at the moon on a starry night, with a few subtle animations. Requirements: - Output a single valid .svg file (```svg code block) with a viewBox of 0 0 800 600. - Hand-written shapes and paths only: no embedded raster images, no external references, no JavaScript. - The fox must be clearly recognizable (pointy ears, snout, bushy tail with a white tip). - Include the moon with a soft glow, many stars, the hill and some background elements (trees, distant hills). - Use a coherent color palette and at least one gradient. - Animations (SMIL or CSS inside the SVG), all looping seamlessly: stars twinkling, the fox's tail swaying gently, and a shooting star crossing the sky every 4 seconds (the first one within 2 seconds).

System prompt, sent with every prompt

You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.svg · 363 lines

Download

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" width="800" height="600">
  <defs>
    <!-- Sky gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a0e27"/>
      <stop offset="40%" stop-color="#1a1f4a"/>
      <stop offset="70%" stop-color="#2d2a5e"/>
      <stop offset="100%" stop-color="#3d3a6e"/>
    </linearGradient>
    
    <!-- Hill gradient -->
    <linearGradient id="hillGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#1a3a2e"/>
      <stop offset="50%" stop-color="#153025"/>
      <stop offset="100%" stop-color="#0d1f15"/>
    </linearGradient>
    
    <!-- Distant hills gradient -->
    <linearGradient id="distantHillGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#122a20"/>
      <stop offset="100%" stop-color="#0a1a14"/>
    </linearGradient>
    
    <!-- Moon glow -->
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff8e7" stop-opacity="1"/>
      <stop offset="40%" stop-color="#ffe8a0" stop-opacity="0.6"/>
      <stop offset="70%" stop-color="#ffd460" stop-opacity="0.2"/>
      <stop offset="100%" stop-color="#ffd460" stop-opacity="0"/>
    </radialGradient>
    
    <!-- Moon surface -->
    <radialGradient id="moonSurface" cx="40%" cy="40%" r="50%">
      <stop offset="0%" stop-color="#fffef5"/>
      <stop offset="100%" stop-color="#e8e0c8"/>
    </radialGradient>
    
    <!-- Fox body gradient -->
    <linearGradient id="foxBody" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e87d3a"/>
      <stop offset="50%" stop-color="#d46b2e"/>
      <stop offset="100%" stop-color="#c05824"/>
    </linearGradient>
    
    <!-- Fox lighter fur -->
    <linearGradient id="foxLight" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#f5c898"/>
      <stop offset="100%" stop-color="#e8b078"/>
    </radialGradient>
    
    <!-- Tail tip gradient -->
    <linearGradient id="tailTip" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#f0e8e0"/>
    </linearGradient>
    
    <!-- Star glow -->
    <radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>
    
    <!-- Shooting star gradient -->
    <linearGradient id="shootingStarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="30%" stop-color="#ffffff" stop-opacity="1"/>
      <stop offset="70%" stop-color="#ffe8a0" stop-opacity="1"/>
      <stop offset="100%" stop-color="#ffe8a0" stop-opacity="0"/>
    </linearGradient>
    
    <!-- Tree gradient -->
    <linearGradient id="treeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0f2a1a"/>
      <stop offset="100%" stop-color="#081810"/>
    </linearGradient>
    
    <!-- Grass gradient -->
    <linearGradient id="grassGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#1a4a30"/>
      <stop offset="100%" stop-color="#0f2a18"/>
    </linearGradient>
    
    <!-- Animation keyframes for CSS -->
    <style>
      <![CDATA[
        @keyframes twinkle {
          0%, 100% { opacity: 0.3; transform: scale(0.8); }
          50% { opacity: 1; transform: scale(1.2); }
        }
        @keyframes twinkleSlow {
          0%, 100% { opacity: 0.4; transform: scale(0.9); }
          50% { opacity: 1; transform: scale(1.1); }
        }
        @keyframes twinkleFast {
          0%, 100% { opacity: 0.2; transform: scale(0.7); }
          50% { opacity: 1; transform: scale(1.3); }
        }
        @keyframes tailSway {
          0%, 100% { transform: rotate(-5deg); transform-origin: 580px 380px; }
          50% { transform: rotate(8deg); transform-origin: 580px 380px; }
        }
        @keyframes shootingStar {
          0% { 
            transform: translate(0, 0) rotate(-30deg);
            opacity: 0;
          }
          5% { opacity: 1; }
          95% { opacity: 1; }
          100% { 
            transform: translate(-700px, 400px) rotate(-30deg);
            opacity: 0;
          }
        }
        @keyframes moonPulse {
          0%, 100% { opacity: 0.3; }
          50% { opacity: 0.5; }
        }
        .star-1 { animation: twinkle 2.5s ease-in-out infinite; }
        .star-2 { animation: twinkleSlow 3.2s ease-in-out infinite; }
        .star-3 { animation: twinkleFast 1.8s ease-in-out infinite; }
        .star-4 { animation: twinkle 2.8s ease-in-out 0.5s infinite; }
        .star-5 { animation: twinkleSlow 3.5s ease-in-out 1s infinite; }
        .star-6 { animation: twinkleFast 2.1s ease-in-out 0.3s infinite; }
        .star-7 { animation: twinkle 3s ease-in-out 1.5s infinite; }
        .star-8 { animation: twinkleSlow 2.6s ease-in-out 0.8s infinite; }
        .star-9 { animation: twinkleFast 1.9s ease-in-out 1.2s infinite; }
        .star-10 { animation: twinkle 2.3s ease-in-out 0.6s infinite; }
        .star-11 { animation: twinkleSlow 3.8s ease-in-out 1.8s infinite; }
        .star-12 { animation: twinkleFast 2.4s ease-in-out 0.9s infinite; }
        .star-13 { animation: twinkle 2.7s ease-in-out 0.2s infinite; }
        .star-14 { animation: twinkleSlow 3.1s ease-in-out 1.3s infinite; }
        .star-15 { animation: twinkleFast 2s ease-in-out 1.6s infinite; }
        .tail-group { animation: tailSway 4s ease-in-out infinite; }
        .shooting-star { animation: shootingStar 4s linear infinite; }
        .moon-glow-ring { animation: moonPulse 3s ease-in-out infinite; }
      ]]>
    </style>
  </defs>
  
  <!-- Background sky -->
  <rect width="800" height="600" fill="url(#skyGradient)"/>
  
  <!-- Distant hills -->
  <path d="M0,420 Q200,380 400,400 Q600,420 800,400 L800,600 L0,600 Z" fill="url(#distantHillGradient)" opacity="0.6"/>
  <path d="M0,480 Q250,440 500,460 Q750,480 800,470 L800,600 L0,600 Z" fill="url(#distantHillGradient)" opacity="0.4"/>
  
  <!-- Moon glow rings -->
  <circle class="moon-glow-ring" cx="650" cy="120" r="100" fill="url(#moonGlow)" opacity="0.3"/>
  <circle class="moon-glow-ring" cx="650" cy="120" r="70" fill="url(#moonGlow)" opacity="0.4" style="animation-delay: -1.5s;"/>
  
  <!-- Moon -->
  <circle cx="650" cy="120" r="50" fill="url(#moonSurface)">
    <!-- Moon craters -->
    <animate attributeName="r" values="50;50;50" dur="10s" repeatCount="indefinite"/>
  </circle>
  <!-- Moon crater details -->
  <ellipse cx="635" cy="110" rx="8" ry="5" fill="#d0c8a8" opacity="0.5"/>
  <ellipse cx="665" cy="125" rx="6" ry="4" fill="#d0c8a8" opacity="0.4"/>
  <ellipse cx="645" cy="135" rx="5" ry="3" fill="#d0c8a8" opacity="0.3"/>
  <ellipse cx="670" cy="105" rx="4" ry="2" fill="#d0c8a8" opacity="0.3"/>
  <ellipse cx="625" cy="130" rx="7" ry="4" fill="#c8c0a0" opacity="0.4"/>
  
  <!-- Stars -->
  <g fill="url(#starGlow)">
    <circle class="star-1" cx="120" cy="80" r="1.5"/>
    <circle class="star-2" cx="200" cy="50" r="2"/>
    <circle class="star-3" cx="350" cy="100" r="1"/>
    <circle class="star-4" cx="480" cy="60" r="2.5"/>
    <circle class="star-5" cx="100" cy="180" r="1.5"/>
    <circle class="star-6" cx="280" cy="150" r="1"/>
    <circle class="star-7" cx="420" cy="130" r="2"/>
    <circle class="star-8" cx="550" cy="200" r="1.5"/>
    <circle class="star-9" cx="150" cy="250" r="1"/>
    <circle class="star-10" cx="320" cy="220" r="2"/>
    <circle class="star-11" cx="500" cy="280" r="1.5"/>
    <circle class="star-12" cx="80" cy="300" r="1"/>
    <circle class="star-13" cx="600" cy="160" r="2.5"/>
    <circle class="star-14" cx="720" cy="80" r="1.5"/>
    <circle class="star-15" cx="750" cy="200" r="1"/>
    
    <!-- Additional smaller stars -->
    <circle class="star-1" cx="50" cy="120" r="0.8" style="animation-delay: 0.1s;"/>
    <circle class="star-2" cx="180" cy="320" r="0.6" style="animation-delay: 0.4s;"/>
    <circle class="star-3" cx="380" cy="350" r="0.7" style="animation-delay: 0.7s;"/>
    <circle class="star-4" cx="580" cy="320" r="0.9" style="animation-delay: 0.2s;"/>
    <circle class="star-5" cx="700" cy="300" r="0.5" style="animation-delay: 0.9s;"/>
    <circle class="star-6" cx="90" cy="400" r="0.6" style="animation-delay: 1.1s;"/>
    <circle class="star-7" cx="250" cy="380" r="0.8" style="animation-delay: 0.3s;"/>
    <circle class="star-8" cx="450" cy="400" r="0.7" style="animation-delay: 1.4s;"/>
    <circle class="star-9" cx="650" cy="380" r="0.6" style="animation-delay: 0.5s;"/>
  </g>
  
  <!-- Shooting star -->
  <g class="shooting-star">
    <path d="M0,0 L-100,-60" stroke="url(#shootingStarGradient)" stroke-width="2" stroke-linecap="round" filter="url(#blur)"/>
    <circle cx="0" cy="0" r="3" fill="#ffffff"/>
    <ellipse cx="-20" cy="-12" rx="15" ry="3" fill="url(#shootingStarGradient)"/>
  </g>
  
  <!-- Filter for shooting star blur -->
  <filter id="blur">
    <feGaussianBlur stdDeviation="1"/>
  </filter>
  
  <!-- Main hill -->
  <path d="M0,450 Q150,400 300,430 Q450,410 600,440 Q750,430 800,450 L800,600 L0,600 Z" fill="url(#hillGradient)"/>
  
  <!-- Hill highlight -->
  <path d="M0,450 Q150,400 300,430 Q450,410 600,440 Q750,430 800,450" fill="none" stroke="#2a5a40" stroke-width="1" opacity="0.3"/>
  
  <!-- Grass tufts on hill -->
  <g fill="url(#grassGradient)" opacity="0.8">
    <path d="M100,445 Q102,435 100,430 Q98,435 100,445"/>
    <path d="M180,435 Q182,425 180,420 Q178,425 180,435"/>
    <path d="M250,450 Q252,440 250,435 Q248,440 250,450"/>
    <path d="M350,430 Q352,420 350,415 Q348,420 350,430"/>
    <path d="M450,435 Q452,425 450,420 Q448,425 450,435"/>
    <path d="M550,440 Q552,430 550,425 Q548,430 550,440"/>
    <path d="M650,435 Q652,425 650,420 Q648,425 650,435"/>
    <path d="M720,445 Q722,435 720,430 Q718,435 720,445"/>
    <path d="M50,460 Q52,450 50,445 Q48,450 50,460"/>
    <path d="M300,460 Q302,450 300,445 Q298,450 300,460"/>
    <path d="M400,465 Q402,455 400,450 Q398,455 400,465"/>
    <path d="M600,460 Q602,450 600,445 Q598,450 600,460"/>
    <path d="M750,465 Q752,455 750,450 Q748,455 750,465"/>
  </g>
  
  <!-- Trees on distant hills -->
  <g fill="url(#treeGradient)">
    <!-- Left cluster -->
    <path d="M120,400 L115,370 L105,380 L115,360 L100,375 L115,350 L125,365 L115,345 L130,355 L125,370 Z"/>
    <path d="M180,410 L175,380 L165,390 L175,370 L160,385 L175,360 L185,375 L175,355 L190,365 L185,380 Z"/>
    <path d="M80,420 L77,395 L70,405 L77,390 L65,400 L77,385 L85,395 L77,380 L90,390 L85,405 Z"/>
    
    <!-- Right cluster -->
    <path d="M620,410 L615,380 L605,390 L615,370 L600,385 L615,360 L625,375 L615,355 L630,365 L625,380 Z"/>
    <path d="M680,420 L675,390 L665,400 L675,380 L660,395 L675,370 L685,385 L675,365 L690,375 L685,390 Z"/>
    <path d="M740,415 L735,385 L725,395 L735,375 L720,390 L735,365 L745,380 L735,360 L750,370 L745,385 Z"/>
    
    <!-- Single trees on main hill -->
    <path d="M200,430 L198,410 L192,418 L198,405 L188,415 L198,400 L205,410 L198,395 L210,405 L202,418 Z" opacity="0.7"/>
    <path d="M500,435 L498,415 L492,423 L498,410 L488,420 L498,405 L505,415 L498,400 L510,410 L502,423 Z" opacity="0.7"/>
  </g>
  
  <!-- Fox -->
  <g transform="translate(0,0)">
    <!-- Tail (behind body) -->
    <g class="tail-group">
      <!-- Tail base/shape -->
      <path d="M580,380 Q620,360 650,350 Q670,355 680,370 Q685,390 675,410 Q660,430 630,440 Q600,445 570,440 Q550,435 540,420 Q535,400 545,385 Q555,375 580,380 Z" fill="url(#foxBody)"/>
      <!-- Tail white tip -->
      <path d="M650,350 Q670,355 680,370 Q685,390 675,410 Q670,400 660,385 Q655,375 655,365 Q652,358 650,350 Z" fill="url(#tailTip)"/>
      <!-- Tail fur texture -->
      <path d="M590,400 Q610,395 620,400" fill="none" stroke="#c05824" stroke-width="2" opacity="0.5"/>
      <path d="M600,415 Q615,410 625,415" fill="none" stroke="#c05824" stroke-width="2" opacity="0.4"/>
      <path d="M585,425 Q600,420 610,425" fill="none" stroke="#c05824" stroke-width="1.5" opacity="0.3"/>
    </g>
    
    <!-- Body -->
    <ellipse cx="480" cy="410" rx="90" ry="60" fill="url(#foxBody)"/>
    
    <!-- Chest/light fur -->
    <ellipse cx="430" cy="420" rx="45" ry="35" fill="url(#foxLight)"/>
    
    <!-- Hind leg -->
    <path d="M520,440 Q530,460 525,475 Q520,485 510,485 Q500,485 505,470 Q510,460 515,445 Z" fill="url(#foxBody)"/>
    <ellipse cx="515" cy="480" rx="12" ry="8" fill="#c05824"/>
    
    <!-- Front legs -->
    <path d="M410,430 Q415,460 410,475 Q405,485 395,485 Q385,485 390,470 Q395,460 395,440 Z" fill="url(#foxBody)"/>
    <ellipse cx="395" cy="478" rx="10" ry="7" fill="#c05824"/>
    
    <path d="M380,435 Q385,460 380,475 Q375,485 365,485 Q355,485 360,470 Q365,460 365,440 Z" fill="url(#foxBody)"/>
    <ellipse cx="365" cy="478" rx="10" ry="7" fill="#c05824"/>
    
    <!-- Neck -->
    <path d="M400,380 Q390,360 385,350 Q395,340 410,345 Q425,350 420,370 Q415,385 400,380 Z" fill="url(#foxBody)"/>
    
    <!-- Head -->
    <ellipse cx="395" cy="335" rx="45" ry="40" fill="url(#foxBody)"/>
    
    <!-- Snout -->
    <ellipse cx="355" cy="340" rx="22" ry="18" fill="url(#foxBody)"/>
    <ellipse cx="350" cy="340" rx="15" ry="12" fill="url(#foxLight)"/>
    
    <!-- Nose -->
    <ellipse cx="335" cy="340" rx="6" ry="5" fill="#2a1a10"/>
    <ellipse cx="333" cy="338" rx="2" ry="1.5" fill="#4a3a2a"/>
    
    <!-- Eyes -->
    <!-- Left eye -->
    <ellipse cx="385" cy="320" rx="8" ry="10" fill="#1a1008"/>
    <ellipse cx="383" cy="318" rx="3.5" ry="5" fill="#0a0604"/>
    <ellipse cx="381" cy="316" rx="1.5" ry="2" fill="#ffffff"/>
    <ellipse cx="387" cy="322" rx="1" ry="1.5" fill="#ffffff" opacity="0.5"/>
    
    <!-- Right eye -->
    <ellipse cx="415" cy="320" rx="8" ry="10" fill="#1a1008"/>
    <ellipse cx="413" cy="318" rx="3.5" ry="5" fill="#0a0604"/>
    <ellipse cx="411" cy="316" rx="1.5" ry="2" fill="#ffffff"/>
    <ellipse cx="417" cy="322" rx="1" ry="1.5" fill="#ffffff" opacity="0.5"/>
    
    <!-- Ears -->
    <!-- Left ear -->
    <path d="M365,295 Q355,260 350,255 Q345,250 355,255 Q365,260 375,295 Q370,285 365,295 Z" fill="url(#foxBody)"/>
    <path d="M360,290 Q355,265 353,262 Q355,265 358,285 Q359,282 360,290 Z" fill="url(#foxLight)"/>
    <!-- Ear tuft -->
    <path d="M355,260 Q350,250 348,245 Q352,252 355,260 Z" fill="#c05824"/>
    
    <!-- Right ear -->
    <path d="M425,295 Q435,260 440,255 Q445,250 435,255 Q425,260 415,295 Q420,285 425,295 Z" fill="url(#foxBody)"/>
    <path d="M430,290 Q435,265 437,262 Q435,265 432,285 Q431,282 430,290 Z" fill="url(#foxLight)"/>
    <!-- Ear tuft -->
    <path d="M435,260 Q440,250 442,245 Q438,252 435,260 Z" fill="#c05824"/>
    
    <!-- Face markings - white patches -->
    <path d="M375,310 Q360,300 350,295 Q365,300 380,310 Q375,315 375,310 Z" fill="url(#foxLight)" opacity="0.9"/>
    <path d="M415,310 Q430,300 440,295 Q425,300 410,310 Q415,315 415,310 Z" fill="url(#foxLight)" opacity="0.9"/>
    
    <!-- Cheek fur -->
    <ellipse cx="340" cy="355" rx="15" ry="10" fill="url(#foxLight)" opacity="0.8"/>
    <ellipse cx="440" cy="355" rx="12" ry="8" fill="url(#foxLight)" opacity="0.8"/>
    
    <!-- Whiskers -->
    <g stroke="#3a2a1a" stroke-width="0.8" fill="none" opacity="0.6">
      <line x1="330" y1="338" x2="305" y2="330"/>
      <line x1="330" y1="342" x2="305" y2="345"/>
      <line x1="330" y1="346" x2="305" y2="360"/>
      <line x1="445" y1="338" x2="475" y2="330"/>
      <line x1="445" y1="342" x2="475" y2="345"/>
      <line x1="445" y1="346" x2="475" y2="360"/>
    </g>
    
    <!-- Eyebrows/forehead marking -->
    <path d="M370,305 Q395,295 420,305" fill="none" stroke="url(#foxLight)" stroke-width="3" opacity="0.5"/>
  </g>
  
  <!-- Fireflies near fox -->
  <g fill="#ffe8a0">
    <circle cx="300" cy="420" r="2" opacity="0.6">
      <animate attributeName="opacity" values="0.2;0.8;0.2" dur="3s" repeatCount="indefinite"/>
      <animate attributeName="cx" values="300;310;300" dur="4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="550" cy="400" r="1.5" opacity="0.5">
      <animate attributeName="opacity" values="0.1;0.7;0.1" dur="2.5s" repeatCount="indefinite" begin="0.5s"/>
      <animate attributeName="cy" values="400;390;400" dur="3.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="250" cy="380" r="1.8" opacity="0.4">
      <animate attributeName="opacity" values="0.3;0.9;0.3" dur="3.2s" repeatCount="indefinite" begin="1s"/>
      <animate attributeName="cx" values="250;240;250" dur="4.5s" repeatCount="indefinite"/>
    </circle>
  </g>
  
  <!-- Foreground grass silhouettes -->
  <g fill="#0a1a10" opacity="0.6">
    <path d="M20,520 Q22,500 20,490 Q18,500 20,520"/>
    <path d="M80,530 Q82,510 80,500 Q78,510 80,530"/>
    <path d="M150,525 Q152,505 150,495 Q148,505 150,525"/>
    <path d="M700,520 Q702,500 700,490 Q698,500 700,520"/>
    <path d="M750,530 Q752,510 750,500 Q748,510 750,530"/>
    <path d="M780,525 Q782,505 780,495 Q778,505 780,525"/>
  </g>
</svg>