Skateboarding astronaut catOne-line

Nemotron 3.5 Lightning (free)

by NVIDIAReasoningClean

Open in new window

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

How it went

Total time: 27.9 s
Cost: $0
Output tokens: 2,015
Spent thinking: 0 tokens
Speed: 73.1 tok/s
Console errors: 0

First token after: 319 ms
First visible text after: 319 ms
Prompt tokens: 366
Code size: 4.3 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

“draw me an SVG of an astronaut cat skateboarding on the moon”

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 · 102 lines

Download

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { width: 100vw; height: 100vh; background: #05051a; overflow: hidden; font-family: system-ui; }
  #container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 800px; }
  svg { width: 90vw; max-width: 960px; height: auto; }
</style>

<div id="container">
<svg viewBox="0 0 800 480" xmlns="http://www.w3.org/2000/svg">
  <!-- Background: deep space & moon -->
  <rect width="800" height="480" fill="#05051a"/>
  <!-- Moon surface -->
  <ellipse cx="400" cy="340" rx="340" ry="180" fill="#2c2c5e"/>
  <ellipse cx="400" cy="340" rx="320" ry="160" fill="#1e1e3d"/>
  <ellipse cx="400" cy="340" rx="300" ry="150" fill="#25254a"/>
  <!-- Craters -->
  <circle cx="120" cy="380" r="30" fill="#1a1a3a"/>
  <circle cx="280" cy="350" r="20" fill="#15152f"/>
  <circle cx="560" cy="390" r="25" fill="#1a1a3a"/>
  <circle cx="720" cy="360" r="18" fill="#15152f"/>
  <!-- Lunar dust particles -->
  <g fill="#aaccee">
    <circle cx="20" cy="200" r="2"/>
    <circle cx="80" cy="150" r="1.5"/>
    <circle cx="150" cy="260" r="2.5"/>
    <circle cx="260" cy="180" r="1"/>
    <circle cx="340" cy "220" r="3"/>
    <circle cx="470" cy="140" r="2"/>
    <circle cx="550" cy="280" r="1.5"/>
    <circle cx="640" cy="190" r="2.5"/>
    <circle cx="720" cy="160" r="1"/>
    <circle cx="50" cy="380" r="1.5"/>
    <circle cx="300" cy="400" r="2"/>
  </g>
  <!-- Stars -->
  <g fill="#fff" opacity="0.6">
    <circle cx="100" cy="80" r="1"/>
    <circle cx="200" cy="120" r="0.8"/>
    <circle cx="340" cy="50" r="1.2"/>
    <circle cx="480" cy="90" r="0.7"/>
    <circle cx="560" cy="40" r="1"/>
    <circle cx="680" cy="100" r="0.9"/>
    <circle cx="120" cy="350" r="1.3"/>
    <circle cx="300" cy="380" r="1.1"/>
    <circle cx="520" cy="330" r="1.4"/>
    <circle cx="700" cy="360" r="1"/>
  </g>
  <!-- Earth in distant sky -->
  <circle cx="720" cy="120" r="30" fill="#4a90e2" opacity="0.7"/>
  <!-- Astronaut cat silhouette -->
  <g id="astronaut" fill="#ffeaa7" stroke="#fdcb6e" stroke-width="2">
    <!-- Helmet dome -->
    <ellipse cx="400" cy="180" rx="140" ry="130" fill="#ffd1a8"/>
    <!-- Visor -->
    <ellipse cx="400" cy="175" rx="80" ry="70" fill="#2a9d8f" opacity="0.9"/>
    <!-- Cat head inside helmet -->
    <circle cx="380" cy="150" r="30" fill="#e9c46a"/>
    <!-- Ear nub left -->
    <ellipse cx="280" cy="165" r="25" fill="#ffeaa7"/>
    <!-- Ear nub right -->
    <ellipse cx="520" cy="165" r="25" fill="#ffeaa7"/>
    <!-- Body -->
    <path d="M400 260 Q400 300 340 340 Q300 360 280 330 Q260 300 280 260 Q300 240 340 260 Q380 260 400 260 Z"/>
    <!-- Back leg / skateboard base -->
    <rect x="330" y="340" width="40" height="20" fill="#ffeaa7" rx="3"/>
    <!-- Front leg -->
    <rect x="370" y="340" width="40" height="20" fill="#ffeaa7" rx="3"/>
    <!-- Tail -->
    <path d="M340 260 Q320 240 310 250" stroke="#fdcb6e" stroke-width="3" fill="none" stroke-linecap="round"/>
    <!-- Front of skateboard (nose) -->
    <polygon points="330,320 370,320 350,300" fill="#ffeaa7" stroke="#fdcb6e" stroke-width="2"/>
    <!-- Skateboard deck top pattern -->
    <rect x="330" y="340" width="80" height="10" fill="none" stroke="#fdcb6e" stroke-width="1" opacity="0.5"/>
    <!-- Wheels -->
    <g fill="#2c3e50">
      <circle cx="350" cy="360" r="18" opacity="0.9"/>
      <circle cx="390" cy="360" r="18" opacity="0.9"/>
      <!-- Wheel hubs -->
      <circle cx="350" cy="360" r="8" fill="#a29bfe"/>
      <circle cx="390" cy="360" r="8" fill="#a29bfe"/>
    </g>
    <!-- Skateboard trucks -->
    <g stroke="#fdcb6e" stroke-width="3" fill="none">
      <line x1="340" y1="340" x2="340" y2="380"/>
      <line x1="380" y1="340" x2="380" y2="380"/>
    </g>
    <!-- Cat eyes -->
    <circle cx="395" cy="155" r="6" fill="#2c3e50"/>
    <circle cx="405" cy="155" r="6" fill="#2c3e50"/>
    <!-- Cat mouth -->
    <path d="M395 170 Q405 175 410 170" stroke="#2c3e50" stroke-width="2" fill="none"/>
  </g>
  <!-- Motion glow trails (subtle) -->
  <g fill="#ff6b6b" opacity="0.15">
    <ellipse cx="350" cy="360" rx="25" ry="8"/>
    <ellipse cx="390" cy="360" rx="25" ry="8"/>
  </g>
  <!-- Gravity hint text -->
  <text x="400" y="440" text-anchor="middle" font-size="14" fill="#aaa" font-family="system-ui">Low gravity jumps • click to explore</text>
</svg>
</div>
</html>

Raw response

```html
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { width: 100vw; height: 100vh; background: #05051a; overflow: hidden; font-family: system-ui; }
  #container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 800px; }
  svg { width: 90vw; max-width: 960px; height: auto; }
</style>

<div id="container">
<svg viewBox="0 0 800 480" xmlns="http://www.w3.org/2000/svg">
  <!-- Background: deep space & moon -->
  <rect width="800" height="480" fill="#05051a"/>
  <!-- Moon surface -->
  <ellipse cx="400" cy="340" rx="340" ry="180" fill="#2c2c5e"/>
  <ellipse cx="400" cy="340" rx="320" ry="160" fill="#1e1e3d"/>
  <ellipse cx="400" cy="340" rx="300" ry="150" fill="#25254a"/>
  <!-- Craters -->
  <circle cx="120" cy="380" r="30" fill="#1a1a3a"/>
  <circle cx="280" cy="350" r="20" fill="#15152f"/>
  <circle cx="560" cy="390" r="25" fill="#1a1a3a"/>
  <circle cx="720" cy="360" r="18" fill="#15152f"/>
  <!-- Lunar dust particles -->
  <g fill="#aaccee">
    <circle cx="20" cy="200" r="2"/>
    <circle cx="80" cy="150" r="1.5"/>
    <circle cx="150" cy="260" r="2.5"/>
    <circle cx="260" cy="180" r="1"/>
    <circle cx="340" cy "220" r="3"/>
    <circle cx="470" cy="140" r="2"/>
    <circle cx="550" cy="280" r="1.5"/>
    <circle cx="640" cy="190" r="2.5"/>
    <circle cx="720" cy="160" r="1"/>
    <circle cx="50" cy="380" r="1.5"/>
    <circle cx="300" cy="400" r="2"/>
  </g>
  <!-- Stars -->
  <g fill="#fff" opacity="0.6">
    <circle cx="100" cy="80" r="1"/>
    <circle cx="200" cy="120" r="0.8"/>
    <circle cx="340" cy="50" r="1.2"/>
    <circle cx="480" cy="90" r="0.7"/>
    <circle cx="560" cy="40" r="1"/>
    <circle cx="680" cy="100" r="0.9"/>
    <circle cx="120" cy="350" r="1.3"/>
    <circle cx="300" cy="380" r="1.1"/>
    <circle cx="520" cy="330" r="1.4"/>
    <circle cx="700" cy="360" r="1"/>
  </g>
  <!-- Earth in distant sky -->
  <circle cx="720" cy="120" r="30" fill="#4a90e2" opacity="0.7"/>
  <!-- Astronaut cat silhouette -->
  <g id="astronaut" fill="#ffeaa7" stroke="#fdcb6e" stroke-width="2">
    <!-- Helmet dome -->
    <ellipse cx="400" cy="180" rx="140" ry="130" fill="#ffd1a8"/>
    <!-- Visor -->
    <ellipse cx="400" cy="175" rx="80" ry="70" fill="#2a9d8f" opacity="0.9"/>
    <!-- Cat head inside helmet -->
    <circle cx="380" cy="150" r="30" fill="#e9c46a"/>
    <!-- Ear nub left -->
    <ellipse cx="280" cy="165" r="25" fill="#ffeaa7"/>
    <!-- Ear nub right -->
    <ellipse cx="520" cy="165" r="25" fill="#ffeaa7"/>
    <!-- Body -->
    <path d="M400 260 Q400 300 340 340 Q300 360 280 330 Q260 300 280 260 Q300 240 340 260 Q380 260 400 260 Z"/>
    <!-- Back leg / skateboard base -->
    <rect x="330" y="340" width="40" height="20" fill="#ffeaa7" rx="3"/>
    <!-- Front leg -->
    <rect x="370" y="340" width="40" height="20" fill="#ffeaa7" rx="3"/>
    <!-- Tail -->
    <path d="M340 260 Q320 240 310 250" stroke="#fdcb6e" stroke-width="3" fill="none" stroke-linecap="round"/>
    <!-- Front of skateboard (nose) -->
    <polygon points="330,320 370,320 350,300" fill="#ffeaa7" stroke="#fdcb6e" stroke-width="2"/>
    <!-- Skateboard deck top pattern -->
    <rect x="330" y="340" width="80" height="10" fill="none" stroke="#fdcb6e" stroke-width="1" opacity="0.5"/>
    <!-- Wheels -->
    <g fill="#2c3e50">
      <circle cx="350" cy="360" r="18" opacity="0.9"/>
      <circle cx="390" cy="360" r="18" opacity="0.9"/>
      <!-- Wheel hubs -->
      <circle cx="350" cy="360" r="8" fill="#a29bfe"/>
      <circle cx="390" cy="360" r="8" fill="#a29bfe"/>
    </g>
    <!-- Skateboard trucks -->
    <g stroke="#fdcb6e" stroke-width="3" fill="none">
      <line x1="340" y1="340" x2="340" y2="380"/>
      <line x1="380" y1="340" x2="380" y2="380"/>
    </g>
    <!-- Cat eyes -->
    <circle cx="395" cy="155" r="6" fill="#2c3e50"/>
    <circle cx="405" cy="155" r="6" fill="#2c3e50"/>
    <!-- Cat mouth -->
    <path d="M395 170 Q405 175 410 170" stroke="#2c3e50" stroke-width="2" fill="none"/>
  </g>
  <!-- Motion glow trails (subtle) -->
  <g fill="#ff6b6b" opacity="0.15">
    <ellipse cx="350" cy="360" rx="25" ry="8"/>
    <ellipse cx="390" cy="360" rx="25" ry="8"/>
  </g>
  <!-- Gravity hint text -->
  <text x="400" y="440" text-anchor="middle" font-size="14" fill="#aaa" font-family="system-ui">Low gravity jumps • click to explore</text>
</svg>
</div>
</html>
```