Skateboarding astronaut catOne-line
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
- 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>
```