Skateboarding astronaut catOne-line

Nemotron 3 Ultra (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: 1 min 58 s
Cost: $0
Output tokens: 6,359
Spent thinking: 46 tokens
Speed: 54.1 tok/s
Console errors: 0

First token after: 546 ms
First visible text after: 1.6 s
Prompt tokens: 366
Code size: 14.2 KB
Finish reason: stop
Served by: Nvidia
Model id: nvidia/nemotron-3-ultra-550b-a55b:free
Reasoning sent: {"effort":"high"}
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 · 325 lines

Download

<svg viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg">
  <!-- Background - Space -->
  <defs>
    <radialGradient id="spaceGradient" cx="50%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#0a0a2e"/>
      <stop offset="50%" stop-color="#05051a"/>
      <stop offset="100%" stop-color="#000000"/>
    </radialGradient>
    <radialGradient id="earthGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#4a90d9"/>
      <stop offset="70%" stop-color="#2c5f8a"/>
      <stop offset="100%" stop-color="#1a3a5c"/>
    </radialGradient>
    <radialGradient id="helmetGlass" cx="50%" cy="30%" r="60%">
      <stop offset="0%" stop-color="#87ceeb" stop-opacity="0.3"/>
      <stop offset="50%" stop-color="#4a90d9" stop-opacity="0.2"/>
      <stop offset="100%" stop-color="#1a3a5c" stop-opacity="0.4"/>
    </radialGradient>
    <linearGradient id="suitGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="50%" stop-color="#e8e8e8"/>
      <stop offset="100%" stop-color="#c0c0c0"/>
    </linearGradient>
    <linearGradient id="boardGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff6b35"/>
      <stop offset="50%" stop-color="#f7931e"/>
      <stop offset="100%" stop-color="#ff6b35"/>
    </linearGradient>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1.5" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
      <feOffset dx="2" dy="4" result="offsetblur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.3"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode in="offsetblur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Space background -->
  <rect width="600" height="500" fill="url(#spaceGradient)"/>

  <!-- Stars -->
  <g filter="url(#starGlow)">
    <circle cx="50" cy="80" r="1.5" fill="white"/>
    <circle cx="120" cy="40" r="1" fill="white"/>
    <circle cx="200" cy="100" r="2" fill="white"/>
    <circle cx="300" cy="60" r="1.5" fill="white"/>
    <circle cx="400" cy="30" r="1" fill="white"/>
    <circle cx="500" cy="90" r="2" fill="white"/>
    <circle cx="550" cy="150" r="1.5" fill="white"/>
    <circle cx="80" cy="200" r="1" fill="white"/>
    <circle cx="180" cy="180" r="1.5" fill="white"/>
    <circle cx="450" cy="180" r="1" fill="white"/>
    <circle cx="350" cy="140" r="2" fill="white"/>
    <circle cx="250" cy="220" r="1" fill="white"/>
    <circle cx="50" cy="300" r="1.5" fill="#fff8e7"/>
    <circle cx="550" cy="280" r="1" fill="#fff8e7"/>
    <circle cx="150" cy="350" r="1" fill="white"/>
    <circle cx="400" cy="320" r="1.5" fill="white"/>
    <circle cx="300" cy="400" r="1" fill="white"/>
    <circle cx="200" cy="420" r="1.5" fill="#e8f4ff"/>
    <circle cx="500" cy="380" r="1" fill="#e8f4ff"/>
  </g>

  <!-- Earth in background -->
  <g transform="translate(480, 80)">
    <circle r="55" fill="url(#earthGlow)" filter="url(#glow)"/>
    <!-- Continents -->
    <path d="M-10 -20 Q0 -30 15 -20 Q25 -10 20 5 Q15 15 0 20 Q-15 10 -10 -5 Z" fill="#2d8a2d" opacity="0.8"/>
    <path d="M-30 10 Q-20 20 -5 25 Q5 20 0 5 Q-10 0 -20 -5 Z" fill="#2d8a2d" opacity="0.7"/>
    <path d="M20 -35 Q35 -30 45 -15 Q50 0 40 15 Q30 20 20 10 Z" fill="#2d8a2d" opacity="0.6"/>
    <!-- Clouds -->
    <ellipse cx="-20" cy="-30" rx="12" ry="6" fill="white" opacity="0.4"/>
    <ellipse cx="30" cy="30" rx="15" ry="8" fill="white" opacity="0.3"/>
    <ellipse cx="-35" cy="15" rx="10" ry="5" fill="white" opacity="0.35"/>
  </g>

  <!-- Moon surface -->
  <g transform="translate(0, 380)">
    <!-- Ground base -->
    <ellipse cx="300" cy="60" rx="320" ry="80" fill="#3a3a4a"/>
    <!-- Craters -->
    <ellipse cx="100" cy="40" rx="35" ry="15" fill="#2e2e3e"/>
    <ellipse cx="110" cy="45" rx="25" ry="10" fill="#3a3a4a"/>
    <ellipse cx="450" cy="30" rx="40" ry="18" fill="#2e2e3e"/>
    <ellipse cx="460" cy="35" rx="30" ry="12" fill="#3a3a4a"/>
    <ellipse cx="200" cy="70" rx="20" ry="8" fill="#2e2e3e"/>
    <ellipse cx="380" cy="60" rx="15" ry="6" fill="#2e2e3e"/>
    <ellipse cx="520" cy="50" rx="12" ry="5" fill="#2e2e3e"/>
    <ellipse cx="50" cy="55" rx="10" ry="4" fill="#2e2e3e"/>
    <!-- Surface texture -->
    <g fill="#333344" opacity="0.5">
      <circle cx="80" cy="50" r="3"/>
      <circle cx="150" cy="30" r="2"/>
      <circle cx="250" cy="40" r="2.5"/>
      <circle cx="320" cy="35" r="2"/>
      <circle cx="400" cy="45" r="3"/>
      <circle cx="500" cy="55" r="2"/>
      <circle cx="550" cy="30" r="2.5"/>
      <circle cx="30" cy="45" r="2"/>
      <circle cx="280" cy="60" r="2"/>
      <circle cx="420" cy="70" r="2.5"/>
    </g>
    <!-- Footprint/skid marks -->
    <g stroke="#2a2a3a" stroke-width="2" fill="none" opacity="0.6">
      <path d="M180 80 Q200 60 220 80"/>
      <path d="M185 85 Q205 65 225 85"/>
      <path d="M190 90 Q210 70 230 90"/>
    </g>
  </g>

  <!-- Astronaut Cat -->
  <g transform="translate(280, 180)" filter="url(#softShadow)">
    <!-- Skateboard -->
    <g transform="translate(0, 120)">
      <!-- Board deck -->
      <path d="M-70 0 Q-75 -8 -40 -10 Q0 -12 40 -10 Q75 -8 70 0 Q75 8 40 10 Q0 12 -40 10 Q-75 8 -70 0 Z" fill="url(#boardGradient)"/>
      <!-- Board design -->
      <path d="M-60 -2 Q-62 -6 -35 -7 Q0 -8 35 -7 Q62 -6 60 -2 Q60 2 35 3 Q0 4 -35 3 Q-62 2 -60 2 Z" fill="#ff6b35" opacity="0.3"/>
      <!-- White stripe -->
      <rect x="-5" y="-8" width="10" height="16" rx="2" fill="white" opacity="0.9"/>
      <!-- Trucks -->
      <g fill="#4a4a5a">
        <rect x="-55" y="6" width="25" height="6" rx="1"/>
        <rect x="-58" y="10" width="8" height="12" rx="2"/>
        <rect x="30" y="6" width="25" height="6" rx="1"/>
        <rect x="35" y="10" width="8" height="12" rx="2"/>
      </g>
      <!-- Wheels -->
      <g fill="#1a1a2e">
        <circle cx="-45" cy="20" r="10"/>
        <circle cx="45" cy="20" r="10"/>
        <circle cx="-45" cy="20" r="5" fill="#3a3a5a"/>
        <circle cx="45" cy="20" r="5" fill="#3a3a5a"/>
      </g>
    </g>

    <!-- Cat Body -->
    <g transform="translate(0, -30)">
      <!-- Legs (back) -->
      <g fill="url(#suitGradient)">
        <path d="M-15 70 Q-20 90 -10 110 Q-5 120 5 115 L10 70 Z" stroke="#a0a0a0" stroke-width="1"/>
        <path d="M15 70 Q10 90 20 110 Q25 120 15 115 L10 70 Z" stroke="#a0a0a0" stroke-width="1"/>
      </g>
      <!-- Boots -->
      <g fill="#3a3a4a">
        <ellipse cx="-10" cy="115" rx="12" ry="8"/>
        <ellipse cx="15" cy="115" rx="12" ry="8"/>
        <ellipse cx="-10" cy="118" rx="10" ry="4" fill="#2a2a3a"/>
        <ellipse cx="15" cy="118" rx="10" ry="4" fill="#2a2a3a"/>
      </g>

      <!-- Torso -->
      <path d="M-40 30 Q-50 40 -45 80 Q-40 100 -10 105 Q10 100 25 90 Q40 80 45 50 Q50 30 40 20 Q30 10 0 5 Q-30 10 -40 20 Z" fill="url(#suitGradient)" stroke="#c0c0c0" stroke-width="1"/>

      <!-- Suit details -->
      <g fill="#d0d0d0" opacity="0.5">
        <!-- Chest panel -->
        <rect x="-20" y="0" width="40" height="50" rx="5"/>
        <rect x="-10" y="10" width="20" height="30" rx="3" fill="#4a90d9" opacity="0.3"/>
        <!-- Buttons -->
        <circle cx="-5" cy="20" r="3" fill="#ff6b35"/>
        <circle cx="5" cy="20" r="3" fill="#4a90d9"/>
        <circle cx="-5" cy="35" r="3" fill="#4ade80"/>
        <circle cx="5" cy="35" r="3" fill="#fbbf24"/>
      </g>

      <!-- Arms -->
      <g fill="url(#suitGradient)">
        <!-- Left arm -->
        <path d="M-40 40 Q-60 50 -70 70 Q-75 85 -65 95 L-50 85 Q-40 70 -40 40 Z" stroke="#a0a0a0" stroke-width="1"/>
        <!-- Right arm (waving) -->
        <path d="M40 40 Q60 30 80 20 Q90 10 85 0 L70 15 Q55 30 40 40 Z" stroke="#a0a0a0" stroke-width="1"/>
      </g>

      <!-- Gloves -->
      <g fill="#3a3a4a">
        <ellipse cx="-70" cy="95" rx="14" ry="10"/>
        <ellipse cx="85" cy="0" rx="14" ry="10" transform="rotate(-30 85 0)"/>
        <ellipse cx="-70" cy="98" rx="10" ry="5" fill="#2a2a3a"/>
        <ellipse cx="85" cy="2" rx="10" ry="5" fill="#2a2a3a" transform="rotate(-30 85 2)"/>
      </g>

      <!-- Neck ring -->
      <ellipse cx="0" cy="-10" rx="35" ry="12" fill="#2a2a3a"/>
      <ellipse cx="0" cy="-10" rx="30" ry="9" fill="url(#suitGradient)"/>

      <!-- Head/Helmet -->
      <g>
        <!-- Helmet base -->
        <ellipse cx="0" cy="-55" rx="50" ry="55" fill="#1a1a2e"/>
        <ellipse cx="0" cy="-55" rx="46" ry="50" fill="url(#helmetGlass)"/>
        <!-- Helmet ring -->
        <ellipse cx="0" cy="-5" rx="52" ry="15" fill="none" stroke="#c0c0c0" stroke-width="3"/>
        <ellipse cx="0" cy="-5" rx="50" ry="12" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.3"/>

        <!-- Cat face inside helmet -->
        <g transform="translate(0, -55)">
          <!-- Ears (pressing against helmet) -->
          <g fill="#c0c0c0">
            <path d="M-35 -40 Q-40 -60 -25 -50 Q-15 -45 -25 -35 Z" stroke="#a0a0a0" stroke-width="1"/>
            <path d="M35 -40 Q40 -60 25 -50 Q15 -45 25 -35 Z" stroke="#a0a0a0" stroke-width="1"/>
            <!-- Ear insides -->
            <path d="M-32 -38 Q-35 -52 -23 -45 Q-18 -40 -23 -35 Z" fill="#ffb3d9"/>
            <path d="M32 -38 Q35 -52 23 -45 Q18 -40 23 -35 Z" fill="#ffb3d9"/>
          </g>

          <!-- Face fur -->
          <ellipse cx="0" cy="0" rx="38" ry="35" fill="#f5f0e8"/>

          <!-- Eyes -->
          <g>
            <!-- Left eye -->
            <ellipse cx="-16" cy="-5" rx="10" ry="12" fill="#1a1a2e"/>
            <ellipse cx="-14" cy="-7" rx="5" ry="6" fill="#4a90d9"/>
            <ellipse cx="-13" cy="-9" rx="2" ry="2" fill="white"/>
            <ellipse cx="-16" cy="-6" rx="1" ry="1.5" fill="white"/>
            <!-- Right eye -->
            <ellipse cx="16" cy="-5" rx="10" ry="12" fill="#1a1a2e"/>
            <ellipse cx="18" cy="-7" rx="5" ry="6" fill="#4a90d9"/>
            <ellipse cx="19" cy="-9" rx="2" ry="2" fill="white"/>
            <ellipse cx="16" cy="-6" rx="1" ry="1.5" fill="white"/>
          </g>

          <!-- Nose -->
          <ellipse cx="0" cy="8" rx="4" ry="3" fill="#ffb3d9"/>
          <!-- Mouth -->
          <path d="M0 12 Q-5 18 0 20 Q5 18 0 12" fill="none" stroke="#1a1a2e" stroke-width="2" stroke-linecap="round"/>
          <path d="M-3 15 Q0 18 3 15" fill="none" stroke="#1a1a2e" stroke-width="1.5" stroke-linecap="round"/>

          <!-- Whiskers -->
          <g stroke="#8a8a8a" stroke-width="1.5" fill="none">
            <path d="M-25 10 Q-35 8 -42 5"/>
            <path d="M-25 13 Q-36 13 -43 15"/>
            <path d="M-25 16 Q-35 18 -42 21"/>
            <path d="M25 10 Q35 8 42 5"/>
            <path d="M25 13 Q36 13 43 15"/>
            <path d="M25 16 Q35 18 42 21"/>
          </g>

          <!-- Eyebrows -->
          <g stroke="#8a8a8a" stroke-width="2" fill="none" stroke-linecap="round">
            <path d="M-25 -18 Q-16 -22 -7 -18"/>
            <path d="M7 -18 Q16 -22 25 -18"/>
          </g>
        </g>

        <!-- Helmet reflection -->
        <ellipse cx="-15" cy="-70" rx="15" ry="10" fill="white" opacity="0.15"/>
        <ellipse cx="20" cy="-80" rx="8" ry="5" fill="white" opacity="0.1"/>
      </g>

      <!-- Backpack -->
      <g transform="translate(0, -10)">
        <path d="M-25 -20 Q-45 -20 -45 30 Q-45 50 -25 50 Q-10 50 -10 30 Q-10 -10 -25 -20 Z" fill="#3a3a4a" stroke="#5a5a6a" stroke-width="2"/>
        <rect x="-40" y="-15" width="30" height="60" rx="3" fill="#2a2a3a" opacity="0.5"/>
        <!-- Tubes -->
        <g stroke="#5a5a6a" stroke-width="4" fill="none" stroke-linecap="round">
          <path d="M-30 -20 Q-30 -35 -15 -40"/>
          <path d="M-30 50 Q-30 65 -15 70"/>
        </g>
        <!-- Flag patch -->
        <g transform="translate(-25, 10)">
          <rect x="0" y="0" width="16" height="12" fill="#1a1a2e" rx="1"/>
          <rect x="1" y="1" width="14" height="10" fill="white" rx="1"/>
          <rect x="2" y="2" width="12" height="3" fill="#dc2626"/>
          <rect x="2" y="7" width="12" height="3" fill="#dc2626"/>
          <rect x="2" y="2" width="5" height="8" fill="#1e3a8a"/>
        </g>
        <!-- Oxygen gauge -->
        <circle cx="-25" cy="-10" r="8" fill="#1a1a2e" stroke="#5a5a6a" stroke-width="2"/>
        <path d="M-25 -10 L-25 -16" stroke="#4ade80" stroke-width="3" stroke-linecap="round"/>
      </g>

      <!-- Tail (coming out of suit bottom) -->
      <path d="M10 95 Q25 100 35 85 Q45 70 40 50" fill="none" stroke="#f5f0e8" stroke-width="12" stroke-linecap="round"/>
      <path d="M10 95 Q25 100 35 85 Q45 70 40 50" fill="none" stroke="#e8e0d0" stroke-width="8" stroke-linecap="round"/>
      <!-- Tail tip -->
      <ellipse cx="40" cy="50" rx="8" ry="6" fill="#f5f0e8" transform="rotate(-20 40 50)"/>
    </g>
  </g>

  <!-- Moon dust particles kicked up -->
  <g fill="#5a5a6a" opacity="0.6">
    <circle cx="200" cy="300" r="2"/>
    <circle cx="210" cy="295" r="1.5"/>
    <circle cx="220" cy="305" r="1"/>
    <circle cx="350" cy="290" r="2"/>
    <circle cx="360" cy="285" r="1.5"/>
    <circle cx="370" cy="295" r="1"/>
    <circle cx="190" cy="310" r="1.5"/>
    <circle cx="380" cy="305" r="1"/>
  </g>

  <!-- Floating moon rocks near cat -->
  <g fill="#4a4a5a">
    <ellipse cx="150" cy="320" rx="8" ry="5" transform="rotate(15 150 320)"/>
    <ellipse cx="480" cy="330" rx="6" ry="4" transform="rotate(-20 480 330)"/>
    <ellipse cx="100" cy="350" rx="5" ry="3" transform="rotate(30 100 350)"/>
  </g>

  <!-- "Meow" text bubble -->
  <g transform="translate(400, 100)" filter="url(#softShadow)">
    <path d="M0 0 Q30 -10 50 0 Q70 10 70 30 Q70 50 50 60 Q30 70 0 60 Q-20 50 -20 30 Q-20 10 0 0 Z" fill="white" stroke="#e0e0e0" stroke-width="1"/>
    <path d="M-10 40 Q0 50 10 40" fill="white" stroke="#e0e0e0" stroke-width="1"/>
    <text x="35" y="38" font-family="'Comic Sans MS', cursive, sans-serif" font-size="16" font-weight="bold" fill="#1a1a2e" text-anchor="middle">Meow! 🚀</text>
  </g>
</svg>

Reasoning trace (46 tokens)

The user wants an SVG of an astronaut cat skateboarding on the moon. I'll create a detailed, cute SVG illustration with the cat in a spacesuit on a skateboard on the lunar surface with Earth visible in the background.