Models 44

Nemotron 3.5 Super VL (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
37.0 s
Cost
$0
Output tokens
4,839
Spent thinking
0 tokens
Speed
132.1 tok/s
Console errors
0
First token after
399 ms
First visible text after
399 ms
Prompt tokens
366
Code size
12.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
“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 · 343 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background: #0a0a0f;
    color: #fff;
    font-family: system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
  }
  h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #e0e0ff;
    text-shadow: 0 0 15px rgba(150, 150, 255, 0.6);
  }
  .container {
    width: 100%;
    max-width: 900px;
    padding: 1rem;
    box-sizing: border-box;
  }
  svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    background: #050508;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  }
  .caption {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #aaa;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <h1>🐱🚀 Astronaut Cat Skateboarding on the Moon</h1>
  
  <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- Gradient for the moon surface -->
      <linearGradient id="moonGradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#2a2a2a;stop-opacity:1" />
        <stop offset="50%" style="stop-color:#1a1a1a;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#0d0d0d;stop-opacity:1" />
      </linearGradient>
      
      <!-- Helmet visor gradient -->
      <linearGradient id="visorGrad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#00ffff;stop-opacity:0.4" />
        <stop offset="50%" style="stop-color:#0088ff;stop-opacity:0.7" />
        <stop offset="100%" style="stop-color:#000033;stop-opacity:0.9" />
      </linearGradient>
      
      <!-- Astronaut suit gradient -->
      <linearGradient id="suitGrad" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
        <stop offset="40%" style="stop-color:#e0e0e0;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#a0a0a0;stop-opacity:1" />
      </linearGradient>
      
      <!-- Skateboard gradient -->
      <linearGradient id="boardGrad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#ff4757;stop-opacity:1" />
        <stop offset="50%" style="stop-color:#ffa502;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#2ed573;stop-opacity:1" />
      </linearGradient>
      
      <!-- Star filter -->
      <filter id="starGlow">
        <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
        <feMerge>
          <feMergeNode in="coloredBlur"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
      
      <!-- Dust kick filter -->
      <filter id="dustGlow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="3" result="blur"/>
        <feComposite in="SourceGraphic" in2="blur" operator="over"/>
      </filter>
    </defs>
    
    <!-- Background Space -->
    <rect width="800" height="600" fill="#050508"/>
    
    <!-- Stars -->
    <g id="stars">
      <!-- Static stars will be populated by JS -->
    </g>
    
    <!-- Distant planet -->
    <circle cx="650" cy="100" r="40" fill="#4a4a6a" opacity="0.3"/>
    <circle cx="655" cy="95" r="15" fill="#ffffff" opacity="0.6"/>
    
    <!-- Moon Surface -->
    <path d="M0,400 Q200,350 400,400 T800,400 V600 H0 Z" fill="url(#moonGradient)"/>
    
    <!-- Craters -->
    <g fill="#1a1a1a" opacity="0.4">
      <ellipse cx="100" cy="440" rx="30" ry="15"/>
      <ellipse cx="250" cy="470" rx="50" ry="25"/>
      <ellipse cx="550" cy="430" rx="40" ry="20"/>
      <ellipse cx="700" cy="480" rx="35" ry="18"/>
      <ellipse cx="150" cy="520" rx="25" ry="12"/>
      <ellipse cx="620" cy="550" rx="30" ry="15"/>
    </g>
    
    <!-- Crater highlights -->
    <g fill="#3a3a3a" opacity="0.3">
      <path d="M100,440 Q130,440 130,455 Q100,455 100,440 Z"/>
      <path d="M250,470 Q300,470 300,495 Q250,495 250,470 Z"/>
      <path d="M550,430 Q590,430 590,450 Q550,450 550,430 Z"/>
    </g>
    
    <!-- Lunar dust kick (behind board) -->
    <g id="dustGroup" opacity="0.6">
      <path d="M300,430 Q320,410 340,430" fill="none" stroke="#cccccc" stroke-width="4" stroke-linecap="round"/>
      <path d="M310,435 Q330,415 350,435" fill="none" stroke="#cccccc" stroke-width="3" stroke-linecap="round"/>
      <path d="M320,440 Q340,420 360,440" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round"/>
    </g>
    
    <!-- Skateboard -->
    <g id="skateboard" transform="translate(320, 420)">
      <!-- Board deck -->
      <path d="M-90,10 Q0,-20 90,10 L90,20 Q0,30 -90,20 Z" fill="url(#boardGrad)" stroke="#333" stroke-width="2"/>
      
      <!-- Wheels -->
      <circle cx="-70" cy="25" r="10" fill="#2d3436"/>
      <circle cx="70" cy="25" r="10" fill="#2d3436"/>
      <circle cx="-70" cy="25" r="6" fill="#636e72"/>
      <circle cx="70" cy="25" r="6" fill="#636e72"/>
      
      <!-- Trucks -->
      <rect x="-80" y="18" width="160" height="4" fill="#636e72" rx="2"/>
      <rect x="65" y="12" width="8" height="16" fill="#b2bec3"/>
      <rect x="-73" y="12" width="8" height="16" fill="#b2bec3"/>
    </g>
    
    <!-- Astronaut Cat Group -->
    <g id="astronautCat" transform="translate(320, 400)">
      <!-- Backpack / Life support -->
      <path d="M-10,0 Q-20,-10 -20,20 Q-20,40 -10,50 Q0,50 0,0 Z" fill="#b2bec3" stroke="#636e72" stroke-width="2"/>
      <circle cx="-15" cy="25" r="3" fill="#00d2d3"/>
      <rect x="-18" y="5" width="16" height="8" fill="#636e72" rx="2"/>
      
      <!-- Suit body -->
      <path d="M-25,20 Q-30,40 -25,60 Q-25,80 -10,85 Q5,85 10,80 Q15,60 10,40 Q15,20 10,0 Q5,-10 -10,-10 Z" fill="url(#suitGrad)" stroke="#636e72" stroke-width="2"/>
      
      <!-- Suit details -->
      <line x1="-15" y1="30" x2="15" y2="30" stroke="#636e72" stroke-width="2"/>
      <line x1="-15" y1="50" x2="15" y2="50" stroke="#636e72" stroke-width="2"/>
      <circle cx="-12" cy="40" r="2" fill="#00d2d3"/>
      <circle cx="12" cy="40" r="2" fill="#00d2d3"/>
      
      <!-- Arms -->
      <path d="M-25,30 Q-40,35 -45,50" fill="none" stroke="url(#suitGrad)" stroke-width="8" stroke-linecap="round"/>
      <path d="M10,30 Q25,35 30,50" fill="none" stroke="url(#suitGrad)" stroke-width="8" stroke-linecap="round"/>
      <circle cx="-45" cy="50" r="6" fill="#e0e0e0"/>
      <circle cx="30" cy="50" r="6" fill="#e0e0e0"/>
      
      <!-- Gloves -->
      <circle cx="-45" cy="50" r="5" fill="#ccd6f6" stroke="#636e72" stroke-width="1"/>
      <circle cx="30" cy="50" r="5" fill="#ccd6f6" stroke="#636e72" stroke-width="1"/>
      
      <!-- Neck ring -->
      <ellipse cx="-7" cy="0" rx="18" ry="12" fill="#636e72"/>
      
      <!-- Helmet -->
      <g id="helmetGroup">
        <circle cx="-7" cy="-25" r="28" fill="#b2bec3" stroke="#636e72" stroke-width="3"/>
        <circle cx="-7" cy="-25" r="22" fill="url(#visorGrad)" stroke="#00d2d3" stroke-width="2"/>
        <!-- Helmet reflection -->
        <path d="M-20,-30 Q-10,-35 0,-30 Q10,-35 20,-30" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
      </g>
      
      <!-- Cat ears inside helmet -->
      <g transform="translate(-7, -50)">
        <path d="M-8,0 L-14,-12 L-2,0" fill="#ffffff" stroke="#636e72" stroke-width="1"/>
        <path d="M4,0 L10,-12 L14,0" fill="#ffffff" stroke="#636e72" stroke-width="1"/>
        <path d="M-8,0 L-11,-8 L-5,-2" fill="#ff9ff3" opacity="0.6"/>
        <path d="M4,0 L7,-8 L13,-2" fill="#ff9ff3" opacity="0.6"/>
      </g>
      
      <!-- Legs -->
      <path d="M-15,80 Q-20,100 -15,115" fill="none" stroke="url(#suitGrad)" stroke-width="10" stroke-linecap="round"/>
      <path d="M0,80 Q5,100 0,115" fill="none" stroke="url(#suitGrad)" stroke-width="10" stroke-linecap="round"/>
      
      <!-- Boots on board -->
      <ellipse cx="-15" cy="118" rx="8" ry="5" fill="#2d3436" transform="rotate(-15 -15 118)"/>
      <ellipse cx="0" cy="118" rx="8" ry="5" fill="#2d3436" transform="rotate(15 0 118)"/>
    </g>
    
    <!-- Moon surface foreground (craters in front) -->
    <path d="M300,430 Q320,440 340,430" fill="none" stroke="#3a3a3a" stroke-width="2"/>
    <path d="M350,445 Q370,455 390,445" fill="none" stroke="#3a3a3a" stroke-width="2"/>
    
    <!-- Text overlay -->
    <text x="400" y="580" font-family="system-ui, sans-serif" font-size="16" fill="#888" text-anchor="middle" letter-spacing="2">One small step for cat, one giant leap for mewkind</text>
  </svg>
  
  <div class="caption">Interactive SVG Animation • Responsive Design</div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const svg = document.querySelector('svg');
    const starsGroup = document.getElementById('stars');
    const astronautCat = document.getElementById('astronautCat');
    const skateboard = document.getElementById('skateboard');
    const dustGroup = document.getElementById('dustGroup');
    const helmetGroup = document.getElementById('helmetGroup');
    
    // Generate stars
    function createStars() {
      starsGroup.innerHTML = '';
      const starCount = 80;
      for (let i = 0; i < starCount; i++) {
        const x = Math.random() * 800;
        const y = Math.random() * 350;
        const r = Math.random() * 1.5 + 0.5;
        const opacity = Math.random() * 0.8 + 0.2;
        
        const star = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        star.setAttribute('cx', x);
        star.setAttribute('cy', y);
        star.setAttribute('r', r);
        star.setAttribute('fill', '#fff');
        star.setAttribute('opacity', opacity);
        star.setAttribute('filter', 'url(#starGlow)');
        star.setAttribute('data-ty', y);
        star.setAttribute('data-baseOpacity', opacity);
        starsGroup.appendChild(star);
      }
    }
    
    createStars();
    
    // Animation variables
    let time = 0;
    let speed = 1;
    let boardX = 320;
    let boardY = 420;
    let catX = 320;
    let catY = 400;
    let bounceOffset = 0;
    let leanAngle = 0;
    let dustOffset = 0;
    
    // Animation loop
    function animate() {
      time += 0.05 * speed;
      
      // Parallax star movement
      const stars = starsGroup.children;
      for (let i = 0; i < stars.length; i++) {
        const star = stars[i];
        const baseY = parseFloat(star.getAttribute('data-ty'));
        const baseOpacity = parseFloat(star.getAttribute('data-baseOpacity'));
        const move = (time * 0.3) % 800;
        
        // Twinkle effect
        const twinkle = Math.sin(time * 2 + i) * 0.3 + 0.7;
        star.setAttribute('opacity', baseOpacity * twinkle);
        
        // Slow drift
        star.setAttribute('cy', baseY + Math.sin(time * 0.5 + i) * 5);
      }
      
      // Skateboard bouncing (simulating riding over uneven moon surface)
      bounceOffset = Math.sin(time * 4) * 4;
      leanAngle = Math.sin(time * 2) * 5;
      
      // Move skateboard
      skateboard.setAttribute('transform', `translate(${boardX + Math.sin(time) * 2}, ${boardY + bounceOffset}) rotate(${leanAngle})`);
      
      // Move astronaut cat with board
      catX = boardX;
      catY = 400 + bounceOffset;
      astronautCat.setAttribute('transform', `translate(${catX}, ${catY}) rotate(${leanAngle})`);
      
      // Dust particles effect
      dustOffset = (dustOffset + 2) % 100;
      const dustElements = dustGroup.children;
      for (let i = 0; i < dustElements.length; i++) {
        const dust = dustElements[i];
        const baseDustOffset = i * 20;
        const currentOffset = (dustOffset + baseDustOffset) % 100;
        const opacity = 0.6 * (1 - currentOffset / 100);
        const xOffset = currentOffset * 0.5;
        
        // Recreate dust path dynamically
        if (i === 0) {
          dust.setAttribute('d', `M${300 - xOffset},430 Q${320 - xOffset},410 ${340 - xOffset},430`);
          dust.setAttribute('stroke-opacity', opacity);
        }
        if (i === 1) {
          dust.setAttribute('d', `M${310 - xOffset},435 Q${330 - xOffset},415 ${350 - xOffset},435`);
          dust.setAttribute('stroke-opacity', opacity);
        }
        if (i === 2) {
          dust.setAttribute('d', `M${320 - xOffset},440 Q${340 - xOffset},420 ${360 - xOffset},440`);
          dust.setAttribute('stroke-opacity', opacity);
        }
      }
      
      // Helmet subtle movement
      const helmetY = -25 + Math.sin(time * 3) * 1;
      helmetGroup.setAttribute('transform', `translate(-7, ${helmetY})`);
      
      requestAnimationFrame(animate);
    }
    
    animate();
    
    // Handle resize for responsiveness
    window.addEventListener('resize', () => {
      // SVG is responsive via viewBox and CSS, no JS needed
    });
  });
</script>
</body>
</html>
Raw response
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background: #0a0a0f;
    color: #fff;
    font-family: system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
  }
  h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #e0e0ff;
    text-shadow: 0 0 15px rgba(150, 150, 255, 0.6);
  }
  .container {
    width: 100%;
    max-width: 900px;
    padding: 1rem;
    box-sizing: border-box;
  }
  svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    background: #050508;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  }
  .caption {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #aaa;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <h1>🐱🚀 Astronaut Cat Skateboarding on the Moon</h1>
  
  <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- Gradient for the moon surface -->
      <linearGradient id="moonGradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#2a2a2a;stop-opacity:1" />
        <stop offset="50%" style="stop-color:#1a1a1a;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#0d0d0d;stop-opacity:1" />
      </linearGradient>
      
      <!-- Helmet visor gradient -->
      <linearGradient id="visorGrad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#00ffff;stop-opacity:0.4" />
        <stop offset="50%" style="stop-color:#0088ff;stop-opacity:0.7" />
        <stop offset="100%" style="stop-color:#000033;stop-opacity:0.9" />
      </linearGradient>
      
      <!-- Astronaut suit gradient -->
      <linearGradient id="suitGrad" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
        <stop offset="40%" style="stop-color:#e0e0e0;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#a0a0a0;stop-opacity:1" />
      </linearGradient>
      
      <!-- Skateboard gradient -->
      <linearGradient id="boardGrad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#ff4757;stop-opacity:1" />
        <stop offset="50%" style="stop-color:#ffa502;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#2ed573;stop-opacity:1" />
      </linearGradient>
      
      <!-- Star filter -->
      <filter id="starGlow">
        <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
        <feMerge>
          <feMergeNode in="coloredBlur"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
      
      <!-- Dust kick filter -->
      <filter id="dustGlow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="3" result="blur"/>
        <feComposite in="SourceGraphic" in2="blur" operator="over"/>
      </filter>
    </defs>
    
    <!-- Background Space -->
    <rect width="800" height="600" fill="#050508"/>
    
    <!-- Stars -->
    <g id="stars">
      <!-- Static stars will be populated by JS -->
    </g>
    
    <!-- Distant planet -->
    <circle cx="650" cy="100" r="40" fill="#4a4a6a" opacity="0.3"/>
    <circle cx="655" cy="95" r="15" fill="#ffffff" opacity="0.6"/>
    
    <!-- Moon Surface -->
    <path d="M0,400 Q200,350 400,400 T800,400 V600 H0 Z" fill="url(#moonGradient)"/>
    
    <!-- Craters -->
    <g fill="#1a1a1a" opacity="0.4">
      <ellipse cx="100" cy="440" rx="30" ry="15"/>
      <ellipse cx="250" cy="470" rx="50" ry="25"/>
      <ellipse cx="550" cy="430" rx="40" ry="20"/>
      <ellipse cx="700" cy="480" rx="35" ry="18"/>
      <ellipse cx="150" cy="520" rx="25" ry="12"/>
      <ellipse cx="620" cy="550" rx="30" ry="15"/>
    </g>
    
    <!-- Crater highlights -->
    <g fill="#3a3a3a" opacity="0.3">
      <path d="M100,440 Q130,440 130,455 Q100,455 100,440 Z"/>
      <path d="M250,470 Q300,470 300,495 Q250,495 250,470 Z"/>
      <path d="M550,430 Q590,430 590,450 Q550,450 550,430 Z"/>
    </g>
    
    <!-- Lunar dust kick (behind board) -->
    <g id="dustGroup" opacity="0.6">
      <path d="M300,430 Q320,410 340,430" fill="none" stroke="#cccccc" stroke-width="4" stroke-linecap="round"/>
      <path d="M310,435 Q330,415 350,435" fill="none" stroke="#cccccc" stroke-width="3" stroke-linecap="round"/>
      <path d="M320,440 Q340,420 360,440" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round"/>
    </g>
    
    <!-- Skateboard -->
    <g id="skateboard" transform="translate(320, 420)">
      <!-- Board deck -->
      <path d="M-90,10 Q0,-20 90,10 L90,20 Q0,30 -90,20 Z" fill="url(#boardGrad)" stroke="#333" stroke-width="2"/>
      
      <!-- Wheels -->
      <circle cx="-70" cy="25" r="10" fill="#2d3436"/>
      <circle cx="70" cy="25" r="10" fill="#2d3436"/>
      <circle cx="-70" cy="25" r="6" fill="#636e72"/>
      <circle cx="70" cy="25" r="6" fill="#636e72"/>
      
      <!-- Trucks -->
      <rect x="-80" y="18" width="160" height="4" fill="#636e72" rx="2"/>
      <rect x="65" y="12" width="8" height="16" fill="#b2bec3"/>
      <rect x="-73" y="12" width="8" height="16" fill="#b2bec3"/>
    </g>
    
    <!-- Astronaut Cat Group -->
    <g id="astronautCat" transform="translate(320, 400)">
      <!-- Backpack / Life support -->
      <path d="M-10,0 Q-20,-10 -20,20 Q-20,40 -10,50 Q0,50 0,0 Z" fill="#b2bec3" stroke="#636e72" stroke-width="2"/>
      <circle cx="-15" cy="25" r="3" fill="#00d2d3"/>
      <rect x="-18" y="5" width="16" height="8" fill="#636e72" rx="2"/>
      
      <!-- Suit body -->
      <path d="M-25,20 Q-30,40 -25,60 Q-25,80 -10,85 Q5,85 10,80 Q15,60 10,40 Q15,20 10,0 Q5,-10 -10,-10 Z" fill="url(#suitGrad)" stroke="#636e72" stroke-width="2"/>
      
      <!-- Suit details -->
      <line x1="-15" y1="30" x2="15" y2="30" stroke="#636e72" stroke-width="2"/>
      <line x1="-15" y1="50" x2="15" y2="50" stroke="#636e72" stroke-width="2"/>
      <circle cx="-12" cy="40" r="2" fill="#00d2d3"/>
      <circle cx="12" cy="40" r="2" fill="#00d2d3"/>
      
      <!-- Arms -->
      <path d="M-25,30 Q-40,35 -45,50" fill="none" stroke="url(#suitGrad)" stroke-width="8" stroke-linecap="round"/>
      <path d="M10,30 Q25,35 30,50" fill="none" stroke="url(#suitGrad)" stroke-width="8" stroke-linecap="round"/>
      <circle cx="-45" cy="50" r="6" fill="#e0e0e0"/>
      <circle cx="30" cy="50" r="6" fill="#e0e0e0"/>
      
      <!-- Gloves -->
      <circle cx="-45" cy="50" r="5" fill="#ccd6f6" stroke="#636e72" stroke-width="1"/>
      <circle cx="30" cy="50" r="5" fill="#ccd6f6" stroke="#636e72" stroke-width="1"/>
      
      <!-- Neck ring -->
      <ellipse cx="-7" cy="0" rx="18" ry="12" fill="#636e72"/>
      
      <!-- Helmet -->
      <g id="helmetGroup">
        <circle cx="-7" cy="-25" r="28" fill="#b2bec3" stroke="#636e72" stroke-width="3"/>
        <circle cx="-7" cy="-25" r="22" fill="url(#visorGrad)" stroke="#00d2d3" stroke-width="2"/>
        <!-- Helmet reflection -->
        <path d="M-20,-30 Q-10,-35 0,-30 Q10,-35 20,-30" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
      </g>
      
      <!-- Cat ears inside helmet -->
      <g transform="translate(-7, -50)">
        <path d="M-8,0 L-14,-12 L-2,0" fill="#ffffff" stroke="#636e72" stroke-width="1"/>
        <path d="M4,0 L10,-12 L14,0" fill="#ffffff" stroke="#636e72" stroke-width="1"/>
        <path d="M-8,0 L-11,-8 L-5,-2" fill="#ff9ff3" opacity="0.6"/>
        <path d="M4,0 L7,-8 L13,-2" fill="#ff9ff3" opacity="0.6"/>
      </g>
      
      <!-- Legs -->
      <path d="M-15,80 Q-20,100 -15,115" fill="none" stroke="url(#suitGrad)" stroke-width="10" stroke-linecap="round"/>
      <path d="M0,80 Q5,100 0,115" fill="none" stroke="url(#suitGrad)" stroke-width="10" stroke-linecap="round"/>
      
      <!-- Boots on board -->
      <ellipse cx="-15" cy="118" rx="8" ry="5" fill="#2d3436" transform="rotate(-15 -15 118)"/>
      <ellipse cx="0" cy="118" rx="8" ry="5" fill="#2d3436" transform="rotate(15 0 118)"/>
    </g>
    
    <!-- Moon surface foreground (craters in front) -->
    <path d="M300,430 Q320,440 340,430" fill="none" stroke="#3a3a3a" stroke-width="2"/>
    <path d="M350,445 Q370,455 390,445" fill="none" stroke="#3a3a3a" stroke-width="2"/>
    
    <!-- Text overlay -->
    <text x="400" y="580" font-family="system-ui, sans-serif" font-size="16" fill="#888" text-anchor="middle" letter-spacing="2">One small step for cat, one giant leap for mewkind</text>
  </svg>
  
  <div class="caption">Interactive SVG Animation • Responsive Design</div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const svg = document.querySelector('svg');
    const starsGroup = document.getElementById('stars');
    const astronautCat = document.getElementById('astronautCat');
    const skateboard = document.getElementById('skateboard');
    const dustGroup = document.getElementById('dustGroup');
    const helmetGroup = document.getElementById('helmetGroup');
    
    // Generate stars
    function createStars() {
      starsGroup.innerHTML = '';
      const starCount = 80;
      for (let i = 0; i < starCount; i++) {
        const x = Math.random() * 800;
        const y = Math.random() * 350;
        const r = Math.random() * 1.5 + 0.5;
        const opacity = Math.random() * 0.8 + 0.2;
        
        const star = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        star.setAttribute('cx', x);
        star.setAttribute('cy', y);
        star.setAttribute('r', r);
        star.setAttribute('fill', '#fff');
        star.setAttribute('opacity', opacity);
        star.setAttribute('filter', 'url(#starGlow)');
        star.setAttribute('data-ty', y);
        star.setAttribute('data-baseOpacity', opacity);
        starsGroup.appendChild(star);
      }
    }
    
    createStars();
    
    // Animation variables
    let time = 0;
    let speed = 1;
    let boardX = 320;
    let boardY = 420;
    let catX = 320;
    let catY = 400;
    let bounceOffset = 0;
    let leanAngle = 0;
    let dustOffset = 0;
    
    // Animation loop
    function animate() {
      time += 0.05 * speed;
      
      // Parallax star movement
      const stars = starsGroup.children;
      for (let i = 0; i < stars.length; i++) {
        const star = stars[i];
        const baseY = parseFloat(star.getAttribute('data-ty'));
        const baseOpacity = parseFloat(star.getAttribute('data-baseOpacity'));
        const move = (time * 0.3) % 800;
        
        // Twinkle effect
        const twinkle = Math.sin(time * 2 + i) * 0.3 + 0.7;
        star.setAttribute('opacity', baseOpacity * twinkle);
        
        // Slow drift
        star.setAttribute('cy', baseY + Math.sin(time * 0.5 + i) * 5);
      }
      
      // Skateboard bouncing (simulating riding over uneven moon surface)
      bounceOffset = Math.sin(time * 4) * 4;
      leanAngle = Math.sin(time * 2) * 5;
      
      // Move skateboard
      skateboard.setAttribute('transform', `translate(${boardX + Math.sin(time) * 2}, ${boardY + bounceOffset}) rotate(${leanAngle})`);
      
      // Move astronaut cat with board
      catX = boardX;
      catY = 400 + bounceOffset;
      astronautCat.setAttribute('transform', `translate(${catX}, ${catY}) rotate(${leanAngle})`);
      
      // Dust particles effect
      dustOffset = (dustOffset + 2) % 100;
      const dustElements = dustGroup.children;
      for (let i = 0; i < dustElements.length; i++) {
        const dust = dustElements[i];
        const baseDustOffset = i * 20;
        const currentOffset = (dustOffset + baseDustOffset) % 100;
        const opacity = 0.6 * (1 - currentOffset / 100);
        const xOffset = currentOffset * 0.5;
        
        // Recreate dust path dynamically
        if (i === 0) {
          dust.setAttribute('d', `M${300 - xOffset},430 Q${320 - xOffset},410 ${340 - xOffset},430`);
          dust.setAttribute('stroke-opacity', opacity);
        }
        if (i === 1) {
          dust.setAttribute('d', `M${310 - xOffset},435 Q${330 - xOffset},415 ${350 - xOffset},435`);
          dust.setAttribute('stroke-opacity', opacity);
        }
        if (i === 2) {
          dust.setAttribute('d', `M${320 - xOffset},440 Q${340 - xOffset},420 ${360 - xOffset},440`);
          dust.setAttribute('stroke-opacity', opacity);
        }
      }
      
      // Helmet subtle movement
      const helmetY = -25 + Math.sin(time * 3) * 1;
      helmetGroup.setAttribute('transform', `translate(-7, ${helmetY})`);
      
      requestAnimationFrame(animate);
    }
    
    animate();
    
    // Handle resize for responsiveness
    window.addEventListener('resize', () => {
      // SVG is responsive via viewBox and CSS, no JS needed
    });
  });
</script>
</body>
</html>
```