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 37 s
Cost: $0
Output tokens: 6,431
Spent thinking: 103 tokens
Speed: 66.6 tok/s
Console errors: 0

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

Download

<svg viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#050510"/>
      <stop offset="50%" style="stop-color:#0a0a2e"/>
      <stop offset="100%" style="stop-color:#1a1a4a"/>
    </linearGradient>
    <radialGradient id="earthGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#4ecdc4"/>
      <stop offset="30%" style="stop-color:#2cb5b0"/>
      <stop offset="70%" style="stop-color:#1a7a76"/>
      <stop offset="100%" style="stop-color:#0d4d4a"/>
    </radialGradient>
    <radialGradient id="moonGradient" cx="40%" cy="40%" r="60%">
      <stop offset="0%" style="stop-color:#f5f5f0"/>
      <stop offset="50%" style="stop-color:#e8e8e0"/>
      <stop offset="100%" style="stop-color:#ccccc0"/>
    </radialGradient>
    <radialGradient id="helmetGradient" cx="50%" cy="30%" r="50%">
      <stop offset="0%" style="stop-color:#ffffff"/>
      <stop offset="40%" style="stop-color:#e0f7fa"/>
      <stop offset="100%" style="stop-color:#80deea"/>
    </radialGradient>
    <radialGradient id="suitGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#ffffff"/>
      <stop offset="60%" style="stop-color:#e0e0e0"/>
      <stop offset="100%" style="stop-color:#bdbdbd"/>
    </radialGradient>
    <radialGradient id="boardGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#ff6b35"/>
      <stop offset="100%" style="stop-color:#e55a2b"/>
    </radialGradient>
    <radialGradient id="wheelGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#424242"/>
      <stop offset="100%" style="stop-color:#1a1a1a"/>
    </radialGradient>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="3" 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="4"/>
      <feOffset dx="3" dy="5" result="offset"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.3"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode in="offset"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="craterTexture">
      <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" stitchTiles="stitch"/>
      <feColorMatrix type="saturate" values="0"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.15"/>
      </feComponentTransfer>
    </filter>
    <clipPath id="helmetClip">
      <ellipse cx="300" cy="185" rx="55" ry="50"/>
    </clipPath>
  </defs>

  <!-- Background Sky -->
  <rect width="600" height="500" fill="url(#skyGradient)"/>

  <!-- Stars -->
  <g fill="white">
    <circle cx="45" cy="65" r="1.2" opacity="0.9"/>
    <circle cx="120" cy="35" r="0.8" opacity="0.7"/>
    <circle cx="200" cy="85" r="1" opacity="0.8"/>
    <circle cx="280" cy="45" r="0.6" opacity="0.6"/>
    <circle cx="380" cy="70" r="1.3" opacity="0.9"/>
    <circle cx="460" cy="40" r="0.9" opacity="0.7"/>
    <circle cx="540" cy="90" r="1.1" opacity="0.8"/>
    <circle cx="80" cy="130" r="0.7" opacity="0.5"/>
    <circle cx="180" cy="110" r="1" opacity="0.6"/>
    <circle cx="420" cy="120" r="0.8" opacity="0.7"/>
    <circle cx="520" cy="140" r="0.6" opacity="0.5"/>
    <circle cx="30" cy="180" r="1.2" opacity="0.8"/>
    <circle cx="570" cy="200" r="0.9" opacity="0.6"/>
    <circle cx="150" cy="200" r="0.5" opacity="0.4"/>
    <circle cx="350" cy="180" r="1.1" opacity="0.7"/>
    <circle cx="480" cy="220" r="0.7" opacity="0.5"/>
    <circle cx="60" cy="250" r="1" opacity="0.6"/>
    <circle cx="250" cy="240" r="0.8" opacity="0.5"/>
    <circle cx="550" cy="260" r="1.3" opacity="0.8"/>
    <circle cx="100" cy="280" r="0.6" opacity="0.4"/>
  </g>

  <!-- Earth -->
  <g filter="url(#glow)">
    <circle cx="520" cy="80" r="55" fill="url(#earthGradient)"/>
    <ellipse cx="505" cy="70" rx="25" ry="15" fill="#1b8a6a" opacity="0.6"/>
    <ellipse cx="535" cy="95" rx="20" ry="12" fill="#2db87a" opacity="0.5"/>
    <ellipse cx="550" cy="60" rx="12" ry="8" fill="#3dd98a" opacity="0.4"/>
    <circle cx="520" cy="80" r="55" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
  </g>

  <!-- Moon Surface (far) -->
  <ellipse cx="300" cy="520" rx="400" ry="180" fill="url(#moonGradient)" filter="url(#craterTexture)"/>
  
  <!-- Moon Craters (far) -->
  <g fill="none" stroke="#b8b8a8" stroke-width="1.5" opacity="0.4">
    <ellipse cx="150" cy="440" rx="35" ry="15"/>
    <ellipse cx="480" cy="460" rx="28" ry="12"/>
    <ellipse cx="50" cy="480" rx="22" ry="10"/>
    <ellipse cx="550" cy="450" rx="30" ry="13"/>
  </g>

  <!-- Moon Surface (near) -->
  <ellipse cx="300" cy="580" rx="450" ry="150" fill="url(#moonGradient)" filter="url(#craterTexture)"/>

  <!-- Moon Craters (near) -->
  <g fill="none" stroke="#b0b0a0" stroke-width="2" opacity="0.5">
    <ellipse cx="100" cy="500" rx="45" ry="18"/>
    <ellipse cx="450" cy="510" rx="38" ry="15"/>
    <ellipse cx="580" cy="520" rx="25" ry="10"/>
    <ellipse cx="30" cy="530" rx="30" ry="12"/>
    <ellipse cx="300" cy="490" rx="55" ry="22"/>
  </g>

  <!-- Skateboard Shadow -->
  <ellipse cx="300" cy="455" rx="70" ry="8" fill="#000" opacity="0.25" filter="url(#softShadow)"/>

  <!-- Skateboard -->
  <g transform="translate(300, 445) rotate(-5)" filter="url(#softShadow)">
    <!-- Board deck -->
    <path d="M-85,-5 Q-90,-10 -80,-15 Q-60,-20 0,-18 Q60,-20 80,-15 Q90,-10 85,-5 Q80,5 0,8 Q-80,5 -85,-5" 
          fill="url(#boardGradient)" stroke="#c04020" stroke-width="2"/>
    <!-- Board top design -->
    <path d="M-75,-3 Q-78,-6 -70,-9 Q-50,-12 0,-11 Q50,-12 70,-9 Q78,-6 75,-3 Q70,4 0,6 Q-70,4 -75,-3" 
          fill="none" stroke="#ff9f7a" stroke-width="1.5" opacity="0.6"/>
    <!-- Grip tape texture -->
    <g fill="#333" opacity="0.3">
      <rect x="-80" y="-12" width="160" height="1" rx="0.5"/>
      <rect x="-80" y="-8" width="160" height="1" rx="0.5"/>
      <rect x="-80" y="-4" width="160" height="1" rx="0.5"/>
      <rect x="-80" y="0" width="160" height="1" rx="0.5"/>
      <rect x="-80" y="4" width="160" height="1" rx="0.5"/>
    </g>
    <!-- Front truck -->
    <g transform="translate(65, 8)">
      <rect x="-8" y="0" width="16" height="6" rx="2" fill="#4a4a4a"/>
      <rect x="-12" y="6" width="24" height="3" rx="1" fill="#666"/>
      <!-- Front wheels -->
      <circle cx="-14" cy="12" r="10" fill="url(#wheelGradient)"/>
      <circle cx="-14" cy="12" r="6" fill="#2a2a2a"/>
      <circle cx="14" cy="12" r="10" fill="url(#wheelGradient)"/>
      <circle cx="14" cy="12" r="6" fill="#2a2a2a"/>
    </g>
    <!-- Back truck -->
    <g transform="translate(-65, 8)">
      <rect x="-8" y="0" width="16" height="6" rx="2" fill="#4a4a4a"/>
      <rect x="-12" y="6" width="24" height="3" rx="1" fill="#666"/>
      <!-- Back wheels -->
      <circle cx="-14" cy="12" r="10" fill="url(#wheelGradient)"/>
      <circle cx="-14" cy="12" r="6" fill="#2a2a2a"/>
      <circle cx="14" cy="12" r="10" fill="url(#wheelGradient)"/>
      <circle cx="14" cy="12" r="6" fill="#2a2a2a"/>
    </g>
  </g>

  <!-- Astronaut Cat -->
  <g transform="translate(300, 180)" filter="url(#softShadow)">
    <!-- Backpack / Life support -->
    <path d="M-45,-20 Q-65,-25 -70,0 Q-68,30 -48,35 Q-35,38 -30,20 Q-32,-10 -45,-20" 
          fill="url(#suitGradient)" stroke="#9e9e9e" stroke-width="1"/>
    <rect x="-62" y="5" width="20" height="20" rx="3" fill="#fff" stroke="#9e9e9e"/>
    <rect x="-58" y="9" width="12" height="12" rx="2" fill="#ff6b35"/>
    <circle cx="-52" cy="20" r="3" fill="#4caf50"/>

    <!-- Suit Body -->
    <path d="M-35,20 Q-40,55 -20,85 Q0,95 20,85 Q40,55 35,20 Q30,0 -30,0 Q-40,5 -35,20" 
          fill="url(#suitGradient)" stroke="#9e9e9e" stroke-width="1.5"/>
    <!-- Suit details -->
    <path d="M-20,30 Q-10,45 0,50 Q10,45 20,30" fill="none" stroke="#fff" stroke-width="2" opacity="0.5"/>
    <circle cx="-15" cy="45" r="4" fill="#fff" stroke="#9e9e9e" stroke-width="1"/>
    <circle cx="15" cy="45" r="4" fill="#fff" stroke="#9e9e9e" stroke-width="1"/>
    <rect x="-8" y="55" width="16" height="12" rx="3" fill="#fff" stroke="#9e9e9e" stroke-width="1"/>
    <rect x="-4" y="58" width="8" height="6" rx="1" fill="#ff6b35"/>

    <!-- Left Arm (front) -->
    <g>
      <path d="M-35,25 Q-55,35 -65,55 Q-70,65 -55,75 Q-45,70 -35,55" 
            fill="url(#suitGradient)" stroke="#9e9e9e" stroke-width="1.5"/>
      <!-- Glove -->
      <ellipse cx="-60" cy="80" rx="14" ry="18" fill="url(#suitGradient)" stroke="#9e9e9e" stroke-width="1"/>
      <path d="M-70,78 Q-80,75 -82,82 Q-78,88 -70,85" fill="#fff" stroke="#9e9e9e" stroke-width="1"/>
      <path d="M-55,75 Q-50,70 -45,78" fill="#fff" stroke="#9e9e9e" stroke-width="1"/>
    </g>

    <!-- Right Arm (back, holding board) -->
    <g transform="translate(0, -5)">
      <path d="M35,30 Q50,45 60,65 Q68,78 55,88 Q45,85 35,65" 
            fill="url(#suitGradient)" stroke="#9e9e9e" stroke-width="1.5"/>
      <!-- Glove -->
      <ellipse cx="58" cy="92" rx="14" ry="18" fill="url(#suitGradient)" stroke="#9e9e9e" stroke-width="1"/>
    </g>

    <!-- Left Leg (front) -->
    <g>
      <path d="M-15,85 Q-20,110 -10,135 Q-5,145 5,140 Q10,135 5,110 Q8,90 -15,85" 
            fill="url(#suitGradient)" stroke="#9e9e9e" stroke-width="1.5"/>
      <!-- Boot -->
      <path d="M-10,135 Q-20,138 -22,145 Q-15,155 10,152 Q18,148 15,140 Q12,135 5,135" 
            fill="#333" stroke="#1a1a1a" stroke-width="1.5"/>
      <ellipse cx="2" cy="150" rx="18" ry="8" fill="#222"/>
    </g>

    <!-- Right Leg (back, on board) -->
    <g>
      <path d="M15,85 Q25,110 30,130 Q32,138 25,142 Q20,140 12,125 Q10,110 15,85" 
            fill="url(#suitGradient)" stroke="#9e9e9e" stroke-width="1.5"/>
      <!-- Boot -->
      <path d="M25,130 Q35,132 38,138 Q32,148 5,145 Q0,142 -2,135 Q2,132 12,130" 
            fill="#333" stroke="#1a1a1a" stroke-width="1.5"/>
      <ellipse cx="12" cy="143" rx="18" ry="8" fill="#222"/>
    </g>

    <!-- Helmet -->
    <g clip-path="url(#helmetClip)">
      <ellipse cx="0" cy="-55" rx="58" ry="62" fill="url(#helmetGradient)" stroke="#80deea" stroke-width="2"/>
      <!-- Helmet reflection -->
      <ellipse cx="-15" cy="-75" rx="20" ry="15" fill="#fff" opacity="0.15"/>
      <ellipse cx="10" cy="-65" rx="12" ry="8" fill="#fff" opacity="0.1"/>
      <!-- Visor tint -->
      <ellipse cx="0" cy="-50" rx="45" ry="48" fill="#006064" opacity="0.15"/>
    </g>

    <!-- Cat Face inside helmet -->
    <g transform="translate(0, -55)">
      <!-- Ears -->
      <path d="M-38,-45 Q-42,-60 -30,-55 Q-25,-50 -32,-40" fill="#fff" stroke="#ddd" stroke-width="1"/>
      <path d="M-38,-45 Q-40,-55 -34,-50" fill="#ffccbc" opacity="0.5"/>
      <path d="M38,-45 Q42,-60 30,-55 Q25,-50 32,-40" fill="#fff" stroke="#ddd" stroke-width="1"/>
      <path d="M38,-45 Q40,-55 34,-50" fill="#ffccbc" opacity="0.5"/>
      
      <!-- Face fur -->
      <ellipse cx="0" cy="-5" rx="38" ry="35" fill="#fff"/>
      <ellipse cx="0" cy="0" rx="30" ry="25" fill="#fffef7"/>
      
      <!-- Eyes -->
      <g>
        <!-- Left eye -->
        <ellipse cx="-18" cy="-8" rx="10" ry="12" fill="#1a1a2e"/>
        <ellipse cx="-16" cy="-10" rx="5" ry="6" fill="#ffd54f"/>
        <ellipse cx="-15" cy="-11" rx="2.5" ry="3" fill="#fff" opacity="0.9"/>
        <ellipse cx="-18" cy="-9" rx="1" ry="1.5" fill="#fff"/>
        <!-- Right eye -->
        <ellipse cx="18" cy="-8" rx="10" ry="12" fill="#1a1a2e"/>
        <ellipse cx="20" cy="-10" rx="5" ry="6" fill="#ffd54f"/>
        <ellipse cx="21" cy="-11" rx="2.5" ry="3" fill="#fff" opacity="0.9"/>
        <ellipse cx="18" cy="-9" rx="1" ry="1.5" fill="#fff"/>
      </g>
      
      <!-- Nose -->
      <path d="M0,8 Q-3,12 0,14 Q3,12 0,8" fill="#ff9e80"/>
      <ellipse cx="-1.5" cy="11" rx="1" ry="0.5" fill="#ff6b35"/>
      <ellipse cx="1.5" cy="11" rx="1" ry="0.5" fill="#ff6b35"/>
      
      <!-- Mouth -->
      <path d="M0,14 Q-8,18 0,20 Q8,18 0,14" fill="none" stroke="#333" stroke-width="1.5"/>
      <path d="M-3,16 Q0,19 3,16" fill="none" stroke="#333" stroke-width="1"/>
      
      <!-- Whiskers -->
      <g stroke="#666" stroke-width="0.8" opacity="0.6">
        <path d="M-25,12 Q-38,10 -42,8"/>
        <path d="M-25,15 Q-38,14 -42,15"/>
        <path d="M-25,18 Q-38,20 -42,22"/>
        <path d="M25,12 Q38,10 42,8"/>
        <path d="M25,15 Q38,14 42,15"/>
        <path d="M25,18 Q38,20 42,22"/>
      </g>
      
      <!-- Eyebrows -->
      <g stroke="#333" stroke-width="2" fill="none">
        <path d="M-28,-20 Q-18,-25 -8,-20"/>
        <path d="M28,-20 Q18,-25 8,-20"/>
      </g>
    </g>

    <!-- Helmet rim / seal -->
    <ellipse cx="0" cy="-55" rx="58" ry="62" fill="none" stroke="#fff" stroke-width="3" opacity="0.3"/>
    <ellipse cx="0" cy="-55" rx="55" ry="58" fill="none" stroke="#b0bec5" stroke-width="1"/>

    <!-- Neck ring -->
    <ellipse cx="0" cy="5" rx="40" ry="8" fill="#424242" stroke="#616161" stroke-width="2"/>
    <ellipse cx="0" cy="5" rx="36" ry="5" fill="#616161"/>
  </g>

  <!-- Moon dust particles kicked up -->
  <g fill="#e8e8e0" opacity="0.6">
    <circle cx="220" cy="440" r="2"/>
    <circle cx="240" cy="435" r="1.5"/>
    <circle cx="260" cy="445" r="1"/>
    <circle cx="340" cy="438" r="1.5"/>
    <circle cx="360" cy="442" r="2"/>
    <circle cx="380" cy="435" r="1"/>
    <circle cx="190" cy="450" r="1"/>
    <circle cx="410" cy="448" r="1.5"/>
  </g>

  <!-- Small crater near cat -->
  <ellipse cx="380" cy="470" rx="25" ry="10" fill="none" stroke="#b8b8a8" stroke-width="1.5" opacity="0.4"/>
  <ellipse cx="180" cy="475" rx="20" ry="8" fill="none" stroke="#b8b8a8" stroke-width="1.5" opacity="0.4"/>

  <!-- Flag on moon (far) -->
  <g transform="translate(480, 380)">
    <line x1="0" y1="0" x2="0" y2="-60" stroke="#666" stroke-width="2"/>
    <polygon points="0,-60 35,-50 0,-40" fill="#ff5252" opacity="0.7"/>
  </g>

  <!-- Footprints -->
  <g fill="#d0d0c0" opacity="0.5">
    <ellipse cx="260" cy="480" rx="8" ry="4"/>
    <ellipse cx="280" cy="488" rx="8" ry="4"/>
    <ellipse cx="320" cy="485" rx="8" ry="4"/>
    <ellipse cx="340" cy="492" rx="8" ry="4"/>
  </g>
</svg>

Reasoning trace (103 tokens)

The user wants an SVG of an astronaut cat skateboarding on the moon. This is a creative illustration request. I need to create a detailed, visually appealing SVG that shows:
1. A cat in an astronaut suit
2. The cat skateboarding
3. The moon surface as background
4. Earth in the distance
5. Stars and space elements

I'll create a well-structured SVG with layers, using gradients for depth, and make it cute but detailed. The cat should be the focal point.