Nemotron 3.5 Lightning (free)

by NVIDIAReasoningClean

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

How it went

Total time: 53.0 s
Cost: $0
Output tokens: 3,907
Spent thinking: 0 tokens
Speed: 74.2 tok/s
Console errors: 0

First token after: 310 ms
First visible text after: 310 ms
Prompt tokens: 548
Code size: 8.2 KB
Finish reason: stop
Served by: Nvidia
Model id: nvidia/nemotron-3.5-lightning: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 · 143 lines

Download

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Moon gradient -->
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#fff;stop-opacity:1"/>
      <stop offset="40%" style="stop-color:#fff;stop-opacity:0.6"/>
      <stop offset="100%" style="stop-color:#fff;stop-opacity:0"/>
    </radialGradient>
    <!-- Tail gradient -->
    <linearGradient id="tailG" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1"/>
      <stop offset="50%" style="stop-color:#ee5a24;stop-opacity:1"/>
      <stop offset="100%" style="stop-color:#d94a1e;stop-opacity:1"/>
    </linearGradient>
    <!-- Shooting star gradient -->
    <linearGradient id="shootG" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#fff;stop-opacity:1"/>
      <stop offset="50%" style="stop-color:#fff;stop-opacity:0.6"/>
      <stop offset="100%" style="stop-color:#fff;stop-opacity:0"/>
    </linearGradient>
    <!-- Star twinkle animation -->
    <set id="starAnim" attributeName="fill-opacity" values="1;0.3;1" keyTimes="0;0.5;1" dur="2s" repeatCount="indefinite"/>
  </defs>

  <!-- Background sky -->
  <rect width="800" height="600" fill="#0a1428"/>

  <!-- Distant hills -->
  <path d="M0 450 Q200 420 400 460 Q600 430 800 470 L800 600 L0 600 Z" fill="#112240"/>

  <!-- Trees silhouette -->
  <g fill="#2d5a36">
    <path d="M100 380 Q110 350 120 380 Q130 360 140 380 Q150 370 160 390 Q170 380 180 410 Q190 400 200 430 Q210 420 220 450 Q230 440 240 470 Q250 460 260 490 Q270 480 280 510 Q290 500 300 530 Q310 520 320 550 Q330 540 340 570 Q350 560 360 590 Q370 580 380 610 Q390 600 400 620 Q410 610 420 600 Q430 590 440 580 Q450 570 460 560 Q470 550 480 540 Q490 530 500 520 Q510 510 520 500 Q530 490 540 480 Q550 470 560 460 Q570 450 580 440 Q590 430 600 420 Q610 410 620 400 Q630 390 640 380 Q650 370 660 360 Q670 350 680 340 Q690 330 700 320 Q710 310 720 300 Q730 290 740 280 Q750 270 760 260 Q770 250 780 240 Q790 230 800 220 L800 600 L0 600 Z"/>
    <path d="M600 350 Q610 320 620 350 Q630 330 640 360 Q650 340 660 350 Q670 330 680 320 Q690 310 700 300 Q710 290 720 280 Q730 270 740 260 Q750 250 760 240 Q770 230 780 220 Q790 220 800 210 L800 600 L0 600 Z"/>
    <path d="M250 340 Q260 310 270 340 Q280 320 290 350 Q300 330 310 360 Q320 340 330 370 Q340 350 350 380 Q360 360 370 390 Q380 370 390 400 Q400 380 410 390 Q420 370 430 380 Q440 360 450 370 Q460 350 470 360 Q480 340 490 350 Q500 330 510 340 Q520 320 530 330 Q540 310 550 320 Q560 300 570 310 Q580 290 590 280 Q600 270 610 260 L620 250 L600 350 Z"/>
  </g>

  <!-- Moon -->
  <circle cx="720" cy="120" r="50" fill="#f5f0e1" stroke="#ddd" stroke-width="1">
    <animate attributeName="cx" values="720;680;720" dur="4s" repeatCount="indefinite"/>
    <animate attributeName="cy" values="120;100;120" dur="4s" repeatCount="indefinite"/>
    <animate attributeName="r" values="50;45;50" dur="4s" repeatCount="indefinite"/>
  </circle>
  <circle cx="720" cy="120" r="35" fill="url(#moonGlow)"/>

  <!-- Stars - twinkling -->
  <g>
    <circle cx="100" cy="80" r="2" fill="#fff">
      <set attributeName="cx" values="100;95;100" dur="2s" repeatCount="indefinite"/>
      <set attributeName="cy" values="80;75;80" dur="2s" repeatCount="indefinite"/>
      <set attributeName="r" values="2;3;2" dur="2s" repeatCount="indefinite"/>
      <set attributeName="fill-opacity" values="1;0.6;1" dur="2s" repeatCount="indefinite" id="starAnim"/>
    </circle>
    <circle cx="250" cy="100" r="3" fill="#fff">
      <set attributeName="cx" values="250;245;250" dur="2.3s" repeatCount="indefinite"/>
      <set attributeName="cy" values="100;95;100" dur="2.3s" repeatCount="indefinite"/>
      <set attributeName="r" values="3;4;3" dur="2.3s" repeatCount="indefinite"/>
      <set attributeName="fill-opacity" values="1;0.5;1" dur="2.3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="380" cy="60" r="2" fill="#fff">
      <set attributeName="cx" values="380;375;380" dur="1.8s" repeatCount="indefinite"/>
      <set attributeName="cy" values="60;55;60" dur="1.8s" repeatCount="indefinite"/>
      <set attributeName="r" values="2;3;2" dur="1.8s" repeatCount="indefinite"/>
      <set attributeName="fill-opacity" values="1;0.7;1" dur="1.8s" repeatCount="indefinite"/>
    </circle>
    <circle cx="520" cy="120" r="4" fill="#fff">
      <set attributeName="cx" values="520;515;520" dur="2.5s" repeatCount="indefinite"/>
      <set attributeName="cy" values="120;115;120" dur="2.5s" repeatCount="indefinite"/>
      <set attributeName="r" values="4;5;4" dur="2.5s" repeatCount="indefinite"/>
      <set attributeName="fill-opacity" values="1;0.4;1" dur="2.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="650" cy="90" r="2" fill="#fff">
      <set attributeName="cx" values="650;645;650" dur="1.6s" repeatCount="indefinite"/>
      <set attributeName="cy" values="90;85;90" dur="1.6s" repeatCount="indefinite"/>
      <set attributeName="r" values="2;3;2" dur="1.6s" repeatCount="indefinite"/>
      <set attributeName="fill-opacity" values="1;0.8;1" dur="1.6s" repeatCount="indefinite"/>
    </circle>
    <circle cx="750" cy="110" r="3" fill="#fff">
      <set attributeName="cx" values="750;745;750" dur="2.2s" repeatCount="indefinite"/>
      <set attributeName="cy" values="110;105;110" dur="2.2s" repeatCount="indefinite"/>
      <set attributeName="r" values="3;4;3" dur="2.2s" repeatCount="indefinite"/>
      <set attributeName="fill-opacity" values="1;0.5;1" dur="2.2s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Shooting star (appears every 4s, first within 2s) -->
  <g opacity="0" id="shootingStar">
    <line x1="100" y1="150" x2="700" y2="200" stroke="#fff" stroke-width="2" stroke-linecap="round">
      <animateMotion dur="4s" repeatCount="indefinite" begin="0s" path="M100 150 L700 200"/>
      <animate attributeName="opacity" values="1;0" dur="0.5s" begin="0s" repeatCount="indefinite"/>
    </line>
    <circle cx="100" cy="150" r="3" fill="#fff">
      <animate attributeName="opacity" values="1;0" dur="0.3s" begin="0s" repeatCount="indefinite"/>
    </circle>
    <circle cx="700" cy="200" r="3" fill="#fff">
      <animate attributeName="opacity" values="1;0" dur="0.3s" begin="0s" repeatCount="indefinite"/>
    </circle>
  </g>
  <script type="application/javascript">
    // Trigger shooting star after 2s then repeat every 4s
    setTimeout(() => {
      const star = document.getElementById('shootingStar');
      star.setAttribute('opacity', '1');
      // restart every 4s
      setInterval(() => {
        star.setAttribute('opacity', '0');
        setTimeout(() => star.setAttribute('opacity', '1'), 10);
      }, 4100);
    }, 2000);
  </script>

  <!-- Fox -->
  <g transform="translate(200, 350)">
    <!-- Body -->
    <ellipse cx="0" cy="0" rx="50" ry="30" fill="#e67e22"/>
    <!-- Legs -->
    <line x1="-30" y1="15" x2="-40" y2="45" stroke="#c96216" stroke-width="3"/>
    <line x1="30" y1="15" x2="40" y2="45" stroke="#c96216" stroke-width="3"/>
    <!-- Tail -->
    <path d="M50 0 Q100 -30 120 0 Q100 30 50 0" fill="url(#tailG)">
      <animateTransform attributeName="transform" type="rotate" from="0 50 0" to="30 50 0" dur="3s" repeatCount="indefinite" easing="easeInOut"/>
    </path>
    <!-- Neck -->
    <line x1="0" y1="-15" x2="0" y2="-30" stroke="#c96216" stroke-width="5"/>
    <!-- Head -->
    <polygon points="0,-35 -25,-55 25,-55" fill="#e67e22" stroke="#c96216" stroke-width="2"/>
    <!-- Ears -->
    <polygon points="-20,-55 -30,-80 -10,-80" fill="#e67e22" stroke="#c96216" stroke-width="2"/>
    <polygon points="20,-55 30,-80 10,-80" fill="#e67e22" stroke="#c96216" stroke-width="2"/>
    <!-- Eye -->
    <circle cx="-8" cy="-45" r="4" fill="#2c3e50"/>
    <!-- Snout -->
    <circle cx="8" cy="-35" r="8" fill="#f0c8a2"/>
    <!-- Nose -->
    <circle cx="8" cy="-30" r="3" fill="#2c3e50"/>
    <!-- Whiskers -->
    <line x1="-15" y1="-32" x2="-35" y2="-32" stroke="#555" stroke-width="1"/>
    <line x1="15" y1="-32" x2="35" y2="-32" stroke="#555" stroke-width="1"/>
    <line x1="-18" y1="-36" x2="-25" y2="-42" stroke="#555" stroke-width="1"/>
    <line x1="18" y1="-36" x2="25" y2="-42" stroke="#555" stroke-width="1"/>
  </g>
</svg>