Nemotron 3.5 Super VL (free)

by NVIDIAReasoningClean

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

How it went

Total time: 28.3 s
Cost: $0
Output tokens: 2,703
Spent thinking: 0 tokens
Speed: 105.6 tok/s
Console errors: 0

First token after: 2.7 s
First visible text after: 2.7 s
Prompt tokens: 548
Code size: 5.9 KB
Finish reason: stop
Served by: Nvidia
Model id: nvidia/nemotron-3.5-super-vl: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 · 89 lines

Download

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0a0a2e"/>
      <stop offset="50%" stop-color="#1a1a4a"/>
      <stop offset="100%" stop-color="#0d0d2a"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#fffacd" stop-opacity="0.9"/>
      <stop offset="60%" stop-color="#ffe0b2" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#ffe0b2" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#2c3e50"/>
      <stop offset="100%" stop-color="#1a252f"/>
    </linearGradient>
    <filter id="blurFilter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2.5"/>
    </filter>
  </defs>

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

  <g id="stars">
    <circle cx="100" cy="80" r="1" fill="white"><animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/></circle>
    <circle cx="150" cy="120" r="1.5" fill="white"><animate attributeName="opacity" values="0.4;1;0.4" dur="4s" repeatCount="indefinite"/></circle>
    <circle cx="200" cy="60" r="1" fill="white"><animate attributeName="opacity" values="0.2;0.8;0.2" dur="2.5s" repeatCount="indefinite"/></circle>
    <circle cx="250" cy="150" r="1.2" fill="white"><animate attributeName="opacity" values="0.5;1;0.5" dur="3.5s" repeatCount="indefinite"/></circle>
    <circle cx="300" cy="100" r="1" fill="white"><animate attributeName="opacity" values="0.3;0.9;0.3" dur="2.8s" repeatCount="indefinite"/></circle>
    <circle cx="350" cy="70" r="1.5" fill="white"><animate attributeName="opacity" values="0.4;1;0.4" dur="3.2s" repeatCount="indefinite"/></circle>
    <circle cx="400" cy="130" r="1" fill="white"><animate attributeName="opacity" values="0.2;0.7;0.2" dur="3.8s" repeatCount="indefinite"/></circle>
    <circle cx="450" cy="90" r="1.3" fill="white"><animate attributeName="opacity" values="0.3;0.85;0.3" dur="2.6s" repeatCount="indefinite"/></circle>
    <circle cx="500" cy="160" r="1" fill="white"><animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/></circle>
    <circle cx="550" cy="110" r="1.4" fill="white"><animate attributeName="opacity" values="0.2;0.6;0.2" dur="4.2s" repeatCount="indefinite"/></circle>
    <circle cx="600" cy="50" r="1" fill="white"><animate attributeName="opacity" values="0.4;0.95;0.4" dur="3.4s" repeatCount="indefinite"/></circle>
    <circle cx="650" cy="140" r="1.1" fill="white"><animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.9s" repeatCount="indefinite"/></circle>
    <circle cx="700" cy="80" r="1.6" fill="white"><animate attributeName="opacity" values="0.2;0.7;0.2" dur="3.7s" repeatCount="indefinite"/></circle>
    <circle cx="750" cy="110" r="1" fill="white"><animate attributeName="opacity" values="0.5;1;0.5" dur="3.1s" repeatCount="indefinite"/></circle>
    <circle cx="120" cy="200" r="1" fill="white"><animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.4s" repeatCount="indefinite"/></circle>
    <circle cx="180" cy="170" r="1.3" fill="white"><animate attributeName="opacity" values="0.2;0.6;0.2" dur="3.9s" repeatCount="indefinite"/></circle>
  </g>

  <path d="M0 350 Q200 320 400 350 T800 350 L800 600 L0 600 Z" fill="#2c3e50"/>
  <path d="M0 400 Q300 380 600 400 T800 400 L800 600 L0 600 Z" fill="#1a252f"/>

  <g id="distantTrees" fill="#0f1a25" opacity="0.4">
    <path d="M100 350 L120 300 L140 350 Z"/>
    <path d="M250 360 L270 310 L290 360 Z"/>
    <path d="M500 355 L520 305 L540 355 Z"/>
    <path d="M680 350 L700 300 L720 350 Z"/>
  </g>

  <circle cx="650" cy="100" r="25" fill="#fffacd" filter="url(#blurFilter)"/>
  <circle cx="650" cy="100" r="12" fill="#fffbe0"/>

  <g id="shootingStar">
    <line x1="0" y1="0" x2="40" y2="40" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0">
      <animate attributeName="x1" values="100;700" dur="0.6s" repeatCount="indefinite"/>
      <animate attributeName="y1" values="200;500" dur="0.6s" repeatCount="indefinite"/>
      <animate attributeName="x2" values="140;740" dur="0.6s" repeatCount="indefinite"/>
      <animate attributeName="y2" values="240;540" dur="0.6s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0;1;0" dur="0.6s" repeatCount="indefinite"/>
      <set attributeName="visibility" value="hidden"/>
      <animate attributeName="visibility" values="visible;visible;hidden" dur="4s" begin="2s" repeatCount="indefinite"/>
    </line>
  </g>

  <g id="fox" transform="translate(400, 400)">
    <path d="M-60 0 Q-100 -20 -80 40 Q-60 60 -40 40 Q-20 20 -40 0 Z" fill="#ff7f50"/>
    <path d="M-80 -40 Q-100 -80 -60 -100 Q-40 -120 -20 -100 Q0 -80 20 -60 L-20 -40 Z" fill="#ff7f50"/>
    <path d="M-90 -50 Q-110 -90 -70 -110 Q-50 -130 -30 -110 Q-10 -90 10 -70" fill="none" stroke="#e68a6b" stroke-width="2"/>
    <path d="M-30 -30 Q-10 -50 10 -40 Q30 -30 40 -10 L20 10 Q0 0 -20 -10 Z" fill="#ffe4b5"/>
    <ellipse cx="-10" cy="-20" rx="3" ry="5" fill="black"/>
    <ellipse cx="10" cy="-20" rx="3" ry="5" fill="black"/>

    <ellipse cx="-40" cy="20" rx="30" ry="50" fill="#ff7f50" transform="rotate(20 -40 20)"/>
    <ellipse cx="-30" cy="40" rx="25" ry="40" fill="#ffe4b5" transform="rotate(20 -30 40)"/>

    <path d="M-40 0 Q-10 20 20 40 Q50 60 80 40 Q100 20 70 0 Q40 -20 0 -10 Q-30 0 -40 0 Z" fill="#ff7f50"/>
    <path d="M20 40 Q50 60 80 40 Q100 20 70 0 Q40 -20 20 10 Z" fill="#ffe4b5"/>
    <circle cx="90" cy="20" r="8" fill="white"/>

    <g id="tailSway">
      <animateTransform attributeName="transform" type="rotate" values="10 40 0; -10 40 0; 10 40 0" dur="4s" repeatCount="indefinite"/>
      <path d="M40 0 Q100 20 120 60 Q110 100 80 120 Q50 100 40 80 Z" fill="#ff7f50"/>
      <path d="M80 60 Q110 100 80 120 Q60 100 70 80 Q70 60 80 60 Z" fill="#ffe4b5"/>
    </g>
  </g>
</svg>