Skateboarding astronaut catOne-line
Gemini 3.8 Flash
by GoogleReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 38 s
- Cost
- $0.063
- Output tokens
- 16,700
- Spent thinking
- 0 tokens
- Speed
- 173.3 tok/s
- Console errors
- 0
- First token after
- 1.1 s
- First visible text after
- 1.1 s
- Prompt tokens
- 353
- Code size
- 35.9 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-3.8-flash- Reasoning sent
{"effort":"low"}- Max output
- 65,536 tokens
- Generated
- Nov 12, 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 · 667 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>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #060713;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.container {
width: 100vw;
height: 100vh;
max-width: 1280px;
max-height: 800px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
svg {
width: 100%;
height: 100%;
max-height: 100vh;
box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%">
<defs>
<!-- Background Space Gradients -->
<radialGradient id="spaceGlow" cx="50%" cy="30%" r="75%">
<stop offset="0%" stop-color="#181336" />
<stop offset="45%" stop-color="#0d0a21" />
<stop offset="100%" stop-color="#04020a" />
</radialGradient>
<!-- Nebula Glows -->
<radialGradient id="nebulaPink" cx="20%" cy="25%" r="40%">
<stop offset="0%" stop-color="#ff2a8d" stop-opacity="0.25" />
<stop offset="60%" stop-color="#9b11e0" stop-opacity="0.08" />
<stop offset="100%" stop-color="#000" stop-opacity="0" />
</radialGradient>
<radialGradient id="nebulaCyan" cx="80%" cy="35%" r="45%">
<stop offset="0%" stop-color="#00f0ff" stop-opacity="0.22" />
<stop offset="50%" stop-color="#0051ff" stop-opacity="0.06" />
<stop offset="100%" stop-color="#000" stop-opacity="0" />
</radialGradient>
<!-- Earth Gradients -->
<radialGradient id="earthGrad" cx="35%" cy="35%" r="65%">
<stop offset="0%" stop-color="#7be5ff" />
<stop offset="25%" stop-color="#1b7fe2" />
<stop offset="70%" stop-color="#0b2b6b" />
<stop offset="100%" stop-color="#020a1c" />
</radialGradient>
<radialGradient id="earthAtmo" cx="50%" cy="50%" r="50%">
<stop offset="80%" stop-color="#00e1ff" stop-opacity="0" />
<stop offset="95%" stop-color="#4de8ff" stop-opacity="0.5" />
<stop offset="100%" stop-color="#a8f5ff" stop-opacity="0.9" />
</radialGradient>
<!-- Moon Gradients -->
<linearGradient id="moonGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#e2e8f0" />
<stop offset="20%" stop-color="#cbd5e1" />
<stop offset="50%" stop-color="#94a3b8" />
<stop offset="85%" stop-color="#475569" />
<stop offset="100%" stop-color="#1e293b" />
</linearGradient>
<radialGradient id="craterDark" cx="40%" cy="40%" r="60%">
<stop offset="0%" stop-color="#334155" />
<stop offset="70%" stop-color="#1e293b" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<radialGradient id="craterShallow" cx="35%" cy="35%" r="60%">
<stop offset="0%" stop-color="#64748b" />
<stop offset="80%" stop-color="#475569" />
<stop offset="100%" stop-color="#334155" />
</radialGradient>
<!-- Suit & Helmet Gradients -->
<linearGradient id="suitWhite" x1="20%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="45%" stop-color="#f1f5f9" />
<stop offset="80%" stop-color="#cbd5e1" />
<stop offset="100%" stop-color="#94a3b8" />
</linearGradient>
<linearGradient id="suitShadow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#64748b" />
<stop offset="100%" stop-color="#334155" />
</linearGradient>
<linearGradient id="suitOrange" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff7e1d" />
<stop offset="50%" stop-color="#ff521d" />
<stop offset="100%" stop-color="#d93806" />
</linearGradient>
<linearGradient id="suitCyan" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#22d3ee" />
<stop offset="100%" stop-color="#0891b2" />
</linearGradient>
<!-- Golden/Rainbow Iridescent Visor -->
<linearGradient id="visorGrad" x1="15%" y1="10%" x2="85%" y2="90%">
<stop offset="0%" stop-color="#ffd21f" />
<stop offset="25%" stop-color="#ff3b8d" />
<stop offset="55%" stop-color="#9b2cfa" />
<stop offset="80%" stop-color="#18227c" />
<stop offset="100%" stop-color="#081033" />
</linearGradient>
<linearGradient id="visorGleam" x1="0%" y1="0%" x2="100%" y2="80%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
<stop offset="25%" stop-color="#ffffff" stop-opacity="0.2" />
<stop offset="50%" stop-color="#ffffff" stop-opacity="0" />
</linearGradient>
<!-- Skateboard Gradients -->
<linearGradient id="deckGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ec4899" />
<stop offset="30%" stop-color="#8b5cf6" />
<stop offset="70%" stop-color="#3b82f6" />
<stop offset="100%" stop-color="#06b6d4" />
</linearGradient>
<linearGradient id="deckEdge" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#222" />
<stop offset="100%" stop-color="#111" />
</linearGradient>
<radialGradient id="neonWheel" cx="35%" cy="35%" r="60%">
<stop offset="0%" stop-color="#a7f3d0" />
<stop offset="40%" stop-color="#10b981" />
<stop offset="80%" stop-color="#047857" />
<stop offset="100%" stop-color="#064e3b" />
</radialGradient>
<!-- Lighting Filters / Glows -->
<filter id="neonGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="6" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="sunflare" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="12" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- ==================== BACKGROUND ==================== -->
<!-- Deep Space Canvas -->
<rect width="1200" height="800" fill="url(#spaceGlow)" />
<rect width="1200" height="800" fill="url(#nebulaPink)" />
<rect width="1200" height="800" fill="url(#nebulaCyan)" />
<!-- Starfield (Distant small, bright medium, twinkling large) -->
<g id="stars" fill="#fff">
<!-- Small subtle stars -->
<circle cx="80" cy="120" r="1" opacity="0.6" />
<circle cx="140" cy="280" r="1.5" opacity="0.8" />
<circle cx="210" cy="90" r="1" opacity="0.5" />
<circle cx="290" cy="190" r="2" opacity="0.9" />
<circle cx="340" cy="80" r="1" opacity="0.4" />
<circle cx="430" cy="220" r="1.5" opacity="0.7" />
<circle cx="560" cy="70" r="2.5" opacity="0.9" />
<circle cx="680" cy="140" r="1" opacity="0.5" />
<circle cx="730" cy="60" r="1.5" opacity="0.8" />
<circle cx="810" cy="210" r="2" opacity="0.85" />
<circle cx="950" cy="90" r="1" opacity="0.6" />
<circle cx="1020" cy="240" r="1.5" opacity="0.7" />
<circle cx="1110" cy="130" r="2" opacity="0.9" />
<circle cx="1160" cy="300" r="1" opacity="0.5" />
<circle cx="90" cy="400" r="1.5" opacity="0.7" />
<circle cx="1130" cy="450" r="1" opacity="0.6" />
<circle cx="60" cy="220" r="2" opacity="0.8" />
<circle cx="480" cy="160" r="1" opacity="0.5" />
<circle cx="870" cy="120" r="1.5" opacity="0.6" />
<circle cx="1040" cy="70" r="2.5" opacity="0.8" />
<circle cx="20" cy="80" r="1" opacity="0.4" />
<circle cx="610" cy="230" r="1" opacity="0.4" />
<circle cx="390" cy="290" r="1.5" opacity="0.6" />
<!-- Tinted glowing stars -->
<circle cx="180" cy="160" r="2" fill="#7bf0ff" opacity="0.9" />
<circle cx="510" cy="110" r="2" fill="#ffb8eb" opacity="0.9" />
<circle cx="770" cy="170" r="2.5" fill="#ffe17d" opacity="0.9" />
<circle cx="890" cy="260" r="1.5" fill="#7bf0ff" opacity="0.8" />
<!-- 4-Point Star Twinkles -->
<path d="M290,190 Q290,180 290,175 Q290,180 290,190 Q295,190 305,190 Q295,190 290,190 Q290,195 290,205 Q290,195 290,190 Q285,190 275,190 Q285,190 290,190 Z" fill="#ffffff" opacity="0.8"/>
<path d="M770,170 Q770,158 770,150 Q770,158 770,170 Q778,170 790,170 Q778,170 770,170 Q770,178 770,190 Q770,178 770,170 Q762,170 750,170 Q762,170 770,170 Z" fill="#ffeaa7" opacity="0.85"/>
<path d="M1110,130 Q1110,122 1110,115 Q1110,122 1110,130 Q1115,130 1125,130 Q1115,130 1110,130 Q1110,135 1110,145 Q1110,135 1110,130 Q1105,130 1095,130 Q1105,130 1110,130 Z" fill="#a8f5ff" opacity="0.9"/>
</g>
<!-- Distant Planet / Earth with Atmosphere Glow -->
<g id="distant-earth" transform="translate(920, 130)">
<!-- Atmospheric outer bloom -->
<circle cx="70" cy="70" r="82" fill="#38bdf8" opacity="0.15" filter="url(#sunflare)" />
<!-- Main Planet Sphere -->
<circle cx="70" cy="70" r="70" fill="url(#earthGrad)" />
<!-- Earth Continents (Stylized vector swirls) -->
<path d="M45,25 C55,18 70,22 80,30 C90,38 88,52 98,58 C108,64 122,50 128,62 C134,74 125,88 115,92 C105,96 100,110 88,118 C78,124 62,130 52,125 C45,115 50,102 46,92 C42,82 30,80 25,70 C18,58 20,42 32,32 C38,28 40,28 45,25 Z" fill="#22c55e" opacity="0.6" />
<path d="M72,40 C85,38 95,48 90,62 C85,72 72,78 68,90 C62,88 58,78 62,68 C65,58 68,48 72,40 Z" fill="#15803d" opacity="0.7" />
<path d="M100,85 C112,82 120,95 114,105 C108,112 98,110 96,100 C95,92 98,88 100,85 Z" fill="#22c55e" opacity="0.5" />
<!-- Swirling Clouds -->
<path d="M22,55 Q50,45 75,58 T125,65 Q135,70 130,80 Q115,75 90,70 T35,75 Q20,70 22,55 Z" fill="#ffffff" opacity="0.4" />
<path d="M40,95 Q70,82 95,95 T132,102 Q125,112 105,108 T55,105 Q35,110 40,95 Z" fill="#ffffff" opacity="0.35" />
<circle cx="70" cy="70" r="70" fill="url(#earthAtmo)" />
<!-- Shadow side of Earth for 3D sphere look -->
<path d="M70,0 A70,70 0 0,1 140,70 A70,70 0 0,1 70,140 A70,75 0 0,0 70,0 Z" fill="#030712" opacity="0.55" />
</g>
<!-- Distant Constellation/Milkyway particles -->
<g opacity="0.3" stroke="#a5b4fc" stroke-width="0.5" stroke-dasharray="3,6" fill="none">
<polyline points="120,180 180,160 290,190 340,240 430,220" />
<polyline points="680,140 730,60 770,170 810,210" />
</g>
<!-- ==================== MOON SURFACE (LUNAR LANDSCAPE) ==================== -->
<!-- Dynamic, curved moon horizon functioning as a skate halfpipe/bowl -->
<g id="moon-ground">
<!-- Deep Moon Base Horizon -->
<path d="M-50,480 Q250,560 550,520 T1150,460 Q1220,450 1280,440 L1280,850 L-50,850 Z" fill="url(#moonGrad)" />
<!-- Foreground Skate Crater Lip (Smooth curved transition) -->
<path d="M-20,530 C180,520 320,630 620,590 C880,555 1020,490 1250,540 L1250,850 L-20,850 Z" fill="#64748b" opacity="0.6" />
<path d="M-20,580 C220,570 380,680 680,630 C920,590 1060,540 1250,600 L1250,850 L-20,850 Z" fill="#334155" opacity="0.8" />
<path d="M-20,640 C280,630 450,730 750,670 C980,620 1100,600 1250,660 L1250,850 L-20,850 Z" fill="#1e293b" />
<!-- Detailed Moon Craters (Cast realistic ellipse shadows) -->
<!-- Large Crater Left Background -->
<g transform="translate(180, 530) rotate(-8)">
<ellipse cx="60" cy="22" rx="60" ry="22" fill="#475569" />
<ellipse cx="60" cy="24" rx="56" ry="19" fill="url(#craterDark)" />
<ellipse cx="54" cy="26" rx="46" ry="14" fill="#0f172a" />
<path d="M10,22 A54,18 0 0,0 112,24 A58,20 0 0,1 8,22 Z" fill="#94a3b8" opacity="0.7" />
</g>
<!-- Medium Crater Right -->
<g transform="translate(860, 510) rotate(6)">
<ellipse cx="45" cy="16" rx="45" ry="16" fill="#475569" />
<ellipse cx="45" cy="18" rx="42" ry="14" fill="url(#craterDark)" />
<ellipse cx="40" cy="20" rx="34" ry="10" fill="#0f172a" />
<path d="M6,17 A40,13 0 0,0 84,18 A44,15 0 0,1 6,17 Z" fill="#94a3b8" opacity="0.6" />
</g>
<!-- Small Craters scattered along the skate slope -->
<g transform="translate(420, 560) scale(0.65) rotate(-3)">
<ellipse cx="30" cy="10" rx="30" ry="10" fill="#334155" />
<ellipse cx="28" cy="11" rx="26" ry="8" fill="#0f172a" />
<path d="M4,10 A26,8 0 0,0 54,11 A28,9 0 0,1 4,10 Z" fill="#cbd5e1" opacity="0.6" />
</g>
<g transform="translate(680, 580) scale(0.8) rotate(4)">
<ellipse cx="30" cy="10" rx="30" ry="10" fill="#334155" />
<ellipse cx="28" cy="11" rx="26" ry="8" fill="#0f172a" />
<path d="M4,10 A26,8 0 0,0 54,11 A28,9 0 0,1 4,10 Z" fill="#94a3b8" opacity="0.5" />
</g>
<g transform="translate(1040, 590) scale(1) rotate(12)">
<ellipse cx="35" cy="12" rx="35" ry="12" fill="#1e293b" />
<ellipse cx="33" cy="13" rx="30" ry="9" fill="#020617" />
<path d="M5,12 A30,9 0 0,0 62,13 A33,10 0 0,1 5,12 Z" fill="#64748b" opacity="0.5" />
</g>
<!-- Foreground Crater Bottom Left -->
<g transform="translate(120, 690) scale(1.4) rotate(-5)">
<ellipse cx="50" cy="16" rx="50" ry="16" fill="#1e293b" />
<ellipse cx="48" cy="18" rx="45" ry="13" fill="#020617" />
<path d="M5,17 A45,13 0 0,0 92,18 A48,15 0 0,1 5,17 Z" fill="#475569" opacity="0.6" />
</g>
<!-- Apollo Style Lunar Flag planted in the background (Cat-themed!) -->
<g id="cat-flag" transform="translate(260, 430)">
<!-- Flagpole -->
<line x1="0" y1="0" x2="0" y2="110" stroke="#cbd5e1" stroke-width="3" />
<line x1="0" y1="1" x2="65" y2="1" stroke="#cbd5e1" stroke-width="2.5" />
<!-- Gold Finial Sphere -->
<circle cx="0" cy="0" r="3.5" fill="#facc15" />
<!-- Flag Fabric (Slight lunar wave) -->
<path d="M0,2 Q18,-3 35,3 T70,1 Q70,25 70,42 Q52,38 35,44 T0,40 Z" fill="#f43f5e" />
<!-- Fish Bone / Paw Print Icon on flag -->
<path d="M28,21 C28,17 38,17 38,21 C38,25 28,25 28,21 Z" fill="#ffffff" />
<circle cx="27" cy="16" r="2.5" fill="#ffffff" />
<circle cx="33" cy="14" r="2.5" fill="#ffffff" />
<circle cx="39" cy="16" r="2.5" fill="#ffffff" />
<!-- Flag shadow on ground -->
<ellipse cx="15" cy="112" rx="20" ry="4" fill="#0f172a" opacity="0.6" />
</g>
<!-- Moon Dust Spray / Particles kicked up by board -->
<g id="moon-dust" fill="#cbd5e1">
<ellipse cx="380" cy="550" rx="8" ry="4" opacity="0.4" transform="rotate(-15, 380, 550)" />
<ellipse cx="350" cy="535" rx="14" ry="6" opacity="0.3" transform="rotate(-25, 350, 535)" />
<circle cx="320" cy="510" r="3.5" opacity="0.5" />
<circle cx="335" cy="490" r="2" opacity="0.6" />
<circle cx="300" cy="480" r="1.5" opacity="0.4" />
<circle cx="280" cy="520" r="3" opacity="0.3" />
<circle cx="360" cy="470" r="2.5" opacity="0.4" />
<circle cx="410" cy="530" r="2" opacity="0.5" />
<ellipse cx="440" cy="565" rx="25" ry="7" opacity="0.25" transform="rotate(-10, 440, 565)" />
</g>
<!-- Skate Action Shadow cast onto lunar surface -->
<ellipse cx="580" cy="560" rx="140" ry="26" fill="#080c16" opacity="0.65" filter="url(#softGlow)" transform="rotate(-10, 580, 560)" />
</g>
<!-- ==================== SKATEBOARDING ASTRONAUT CAT ==================== -->
<!-- Entire Character Assembly tilted dynamically mid-air / carving a turn -->
<g id="skater-cat" transform="translate(380, 80) rotate(-11 250 350)">
<!-- ========== JETPACK / LIFE SUPPORT BACKPACK ========== -->
<g id="backpack" transform="translate(185, 235)">
<!-- Main Oxygen Tank Frame -->
<rect x="0" y="0" width="75" height="135" rx="20" fill="#94a3b8" stroke="#475569" stroke-width="3" />
<rect x="5" y="5" width="65" height="125" rx="16" fill="url(#suitWhite)" />
<!-- Twin Pressure Cylinders -->
<rect x="12" y="15" width="22" height="95" rx="11" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="2" />
<rect x="40" y="15" width="22" height="95" rx="11" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="2" />
<!-- Cyberpunk Status Gauges & Neon Lights -->
<circle cx="23" cy="30" r="5" fill="#22c55e" filter="url(#softGlow)" />
<circle cx="51" cy="30" r="5" fill="#00f0ff" filter="url(#softGlow)" />
<rect x="16" y="50" width="14" height="40" rx="3" fill="#0284c7" opacity="0.7" />
<rect x="44" y="50" width="14" height="40" rx="3" fill="#0284c7" opacity="0.7" />
<!-- Hazard Stripes Accent Bar -->
<rect x="14" y="102" width="46" height="8" fill="url(#suitOrange)" rx="2" />
<!-- Thruster Nozzle at Base (Puffing cool thruster flame!) -->
<path d="M22,135 L16,148 L32,148 Z" fill="#475569" />
<path d="M52,135 L46,148 L62,148 Z" fill="#475569" />
<!-- Jet Thruster Particle Plume -->
<ellipse cx="24" cy="158" rx="6" ry="12" fill="#38bdf8" opacity="0.8" filter="url(#softGlow)" />
<ellipse cx="24" cy="155" rx="3" ry="7" fill="#ffffff" />
<ellipse cx="54" cy="158" rx="6" ry="12" fill="#38bdf8" opacity="0.8" filter="url(#softGlow)" />
<ellipse cx="54" cy="155" rx="3" ry="7" fill="#ffffff" />
</g>
<!-- Flexible Tail in Articulated Space Suit Sleeve (Flowing behind with cat balance) -->
<g id="suit-tail">
<!-- Tail Shadow/Underlayer -->
<path d="M200,340 C140,350 90,320 60,250 C40,200 70,150 110,140 C125,135 135,145 125,160 C95,170 80,205 95,240 C115,285 150,295 195,305 Z" fill="#64748b" opacity="0.4" />
<!-- Main Segmented White Tail Suit -->
<path d="M205,335 C145,345 95,315 65,245 C45,195 75,145 115,135 C125,132 133,142 124,152 C98,162 82,198 98,235 C118,280 155,290 200,300 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2.5" />
<!-- Ribbed Articulation Joint Rings on Tail -->
<path d="M165,307 Q175,322 170,332" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" fill="none" />
<path d="M125,280 Q138,292 128,307" stroke="#0284c7" stroke-width="4" stroke-linecap="round" fill="none" />
<path d="M92,238 Q108,245 102,262" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" fill="none" />
<path d="M72,192 Q90,195 86,212" stroke="#0284c7" stroke-width="4" stroke-linecap="round" fill="none" />
<!-- Golden Tip Ring / Thruster Node -->
<circle cx="120" cy="142" r="8" fill="#f59e0b" stroke="#d97706" stroke-width="2" />
<circle cx="120" cy="142" r="3.5" fill="#fef08a" />
</g>
<!-- ========== BACK LEG & PAW (Deep Stance on Board) ========== -->
<g id="back-leg" transform="translate(195, 330)">
<!-- Upper Thigh -->
<ellipse cx="40" cy="30" rx="36" ry="24" fill="url(#suitWhite)" transform="rotate(35 40 30)" stroke="#94a3b8" stroke-width="1.5" />
<!-- Lower Leg & Knee Patch -->
<path d="M35,40 L15,100 L45,105 L65,48 Z" fill="url(#suitWhite)" />
<!-- Ribbed Joint Rings -->
<line x1="28" y1="62" x2="52" y2="67" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
<line x1="23" y1="75" x2="47" y2="80" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
<line x1="18" y1="88" x2="42" y2="93" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
<!-- Back Space Boot (Gripping the Kicktail) -->
<g transform="translate(5, 95) rotate(-5)">
<path d="M-8,12 C-8,5 2,0 15,0 L38,3 C48,4 52,12 50,22 L-2,22 C-6,22 -8,18 -8,12 Z" fill="#334155" />
<!-- Cyan Neon Magnetic Sole -->
<rect x="-6" y="20" width="56" height="7" rx="3" fill="#22d3ee" filter="url(#softGlow)" />
<rect x="-4" y="22" width="52" height="3" rx="1.5" fill="#ffffff" />
<!-- Boot Fastener Buckles -->
<rect x="8" y="4" width="8" height="12" rx="2" fill="#cbd5e1" />
<rect x="24" y="5" width="8" height="12" rx="2" fill="#cbd5e1" />
</g>
</g>
<!-- ========== SUIT TORSO (Puffy Astronaut Body) ========== -->
<g id="torso">
<!-- Main Pressure Suit Body -->
<ellipse cx="280" cy="285" rx="72" ry="85" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
<!-- Torso Side Shading for Roundness -->
<path d="M225,250 C215,285 225,325 245,350 C230,320 225,275 235,240 Z" fill="#64748b" opacity="0.3" />
<!-- Blue & Red Mission Chest Straps -->
<path d="M245,215 Q285,250 310,340" stroke="#0284c7" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.9" />
<path d="M315,220 Q280,265 250,345" stroke="#0284c7" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.9" />
<!-- Horizontal Harness Band -->
<path d="M220,290 Q275,310 340,285" stroke="#0369a1" stroke-width="6" fill="none" />
<!-- Chest Control Module (Life Support Console) -->
<rect x="255" y="250" width="50" height="42" rx="7" fill="#334155" stroke="#475569" stroke-width="2" />
<circle cx="270" cy="265" r="5" fill="#ef4444" filter="url(#softGlow)" />
<circle cx="288" cy="265" r="5" fill="#22c55e" filter="url(#softGlow)" />
<!-- Digital Interface / Gauge Meter -->
<rect x="264" y="276" width="32" height="8" rx="2" fill="#0f172a" />
<rect x="266" y="278" width="18" height="4" rx="1" fill="#38bdf8" />
<!-- NASA / Apollo Style Cat Mission Patch on Shoulder -->
<g transform="translate(318, 235) rotate(15) scale(0.85)">
<ellipse cx="16" cy="16" rx="16" ry="14" fill="#1e3a8a" stroke="#ffffff" stroke-width="1.5" />
<circle cx="16" cy="16" r="10" fill="#dc2626" />
<!-- Vector Cat Head Silhouette on patch -->
<polygon points="11,18 13,11 16,14 19,11 21,18" fill="#ffffff" />
<path d="M6,14 Q16,8 26,14" stroke="#facc15" stroke-width="1.5" fill="none" />
</g>
</g>
<!-- ========== FRONT LEG & PAW (Forward Stance, Shock Absorbed) ========== -->
<g id="front-leg" transform="translate(290, 310)">
<!-- Thigh -->
<ellipse cx="35" cy="25" rx="34" ry="22" fill="url(#suitWhite)" transform="rotate(-15 35 25)" stroke="#94a3b8" stroke-width="1.5" />
<!-- Shin -->
<path d="M25,35 L48,110 L80,105 L58,30 Z" fill="url(#suitWhite)" />
<!-- Ribbed Joint Accordion Bands -->
<line x1="33" y1="58" x2="59" y2="52" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
<line x1="38" y1="72" x2="64" y2="66" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
<line x1="43" y1="86" x2="69" y2="80" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
<!-- Front Space Boot (Locked onto front bolts) -->
<g transform="translate(42, 102) rotate(12)">
<path d="M-6,14 C-6,6 4,0 18,0 L42,2 C52,4 56,12 53,24 L-2,24 C-5,24 -6,19 -6,14 Z" fill="#334155" />
<!-- Cyan Glowing Magnetic Grip Sole -->
<rect x="-4" y="21" width="58" height="7" rx="3" fill="#22d3ee" filter="url(#softGlow)" />
<rect x="-2" y="23" width="54" height="3" rx="1.5" fill="#ffffff" />
<!-- Boot Buckles -->
<rect x="12" y="5" width="8" height="12" rx="2" fill="#cbd5e1" />
<rect x="28" y="6" width="8" height="12" rx="2" fill="#cbd5e1" />
</g>
</g>
<!-- ========== BACK ARM (Carving balance, held backwards) ========== -->
<g id="back-arm">
<!-- Upper Arm & Shoulder -->
<path d="M230,240 C185,245 155,210 130,195 C120,188 128,175 140,180 C165,190 190,215 225,222 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
<!-- Glove Cuff Ring -->
<ellipse cx="132" cy="188" rx="8" ry="14" fill="url(#suitOrange)" transform="rotate(-30 132 188)" />
<!-- Spacesuit Padded Cat Glove (4 padded claw fingers spread for balance) -->
<g transform="translate(120, 178) rotate(-25)">
<path d="M-2,6 C-10,2 -18,-4 -15,-12 C-13,-18 -4,-12 2,-6 L12,4 Z" fill="#475569" />
<ellipse cx="-14" cy="-10" rx="4.5" ry="3" fill="#94a3b8" />
<ellipse cx="-8" cy="-15" rx="4.5" ry="3" fill="#94a3b8" />
<ellipse cx="-1" cy="-17" rx="4" ry="3" fill="#94a3b8" />
<ellipse cx="6" cy="-13" rx="4" ry="3" fill="#94a3b8" />
</g>
</g>
<!-- ========== ASTRONAUT CAT HELMET & HEAD ========== -->
<g id="helmet-assembly" transform="translate(295, 150)">
<!-- Oxygen Supply Tubes connected to Helmet Base -->
<path d="M-85,110 C-110,130 -80,180 -55,140" fill="none" stroke="#0284c7" stroke-width="9" stroke-linecap="round" />
<path d="M-85,110 C-110,130 -80,180 -55,140" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round" />
<path d="M-70,125 C-90,145 -65,190 -40,150" fill="none" stroke="#f97316" stroke-width="7" stroke-linecap="round" />
<!-- Helmet Neck Collar Ring (Heavy-duty anodized metal) -->
<ellipse cx="0" cy="70" rx="68" ry="20" fill="#475569" stroke="#334155" stroke-width="2" />
<ellipse cx="0" cy="68" rx="62" ry="16" fill="#94a3b8" />
<ellipse cx="0" cy="66" rx="58" ry="13" fill="#0f172a" />
<rect x="-25" y="66" width="50" height="9" rx="3" fill="url(#suitOrange)" />
<!-- Giant Spherical Fishbowl Helmet Base -->
<circle cx="0" cy="0" r="82" fill="#0f172a" />
<!-- Cat Helmet Outer Shell with Sculpted Cat-Ear Enclosures -->
<!-- Left Ear Pod (Outer Space Helmet Ear) -->
<path d="M-68,-32 C-85,-75 -78,-108 -58,-122 C-38,-135 -24,-112 -18,-72 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
<path d="M-60,-38 C-74,-72 -68,-98 -52,-110 C-38,-120 -28,-102 -24,-70 Z" fill="#64748b" opacity="0.4" />
<!-- Right Ear Pod -->
<path d="M18,-72 C24,-112 38,-135 58,-122 C78,-108 85,-75 68,-32 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
<path d="M24,-70 C28,-102 38,-120 52,-110 C68,-98 74,-72 60,-38 Z" fill="#475569" opacity="0.3" />
<!-- Main Outer White Helmet Contour -->
<circle cx="0" cy="0" r="82" fill="none" stroke="url(#suitWhite)" stroke-width="8" />
<!-- Helmet Interior: Cute Cool Cat Face Visible Behind Visor Glass! -->
<g id="cat-face-inside">
<!-- Fluffy Ginger/Golden Cat Head -->
<ellipse cx="0" cy="8" rx="56" ry="48" fill="#f59e0b" />
<!-- White Fur Cheeks and Muzzle -->
<path d="M-38,20 C-42,38 -15,48 0,44 C15,48 42,38 38,20 C32,6 18,12 0,14 C-18,12 -32,6 -38,20 Z" fill="#ffffff" />
<!-- Cat Inner Ears with Pink Fluff -->
<polygon points="-46,-35 -38,-75 -18,-40" fill="#fb7185" />
<polygon points="46,-35 38,-75 18,-40" fill="#fb7185" />
<path d="M-36,-42 L-33,-62 L-24,-44" stroke="#ffffff" stroke-width="2" fill="none" />
<path d="M36,-42 L33,-62 L24,-44" stroke="#ffffff" stroke-width="2" fill="none" />
<!-- Forehead Tabby Stripes -->
<path d="M0,-24 L0,-10 M-12,-20 L-6,-8 M12,-20 L6,-8" stroke="#b45309" stroke-width="3" stroke-linecap="round" />
<!-- Big Joyful Expressive Anime Cat Eyes -->
<!-- Left Eye (Winking joyfully in zero-G thrill!) -->
<path d="M-32,0 Q-22,-14 -12,-1" stroke="#0f172a" stroke-width="5" stroke-linecap="round" fill="none" />
<path d="M-34,-3 L-38,-8 M-12,-4 L-8,-10" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" />
<!-- Right Eye (Wide, excited, reflecting outer space!) -->
<ellipse cx="22" cy="-2" rx="14" ry="16" fill="#0f172a" />
<ellipse cx="22" cy="-2" rx="12" ry="14" fill="#0284c7" />
<ellipse cx="22" cy="-2" rx="7" ry="12" fill="#082f49" />
<!-- Eye Star/Sparkle Highlights -->
<circle cx="18" cy="-8" r="4.5" fill="#ffffff" />
<circle cx="26" cy="4" r="2" fill="#ffffff" />
<polygon points="24,-4 26,-1 29,-1 27,2 28,5 25,3 23,5 24,2 22,-1" fill="#7dd3fc" />
<!-- Cute Pink Nose & Confident Smile -->
<polygon points="-4,18 4,18 0,23" fill="#f43f5e" />
<path d="M0,23 C-5,28 -12,28 -16,24 M0,23 C5,28 12,28 16,24" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" fill="none" />
<!-- Whiskers poking out -->
<line x1="-22" y1="20" x2="-48" y2="15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
<line x1="-24" y1="25" x2="-46" y2="28" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
<line x1="22" y1="20" x2="48" y2="15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
<line x1="24" y1="25" x2="46" y2="28" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
<!-- Cheerful Kawaii Blush -->
<ellipse cx="-28" cy="14" rx="7" ry="4" fill="#fb7185" opacity="0.6" />
<ellipse cx="28" cy="14" rx="7" ry="4" fill="#fb7185" opacity="0.6" />
<!-- Little Astronaut Headset Mic -->
<path d="M-40,8 Q-35,32 -10,32" stroke="#475569" stroke-width="3" fill="none" stroke-linecap="round" />
<circle cx="-8" cy="32" r="3.5" fill="#22c55e" filter="url(#softGlow)" />
</g>
<!-- Iridescent Gold/Chrome Spherical Visor Overlay (Transparent reflective glass) -->
<circle cx="0" cy="0" r="76" fill="url(#visorGrad)" opacity="0.4" style="mix-blend-mode: screen;" />
<!-- Curved Sun Glare & Cosmic Horizon Reflection on Visor Glass -->
<path d="M-52,-48 C-18,-72 25,-70 54,-42 C40,-56 10,-60 -25,-48 C-42,-40 -48,-32 -52,-48 Z" fill="#ffffff" opacity="0.75" />
<ellipse cx="-35" cy="-25" rx="14" ry="7" fill="#ffffff" opacity="0.5" transform="rotate(-30 -35 -25)" />
<!-- Curved bottom rim reflection of moon & skateboard deck neon -->
<path d="M-48,42 C-20,62 25,60 52,38 C32,48 -5,48 -35,36 C-42,32 -45,36 -48,42 Z" fill="#00f0ff" opacity="0.45" filter="url(#softGlow)" />
</g>
<!-- ========== FRONT ARM (Posed forward in classic skate style) ========== -->
<g id="front-arm">
<!-- Upper Arm & Shoulder Joint -->
<path d="M335,245 C380,250 415,225 440,210 C452,202 445,188 430,192 C400,202 375,220 330,225 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
<!-- Orange Anodized Wrist Cuff Ring -->
<ellipse cx="438" cy="204" rx="8" ry="14" fill="url(#suitOrange)" transform="rotate(25 438 204)" />
<!-- Padded Spacesuit Cat Paw (Making 'Peace' / Cool Skate Gesture) -->
<g transform="translate(444, 196) rotate(18)">
<path d="M0,0 C8,-6 18,-4 22,2 C24,6 20,12 14,14 L2,10 Z" fill="#475569" />
<!-- Padded Glove Finger Segments -->
<rect x="18" y="-6" width="12" height="6" rx="3" fill="#cbd5e1" transform="rotate(-30 18 -6)" />
<rect x="20" y="2" width="14" height="6" rx="3" fill="#cbd5e1" transform="rotate(-5 20 2)" />
<rect x="14" y="8" width="11" height="5" rx="2.5" fill="#94a3b8" transform="rotate(15 14 8)" />
<!-- Palm Grip Pad -->
<circle cx="8" cy="4" r="5" fill="#1e293b" />
</g>
</g>
<!-- ==================== THE SKATEBOARD (CYBERPUNK MOON CRUISER) ==================== -->
<g id="skateboard" transform="translate(140, 440) rotate(8)">
<!-- Board Top Grip Tape (Perforated space-grip texture with laser pattern) -->
<!-- Skateboard Deck Side Edge Profile -->
<path d="M-25,12 C20,10 70,22 170,22 C270,22 330,10 375,-8 L378,2 C330,20 270,32 170,32 C70,32 20,20 -22,22 Z" fill="url(#deckEdge)" />
<!-- Deck Main Graphic Bottom / Face -->
<path d="M-28,8 C20,6 70,18 170,18 C270,18 330,6 380,-12 C384,-8 382,2 374,6 C328,24 268,36 170,36 C72,36 22,24 -24,18 C-30,14 -32,10 -28,8 Z" fill="url(#deckGrad)" stroke="#ec4899" stroke-width="1.5" />
<!-- Skateboard Top Deck Surface (Where paws stand) -->
<path d="M-25,6 C20,4 70,16 170,16 C270,16 330,4 375,-14 C365,-18 340,-12 280,-4 C190,8 120,4 -10,-8 C-20,-6 -25,0 -25,6 Z" fill="#18181b" />
<!-- Griptape Laser Grid / Graphic Accent Lines (Synthwave styling) -->
<path d="M30,7 L70,14 M120,15 L180,15 M220,14 L270,8 M310,2 L340,-5" stroke="#00f0ff" stroke-width="2" stroke-linecap="round" opacity="0.8" />
<!-- Iconic Neon Cat Paw Logo on center of deck grip -->
<ellipse cx="170" cy="14" rx="8" ry="5" fill="#ff2a8d" filter="url(#softGlow)" />
<circle cx="163" cy="7" r="2" fill="#ff2a8d" />
<circle cx="168" cy="5" r="2.2" fill="#ff2a8d" />
<circle cx="174" cy="6" r="2.2" fill="#ff2a8d" />
<circle cx="178" cy="8" r="1.8" fill="#ff2a8d" />
<!-- Underglow Neon Light Tube Beneath Deck -->
<path d="M0,24 C60,26 120,34 180,34 C240,34 300,24 350,12" stroke="#00f0ff" stroke-width="6" fill="none" opacity="0.8" filter="url(#neonGlow)" />
<path d="M0,24 C60,26 120,34 180,34 C240,34 300,24 350,12" stroke="#ffffff" stroke-width="2" fill="none" opacity="0.9" />
<!-- Skateboard Trucks (Polished chrome metal suspension) -->
<!-- Back Truck -->
<g transform="translate(50, 26)">
<polygon points="0,0 24,0 18,16 6,16" fill="#475569" />
<rect x="2" y="14" width="20" height="6" rx="2" fill="#94a3b8" />
<circle cx="12" cy="17" r="3.5" fill="#f59e0b" /> <!-- Kingpin & Bushing -->
<rect x="-8" y="18" width="40" height="4" rx="2" fill="#cbd5e1" /> <!-- Axle -->
</g>
<!-- Front Truck -->
<g transform="translate(280, 20)">
<polygon points="0,0 24,0 18,16 6,16" fill="#475569" />
<rect x="2" y="14" width="20" height="6" rx="2" fill="#94a3b8" />
<circle cx="12" cy="17" r="3.5" fill="#f59e0b" />
<rect x="-8" y="18" width="40" height="4" rx="2" fill="#cbd5e1" />
</g>
<!-- Wheels (High-speed translucent luminous neon green urethane) -->
<!-- Back Wheel Pair -->
<g transform="translate(42, 38)">
<!-- Outer Left Wheel -->
<ellipse cx="0" cy="8" rx="14" ry="18" fill="url(#neonWheel)" filter="url(#softGlow)" />
<ellipse cx="0" cy="8" rx="7" ry="10" fill="#064e3b" />
<!-- Chrome High-Speed ABEC Bearing Core -->
<ellipse cx="0" cy="8" rx="4" ry="5" fill="#f8fafc" />
<!-- Inner Right Wheel (Offset 3D perspective) -->
<ellipse cx="32" cy="14" rx="12" ry="15" fill="url(#neonWheel)" opacity="0.8" />
<ellipse cx="32" cy="14" rx="6" ry="8" fill="#064e3b" />
</g>
<!-- Front Wheel Pair -->
<g transform="translate(272, 32)">
<!-- Outer Left Wheel -->
<ellipse cx="0" cy="8" rx="14" ry="18" fill="url(#neonWheel)" filter="url(#softGlow)" />
<ellipse cx="0" cy="8" rx="7" ry="10" fill="#064e3b" />
<ellipse cx="0" cy="8" rx="4" ry="5" fill="#f8fafc" />
<!-- Inner Right Wheel -->
<ellipse cx="32" cy="14" rx="12" ry="15" fill="url(#neonWheel)" opacity="0.8" />
<ellipse cx="32" cy="14" rx="6" ry="8" fill="#064e3b" />
</g>
<!-- Wheel Speed Blur Sparks (Low gravity kinetic motion!) -->
<line x1="30" y1="52" x2="-10" y2="48" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" opacity="0.7" />
<line x1="260" y1="46" x2="210" y2="44" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" opacity="0.7" />
<line x1="40" y1="42" x2="0" y2="40" stroke="#00f0ff" stroke-width="1.5" stroke-linecap="round" opacity="0.6" />
</g>
</g>
<!-- ==================== FLOATING PROPS & ATMOSPHERE ==================== -->
<!-- Cute Astronaut Accessories in Zero-G (Floating Fish Treat in Bubble) -->
<g transform="translate(860, 360)">
<!-- Liquid bubble -->
<circle cx="0" cy="0" r="28" fill="#38bdf8" opacity="0.2" filter="url(#softGlow)" />
<circle cx="0" cy="0" r="26" fill="none" stroke="#7dd3fc" stroke-width="2" opacity="0.6" />
<ellipse cx="-8" cy="-10" rx="8" ry="4" fill="#ffffff" opacity="0.5" transform="rotate(-30 -8 -10)" />
<!-- Golden Fish Floating Inside -->
<g transform="rotate(15) scale(0.9)">
<path d="M-14,0 C-8,-10 10,-8 16,0 C10,8 -8,10 -14,0 Z" fill="#fb923c" />
<polygon points="14,0 24,-8 22,0 24,8" fill="#f97316" />
<circle cx="-6" cy="-2" r="2" fill="#0f172a" />
<circle cx="-7" cy="-3" r="0.7" fill="#ffffff" />
</g>
</g>
<!-- A small floating crater pebble in low gravity -->
<g transform="translate(240, 480) rotate(45)">
<polygon points="0,0 12,3 18,14 8,20 -2,12" fill="#64748b" />
<polygon points="0,0 12,3 8,10 -2,12" fill="#94a3b8" />
</g>
<g transform="translate(790, 440) rotate(20) scale(0.7)">
<polygon points="0,0 10,2 14,10 6,15 -1,9" fill="#475569" />
<polygon points="0,0 10,2 6,7 -1,9" fill="#64748b" />
</g>
</svg>
</div>
</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>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #060713;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.container {
width: 100vw;
height: 100vh;
max-width: 1280px;
max-height: 800px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
svg {
width: 100%;
height: 100%;
max-height: 100vh;
box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%">
<defs>
<!-- Background Space Gradients -->
<radialGradient id="spaceGlow" cx="50%" cy="30%" r="75%">
<stop offset="0%" stop-color="#181336" />
<stop offset="45%" stop-color="#0d0a21" />
<stop offset="100%" stop-color="#04020a" />
</radialGradient>
<!-- Nebula Glows -->
<radialGradient id="nebulaPink" cx="20%" cy="25%" r="40%">
<stop offset="0%" stop-color="#ff2a8d" stop-opacity="0.25" />
<stop offset="60%" stop-color="#9b11e0" stop-opacity="0.08" />
<stop offset="100%" stop-color="#000" stop-opacity="0" />
</radialGradient>
<radialGradient id="nebulaCyan" cx="80%" cy="35%" r="45%">
<stop offset="0%" stop-color="#00f0ff" stop-opacity="0.22" />
<stop offset="50%" stop-color="#0051ff" stop-opacity="0.06" />
<stop offset="100%" stop-color="#000" stop-opacity="0" />
</radialGradient>
<!-- Earth Gradients -->
<radialGradient id="earthGrad" cx="35%" cy="35%" r="65%">
<stop offset="0%" stop-color="#7be5ff" />
<stop offset="25%" stop-color="#1b7fe2" />
<stop offset="70%" stop-color="#0b2b6b" />
<stop offset="100%" stop-color="#020a1c" />
</radialGradient>
<radialGradient id="earthAtmo" cx="50%" cy="50%" r="50%">
<stop offset="80%" stop-color="#00e1ff" stop-opacity="0" />
<stop offset="95%" stop-color="#4de8ff" stop-opacity="0.5" />
<stop offset="100%" stop-color="#a8f5ff" stop-opacity="0.9" />
</radialGradient>
<!-- Moon Gradients -->
<linearGradient id="moonGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#e2e8f0" />
<stop offset="20%" stop-color="#cbd5e1" />
<stop offset="50%" stop-color="#94a3b8" />
<stop offset="85%" stop-color="#475569" />
<stop offset="100%" stop-color="#1e293b" />
</linearGradient>
<radialGradient id="craterDark" cx="40%" cy="40%" r="60%">
<stop offset="0%" stop-color="#334155" />
<stop offset="70%" stop-color="#1e293b" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<radialGradient id="craterShallow" cx="35%" cy="35%" r="60%">
<stop offset="0%" stop-color="#64748b" />
<stop offset="80%" stop-color="#475569" />
<stop offset="100%" stop-color="#334155" />
</radialGradient>
<!-- Suit & Helmet Gradients -->
<linearGradient id="suitWhite" x1="20%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="45%" stop-color="#f1f5f9" />
<stop offset="80%" stop-color="#cbd5e1" />
<stop offset="100%" stop-color="#94a3b8" />
</linearGradient>
<linearGradient id="suitShadow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#64748b" />
<stop offset="100%" stop-color="#334155" />
</linearGradient>
<linearGradient id="suitOrange" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff7e1d" />
<stop offset="50%" stop-color="#ff521d" />
<stop offset="100%" stop-color="#d93806" />
</linearGradient>
<linearGradient id="suitCyan" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#22d3ee" />
<stop offset="100%" stop-color="#0891b2" />
</linearGradient>
<!-- Golden/Rainbow Iridescent Visor -->
<linearGradient id="visorGrad" x1="15%" y1="10%" x2="85%" y2="90%">
<stop offset="0%" stop-color="#ffd21f" />
<stop offset="25%" stop-color="#ff3b8d" />
<stop offset="55%" stop-color="#9b2cfa" />
<stop offset="80%" stop-color="#18227c" />
<stop offset="100%" stop-color="#081033" />
</linearGradient>
<linearGradient id="visorGleam" x1="0%" y1="0%" x2="100%" y2="80%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
<stop offset="25%" stop-color="#ffffff" stop-opacity="0.2" />
<stop offset="50%" stop-color="#ffffff" stop-opacity="0" />
</linearGradient>
<!-- Skateboard Gradients -->
<linearGradient id="deckGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ec4899" />
<stop offset="30%" stop-color="#8b5cf6" />
<stop offset="70%" stop-color="#3b82f6" />
<stop offset="100%" stop-color="#06b6d4" />
</linearGradient>
<linearGradient id="deckEdge" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#222" />
<stop offset="100%" stop-color="#111" />
</linearGradient>
<radialGradient id="neonWheel" cx="35%" cy="35%" r="60%">
<stop offset="0%" stop-color="#a7f3d0" />
<stop offset="40%" stop-color="#10b981" />
<stop offset="80%" stop-color="#047857" />
<stop offset="100%" stop-color="#064e3b" />
</radialGradient>
<!-- Lighting Filters / Glows -->
<filter id="neonGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="6" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="sunflare" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="12" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- ==================== BACKGROUND ==================== -->
<!-- Deep Space Canvas -->
<rect width="1200" height="800" fill="url(#spaceGlow)" />
<rect width="1200" height="800" fill="url(#nebulaPink)" />
<rect width="1200" height="800" fill="url(#nebulaCyan)" />
<!-- Starfield (Distant small, bright medium, twinkling large) -->
<g id="stars" fill="#fff">
<!-- Small subtle stars -->
<circle cx="80" cy="120" r="1" opacity="0.6" />
<circle cx="140" cy="280" r="1.5" opacity="0.8" />
<circle cx="210" cy="90" r="1" opacity="0.5" />
<circle cx="290" cy="190" r="2" opacity="0.9" />
<circle cx="340" cy="80" r="1" opacity="0.4" />
<circle cx="430" cy="220" r="1.5" opacity="0.7" />
<circle cx="560" cy="70" r="2.5" opacity="0.9" />
<circle cx="680" cy="140" r="1" opacity="0.5" />
<circle cx="730" cy="60" r="1.5" opacity="0.8" />
<circle cx="810" cy="210" r="2" opacity="0.85" />
<circle cx="950" cy="90" r="1" opacity="0.6" />
<circle cx="1020" cy="240" r="1.5" opacity="0.7" />
<circle cx="1110" cy="130" r="2" opacity="0.9" />
<circle cx="1160" cy="300" r="1" opacity="0.5" />
<circle cx="90" cy="400" r="1.5" opacity="0.7" />
<circle cx="1130" cy="450" r="1" opacity="0.6" />
<circle cx="60" cy="220" r="2" opacity="0.8" />
<circle cx="480" cy="160" r="1" opacity="0.5" />
<circle cx="870" cy="120" r="1.5" opacity="0.6" />
<circle cx="1040" cy="70" r="2.5" opacity="0.8" />
<circle cx="20" cy="80" r="1" opacity="0.4" />
<circle cx="610" cy="230" r="1" opacity="0.4" />
<circle cx="390" cy="290" r="1.5" opacity="0.6" />
<!-- Tinted glowing stars -->
<circle cx="180" cy="160" r="2" fill="#7bf0ff" opacity="0.9" />
<circle cx="510" cy="110" r="2" fill="#ffb8eb" opacity="0.9" />
<circle cx="770" cy="170" r="2.5" fill="#ffe17d" opacity="0.9" />
<circle cx="890" cy="260" r="1.5" fill="#7bf0ff" opacity="0.8" />
<!-- 4-Point Star Twinkles -->
<path d="M290,190 Q290,180 290,175 Q290,180 290,190 Q295,190 305,190 Q295,190 290,190 Q290,195 290,205 Q290,195 290,190 Q285,190 275,190 Q285,190 290,190 Z" fill="#ffffff" opacity="0.8"/>
<path d="M770,170 Q770,158 770,150 Q770,158 770,170 Q778,170 790,170 Q778,170 770,170 Q770,178 770,190 Q770,178 770,170 Q762,170 750,170 Q762,170 770,170 Z" fill="#ffeaa7" opacity="0.85"/>
<path d="M1110,130 Q1110,122 1110,115 Q1110,122 1110,130 Q1115,130 1125,130 Q1115,130 1110,130 Q1110,135 1110,145 Q1110,135 1110,130 Q1105,130 1095,130 Q1105,130 1110,130 Z" fill="#a8f5ff" opacity="0.9"/>
</g>
<!-- Distant Planet / Earth with Atmosphere Glow -->
<g id="distant-earth" transform="translate(920, 130)">
<!-- Atmospheric outer bloom -->
<circle cx="70" cy="70" r="82" fill="#38bdf8" opacity="0.15" filter="url(#sunflare)" />
<!-- Main Planet Sphere -->
<circle cx="70" cy="70" r="70" fill="url(#earthGrad)" />
<!-- Earth Continents (Stylized vector swirls) -->
<path d="M45,25 C55,18 70,22 80,30 C90,38 88,52 98,58 C108,64 122,50 128,62 C134,74 125,88 115,92 C105,96 100,110 88,118 C78,124 62,130 52,125 C45,115 50,102 46,92 C42,82 30,80 25,70 C18,58 20,42 32,32 C38,28 40,28 45,25 Z" fill="#22c55e" opacity="0.6" />
<path d="M72,40 C85,38 95,48 90,62 C85,72 72,78 68,90 C62,88 58,78 62,68 C65,58 68,48 72,40 Z" fill="#15803d" opacity="0.7" />
<path d="M100,85 C112,82 120,95 114,105 C108,112 98,110 96,100 C95,92 98,88 100,85 Z" fill="#22c55e" opacity="0.5" />
<!-- Swirling Clouds -->
<path d="M22,55 Q50,45 75,58 T125,65 Q135,70 130,80 Q115,75 90,70 T35,75 Q20,70 22,55 Z" fill="#ffffff" opacity="0.4" />
<path d="M40,95 Q70,82 95,95 T132,102 Q125,112 105,108 T55,105 Q35,110 40,95 Z" fill="#ffffff" opacity="0.35" />
<circle cx="70" cy="70" r="70" fill="url(#earthAtmo)" />
<!-- Shadow side of Earth for 3D sphere look -->
<path d="M70,0 A70,70 0 0,1 140,70 A70,70 0 0,1 70,140 A70,75 0 0,0 70,0 Z" fill="#030712" opacity="0.55" />
</g>
<!-- Distant Constellation/Milkyway particles -->
<g opacity="0.3" stroke="#a5b4fc" stroke-width="0.5" stroke-dasharray="3,6" fill="none">
<polyline points="120,180 180,160 290,190 340,240 430,220" />
<polyline points="680,140 730,60 770,170 810,210" />
</g>
<!-- ==================== MOON SURFACE (LUNAR LANDSCAPE) ==================== -->
<!-- Dynamic, curved moon horizon functioning as a skate halfpipe/bowl -->
<g id="moon-ground">
<!-- Deep Moon Base Horizon -->
<path d="M-50,480 Q250,560 550,520 T1150,460 Q1220,450 1280,440 L1280,850 L-50,850 Z" fill="url(#moonGrad)" />
<!-- Foreground Skate Crater Lip (Smooth curved transition) -->
<path d="M-20,530 C180,520 320,630 620,590 C880,555 1020,490 1250,540 L1250,850 L-20,850 Z" fill="#64748b" opacity="0.6" />
<path d="M-20,580 C220,570 380,680 680,630 C920,590 1060,540 1250,600 L1250,850 L-20,850 Z" fill="#334155" opacity="0.8" />
<path d="M-20,640 C280,630 450,730 750,670 C980,620 1100,600 1250,660 L1250,850 L-20,850 Z" fill="#1e293b" />
<!-- Detailed Moon Craters (Cast realistic ellipse shadows) -->
<!-- Large Crater Left Background -->
<g transform="translate(180, 530) rotate(-8)">
<ellipse cx="60" cy="22" rx="60" ry="22" fill="#475569" />
<ellipse cx="60" cy="24" rx="56" ry="19" fill="url(#craterDark)" />
<ellipse cx="54" cy="26" rx="46" ry="14" fill="#0f172a" />
<path d="M10,22 A54,18 0 0,0 112,24 A58,20 0 0,1 8,22 Z" fill="#94a3b8" opacity="0.7" />
</g>
<!-- Medium Crater Right -->
<g transform="translate(860, 510) rotate(6)">
<ellipse cx="45" cy="16" rx="45" ry="16" fill="#475569" />
<ellipse cx="45" cy="18" rx="42" ry="14" fill="url(#craterDark)" />
<ellipse cx="40" cy="20" rx="34" ry="10" fill="#0f172a" />
<path d="M6,17 A40,13 0 0,0 84,18 A44,15 0 0,1 6,17 Z" fill="#94a3b8" opacity="0.6" />
</g>
<!-- Small Craters scattered along the skate slope -->
<g transform="translate(420, 560) scale(0.65) rotate(-3)">
<ellipse cx="30" cy="10" rx="30" ry="10" fill="#334155" />
<ellipse cx="28" cy="11" rx="26" ry="8" fill="#0f172a" />
<path d="M4,10 A26,8 0 0,0 54,11 A28,9 0 0,1 4,10 Z" fill="#cbd5e1" opacity="0.6" />
</g>
<g transform="translate(680, 580) scale(0.8) rotate(4)">
<ellipse cx="30" cy="10" rx="30" ry="10" fill="#334155" />
<ellipse cx="28" cy="11" rx="26" ry="8" fill="#0f172a" />
<path d="M4,10 A26,8 0 0,0 54,11 A28,9 0 0,1 4,10 Z" fill="#94a3b8" opacity="0.5" />
</g>
<g transform="translate(1040, 590) scale(1) rotate(12)">
<ellipse cx="35" cy="12" rx="35" ry="12" fill="#1e293b" />
<ellipse cx="33" cy="13" rx="30" ry="9" fill="#020617" />
<path d="M5,12 A30,9 0 0,0 62,13 A33,10 0 0,1 5,12 Z" fill="#64748b" opacity="0.5" />
</g>
<!-- Foreground Crater Bottom Left -->
<g transform="translate(120, 690) scale(1.4) rotate(-5)">
<ellipse cx="50" cy="16" rx="50" ry="16" fill="#1e293b" />
<ellipse cx="48" cy="18" rx="45" ry="13" fill="#020617" />
<path d="M5,17 A45,13 0 0,0 92,18 A48,15 0 0,1 5,17 Z" fill="#475569" opacity="0.6" />
</g>
<!-- Apollo Style Lunar Flag planted in the background (Cat-themed!) -->
<g id="cat-flag" transform="translate(260, 430)">
<!-- Flagpole -->
<line x1="0" y1="0" x2="0" y2="110" stroke="#cbd5e1" stroke-width="3" />
<line x1="0" y1="1" x2="65" y2="1" stroke="#cbd5e1" stroke-width="2.5" />
<!-- Gold Finial Sphere -->
<circle cx="0" cy="0" r="3.5" fill="#facc15" />
<!-- Flag Fabric (Slight lunar wave) -->
<path d="M0,2 Q18,-3 35,3 T70,1 Q70,25 70,42 Q52,38 35,44 T0,40 Z" fill="#f43f5e" />
<!-- Fish Bone / Paw Print Icon on flag -->
<path d="M28,21 C28,17 38,17 38,21 C38,25 28,25 28,21 Z" fill="#ffffff" />
<circle cx="27" cy="16" r="2.5" fill="#ffffff" />
<circle cx="33" cy="14" r="2.5" fill="#ffffff" />
<circle cx="39" cy="16" r="2.5" fill="#ffffff" />
<!-- Flag shadow on ground -->
<ellipse cx="15" cy="112" rx="20" ry="4" fill="#0f172a" opacity="0.6" />
</g>
<!-- Moon Dust Spray / Particles kicked up by board -->
<g id="moon-dust" fill="#cbd5e1">
<ellipse cx="380" cy="550" rx="8" ry="4" opacity="0.4" transform="rotate(-15, 380, 550)" />
<ellipse cx="350" cy="535" rx="14" ry="6" opacity="0.3" transform="rotate(-25, 350, 535)" />
<circle cx="320" cy="510" r="3.5" opacity="0.5" />
<circle cx="335" cy="490" r="2" opacity="0.6" />
<circle cx="300" cy="480" r="1.5" opacity="0.4" />
<circle cx="280" cy="520" r="3" opacity="0.3" />
<circle cx="360" cy="470" r="2.5" opacity="0.4" />
<circle cx="410" cy="530" r="2" opacity="0.5" />
<ellipse cx="440" cy="565" rx="25" ry="7" opacity="0.25" transform="rotate(-10, 440, 565)" />
</g>
<!-- Skate Action Shadow cast onto lunar surface -->
<ellipse cx="580" cy="560" rx="140" ry="26" fill="#080c16" opacity="0.65" filter="url(#softGlow)" transform="rotate(-10, 580, 560)" />
</g>
<!-- ==================== SKATEBOARDING ASTRONAUT CAT ==================== -->
<!-- Entire Character Assembly tilted dynamically mid-air / carving a turn -->
<g id="skater-cat" transform="translate(380, 80) rotate(-11 250 350)">
<!-- ========== JETPACK / LIFE SUPPORT BACKPACK ========== -->
<g id="backpack" transform="translate(185, 235)">
<!-- Main Oxygen Tank Frame -->
<rect x="0" y="0" width="75" height="135" rx="20" fill="#94a3b8" stroke="#475569" stroke-width="3" />
<rect x="5" y="5" width="65" height="125" rx="16" fill="url(#suitWhite)" />
<!-- Twin Pressure Cylinders -->
<rect x="12" y="15" width="22" height="95" rx="11" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="2" />
<rect x="40" y="15" width="22" height="95" rx="11" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="2" />
<!-- Cyberpunk Status Gauges & Neon Lights -->
<circle cx="23" cy="30" r="5" fill="#22c55e" filter="url(#softGlow)" />
<circle cx="51" cy="30" r="5" fill="#00f0ff" filter="url(#softGlow)" />
<rect x="16" y="50" width="14" height="40" rx="3" fill="#0284c7" opacity="0.7" />
<rect x="44" y="50" width="14" height="40" rx="3" fill="#0284c7" opacity="0.7" />
<!-- Hazard Stripes Accent Bar -->
<rect x="14" y="102" width="46" height="8" fill="url(#suitOrange)" rx="2" />
<!-- Thruster Nozzle at Base (Puffing cool thruster flame!) -->
<path d="M22,135 L16,148 L32,148 Z" fill="#475569" />
<path d="M52,135 L46,148 L62,148 Z" fill="#475569" />
<!-- Jet Thruster Particle Plume -->
<ellipse cx="24" cy="158" rx="6" ry="12" fill="#38bdf8" opacity="0.8" filter="url(#softGlow)" />
<ellipse cx="24" cy="155" rx="3" ry="7" fill="#ffffff" />
<ellipse cx="54" cy="158" rx="6" ry="12" fill="#38bdf8" opacity="0.8" filter="url(#softGlow)" />
<ellipse cx="54" cy="155" rx="3" ry="7" fill="#ffffff" />
</g>
<!-- Flexible Tail in Articulated Space Suit Sleeve (Flowing behind with cat balance) -->
<g id="suit-tail">
<!-- Tail Shadow/Underlayer -->
<path d="M200,340 C140,350 90,320 60,250 C40,200 70,150 110,140 C125,135 135,145 125,160 C95,170 80,205 95,240 C115,285 150,295 195,305 Z" fill="#64748b" opacity="0.4" />
<!-- Main Segmented White Tail Suit -->
<path d="M205,335 C145,345 95,315 65,245 C45,195 75,145 115,135 C125,132 133,142 124,152 C98,162 82,198 98,235 C118,280 155,290 200,300 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2.5" />
<!-- Ribbed Articulation Joint Rings on Tail -->
<path d="M165,307 Q175,322 170,332" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" fill="none" />
<path d="M125,280 Q138,292 128,307" stroke="#0284c7" stroke-width="4" stroke-linecap="round" fill="none" />
<path d="M92,238 Q108,245 102,262" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" fill="none" />
<path d="M72,192 Q90,195 86,212" stroke="#0284c7" stroke-width="4" stroke-linecap="round" fill="none" />
<!-- Golden Tip Ring / Thruster Node -->
<circle cx="120" cy="142" r="8" fill="#f59e0b" stroke="#d97706" stroke-width="2" />
<circle cx="120" cy="142" r="3.5" fill="#fef08a" />
</g>
<!-- ========== BACK LEG & PAW (Deep Stance on Board) ========== -->
<g id="back-leg" transform="translate(195, 330)">
<!-- Upper Thigh -->
<ellipse cx="40" cy="30" rx="36" ry="24" fill="url(#suitWhite)" transform="rotate(35 40 30)" stroke="#94a3b8" stroke-width="1.5" />
<!-- Lower Leg & Knee Patch -->
<path d="M35,40 L15,100 L45,105 L65,48 Z" fill="url(#suitWhite)" />
<!-- Ribbed Joint Rings -->
<line x1="28" y1="62" x2="52" y2="67" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
<line x1="23" y1="75" x2="47" y2="80" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
<line x1="18" y1="88" x2="42" y2="93" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
<!-- Back Space Boot (Gripping the Kicktail) -->
<g transform="translate(5, 95) rotate(-5)">
<path d="M-8,12 C-8,5 2,0 15,0 L38,3 C48,4 52,12 50,22 L-2,22 C-6,22 -8,18 -8,12 Z" fill="#334155" />
<!-- Cyan Neon Magnetic Sole -->
<rect x="-6" y="20" width="56" height="7" rx="3" fill="#22d3ee" filter="url(#softGlow)" />
<rect x="-4" y="22" width="52" height="3" rx="1.5" fill="#ffffff" />
<!-- Boot Fastener Buckles -->
<rect x="8" y="4" width="8" height="12" rx="2" fill="#cbd5e1" />
<rect x="24" y="5" width="8" height="12" rx="2" fill="#cbd5e1" />
</g>
</g>
<!-- ========== SUIT TORSO (Puffy Astronaut Body) ========== -->
<g id="torso">
<!-- Main Pressure Suit Body -->
<ellipse cx="280" cy="285" rx="72" ry="85" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
<!-- Torso Side Shading for Roundness -->
<path d="M225,250 C215,285 225,325 245,350 C230,320 225,275 235,240 Z" fill="#64748b" opacity="0.3" />
<!-- Blue & Red Mission Chest Straps -->
<path d="M245,215 Q285,250 310,340" stroke="#0284c7" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.9" />
<path d="M315,220 Q280,265 250,345" stroke="#0284c7" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.9" />
<!-- Horizontal Harness Band -->
<path d="M220,290 Q275,310 340,285" stroke="#0369a1" stroke-width="6" fill="none" />
<!-- Chest Control Module (Life Support Console) -->
<rect x="255" y="250" width="50" height="42" rx="7" fill="#334155" stroke="#475569" stroke-width="2" />
<circle cx="270" cy="265" r="5" fill="#ef4444" filter="url(#softGlow)" />
<circle cx="288" cy="265" r="5" fill="#22c55e" filter="url(#softGlow)" />
<!-- Digital Interface / Gauge Meter -->
<rect x="264" y="276" width="32" height="8" rx="2" fill="#0f172a" />
<rect x="266" y="278" width="18" height="4" rx="1" fill="#38bdf8" />
<!-- NASA / Apollo Style Cat Mission Patch on Shoulder -->
<g transform="translate(318, 235) rotate(15) scale(0.85)">
<ellipse cx="16" cy="16" rx="16" ry="14" fill="#1e3a8a" stroke="#ffffff" stroke-width="1.5" />
<circle cx="16" cy="16" r="10" fill="#dc2626" />
<!-- Vector Cat Head Silhouette on patch -->
<polygon points="11,18 13,11 16,14 19,11 21,18" fill="#ffffff" />
<path d="M6,14 Q16,8 26,14" stroke="#facc15" stroke-width="1.5" fill="none" />
</g>
</g>
<!-- ========== FRONT LEG & PAW (Forward Stance, Shock Absorbed) ========== -->
<g id="front-leg" transform="translate(290, 310)">
<!-- Thigh -->
<ellipse cx="35" cy="25" rx="34" ry="22" fill="url(#suitWhite)" transform="rotate(-15 35 25)" stroke="#94a3b8" stroke-width="1.5" />
<!-- Shin -->
<path d="M25,35 L48,110 L80,105 L58,30 Z" fill="url(#suitWhite)" />
<!-- Ribbed Joint Accordion Bands -->
<line x1="33" y1="58" x2="59" y2="52" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
<line x1="38" y1="72" x2="64" y2="66" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
<line x1="43" y1="86" x2="69" y2="80" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
<!-- Front Space Boot (Locked onto front bolts) -->
<g transform="translate(42, 102) rotate(12)">
<path d="M-6,14 C-6,6 4,0 18,0 L42,2 C52,4 56,12 53,24 L-2,24 C-5,24 -6,19 -6,14 Z" fill="#334155" />
<!-- Cyan Glowing Magnetic Grip Sole -->
<rect x="-4" y="21" width="58" height="7" rx="3" fill="#22d3ee" filter="url(#softGlow)" />
<rect x="-2" y="23" width="54" height="3" rx="1.5" fill="#ffffff" />
<!-- Boot Buckles -->
<rect x="12" y="5" width="8" height="12" rx="2" fill="#cbd5e1" />
<rect x="28" y="6" width="8" height="12" rx="2" fill="#cbd5e1" />
</g>
</g>
<!-- ========== BACK ARM (Carving balance, held backwards) ========== -->
<g id="back-arm">
<!-- Upper Arm & Shoulder -->
<path d="M230,240 C185,245 155,210 130,195 C120,188 128,175 140,180 C165,190 190,215 225,222 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
<!-- Glove Cuff Ring -->
<ellipse cx="132" cy="188" rx="8" ry="14" fill="url(#suitOrange)" transform="rotate(-30 132 188)" />
<!-- Spacesuit Padded Cat Glove (4 padded claw fingers spread for balance) -->
<g transform="translate(120, 178) rotate(-25)">
<path d="M-2,6 C-10,2 -18,-4 -15,-12 C-13,-18 -4,-12 2,-6 L12,4 Z" fill="#475569" />
<ellipse cx="-14" cy="-10" rx="4.5" ry="3" fill="#94a3b8" />
<ellipse cx="-8" cy="-15" rx="4.5" ry="3" fill="#94a3b8" />
<ellipse cx="-1" cy="-17" rx="4" ry="3" fill="#94a3b8" />
<ellipse cx="6" cy="-13" rx="4" ry="3" fill="#94a3b8" />
</g>
</g>
<!-- ========== ASTRONAUT CAT HELMET & HEAD ========== -->
<g id="helmet-assembly" transform="translate(295, 150)">
<!-- Oxygen Supply Tubes connected to Helmet Base -->
<path d="M-85,110 C-110,130 -80,180 -55,140" fill="none" stroke="#0284c7" stroke-width="9" stroke-linecap="round" />
<path d="M-85,110 C-110,130 -80,180 -55,140" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round" />
<path d="M-70,125 C-90,145 -65,190 -40,150" fill="none" stroke="#f97316" stroke-width="7" stroke-linecap="round" />
<!-- Helmet Neck Collar Ring (Heavy-duty anodized metal) -->
<ellipse cx="0" cy="70" rx="68" ry="20" fill="#475569" stroke="#334155" stroke-width="2" />
<ellipse cx="0" cy="68" rx="62" ry="16" fill="#94a3b8" />
<ellipse cx="0" cy="66" rx="58" ry="13" fill="#0f172a" />
<rect x="-25" y="66" width="50" height="9" rx="3" fill="url(#suitOrange)" />
<!-- Giant Spherical Fishbowl Helmet Base -->
<circle cx="0" cy="0" r="82" fill="#0f172a" />
<!-- Cat Helmet Outer Shell with Sculpted Cat-Ear Enclosures -->
<!-- Left Ear Pod (Outer Space Helmet Ear) -->
<path d="M-68,-32 C-85,-75 -78,-108 -58,-122 C-38,-135 -24,-112 -18,-72 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
<path d="M-60,-38 C-74,-72 -68,-98 -52,-110 C-38,-120 -28,-102 -24,-70 Z" fill="#64748b" opacity="0.4" />
<!-- Right Ear Pod -->
<path d="M18,-72 C24,-112 38,-135 58,-122 C78,-108 85,-75 68,-32 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
<path d="M24,-70 C28,-102 38,-120 52,-110 C68,-98 74,-72 60,-38 Z" fill="#475569" opacity="0.3" />
<!-- Main Outer White Helmet Contour -->
<circle cx="0" cy="0" r="82" fill="none" stroke="url(#suitWhite)" stroke-width="8" />
<!-- Helmet Interior: Cute Cool Cat Face Visible Behind Visor Glass! -->
<g id="cat-face-inside">
<!-- Fluffy Ginger/Golden Cat Head -->
<ellipse cx="0" cy="8" rx="56" ry="48" fill="#f59e0b" />
<!-- White Fur Cheeks and Muzzle -->
<path d="M-38,20 C-42,38 -15,48 0,44 C15,48 42,38 38,20 C32,6 18,12 0,14 C-18,12 -32,6 -38,20 Z" fill="#ffffff" />
<!-- Cat Inner Ears with Pink Fluff -->
<polygon points="-46,-35 -38,-75 -18,-40" fill="#fb7185" />
<polygon points="46,-35 38,-75 18,-40" fill="#fb7185" />
<path d="M-36,-42 L-33,-62 L-24,-44" stroke="#ffffff" stroke-width="2" fill="none" />
<path d="M36,-42 L33,-62 L24,-44" stroke="#ffffff" stroke-width="2" fill="none" />
<!-- Forehead Tabby Stripes -->
<path d="M0,-24 L0,-10 M-12,-20 L-6,-8 M12,-20 L6,-8" stroke="#b45309" stroke-width="3" stroke-linecap="round" />
<!-- Big Joyful Expressive Anime Cat Eyes -->
<!-- Left Eye (Winking joyfully in zero-G thrill!) -->
<path d="M-32,0 Q-22,-14 -12,-1" stroke="#0f172a" stroke-width="5" stroke-linecap="round" fill="none" />
<path d="M-34,-3 L-38,-8 M-12,-4 L-8,-10" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" />
<!-- Right Eye (Wide, excited, reflecting outer space!) -->
<ellipse cx="22" cy="-2" rx="14" ry="16" fill="#0f172a" />
<ellipse cx="22" cy="-2" rx="12" ry="14" fill="#0284c7" />
<ellipse cx="22" cy="-2" rx="7" ry="12" fill="#082f49" />
<!-- Eye Star/Sparkle Highlights -->
<circle cx="18" cy="-8" r="4.5" fill="#ffffff" />
<circle cx="26" cy="4" r="2" fill="#ffffff" />
<polygon points="24,-4 26,-1 29,-1 27,2 28,5 25,3 23,5 24,2 22,-1" fill="#7dd3fc" />
<!-- Cute Pink Nose & Confident Smile -->
<polygon points="-4,18 4,18 0,23" fill="#f43f5e" />
<path d="M0,23 C-5,28 -12,28 -16,24 M0,23 C5,28 12,28 16,24" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" fill="none" />
<!-- Whiskers poking out -->
<line x1="-22" y1="20" x2="-48" y2="15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
<line x1="-24" y1="25" x2="-46" y2="28" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
<line x1="22" y1="20" x2="48" y2="15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
<line x1="24" y1="25" x2="46" y2="28" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
<!-- Cheerful Kawaii Blush -->
<ellipse cx="-28" cy="14" rx="7" ry="4" fill="#fb7185" opacity="0.6" />
<ellipse cx="28" cy="14" rx="7" ry="4" fill="#fb7185" opacity="0.6" />
<!-- Little Astronaut Headset Mic -->
<path d="M-40,8 Q-35,32 -10,32" stroke="#475569" stroke-width="3" fill="none" stroke-linecap="round" />
<circle cx="-8" cy="32" r="3.5" fill="#22c55e" filter="url(#softGlow)" />
</g>
<!-- Iridescent Gold/Chrome Spherical Visor Overlay (Transparent reflective glass) -->
<circle cx="0" cy="0" r="76" fill="url(#visorGrad)" opacity="0.4" style="mix-blend-mode: screen;" />
<!-- Curved Sun Glare & Cosmic Horizon Reflection on Visor Glass -->
<path d="M-52,-48 C-18,-72 25,-70 54,-42 C40,-56 10,-60 -25,-48 C-42,-40 -48,-32 -52,-48 Z" fill="#ffffff" opacity="0.75" />
<ellipse cx="-35" cy="-25" rx="14" ry="7" fill="#ffffff" opacity="0.5" transform="rotate(-30 -35 -25)" />
<!-- Curved bottom rim reflection of moon & skateboard deck neon -->
<path d="M-48,42 C-20,62 25,60 52,38 C32,48 -5,48 -35,36 C-42,32 -45,36 -48,42 Z" fill="#00f0ff" opacity="0.45" filter="url(#softGlow)" />
</g>
<!-- ========== FRONT ARM (Posed forward in classic skate style) ========== -->
<g id="front-arm">
<!-- Upper Arm & Shoulder Joint -->
<path d="M335,245 C380,250 415,225 440,210 C452,202 445,188 430,192 C400,202 375,220 330,225 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
<!-- Orange Anodized Wrist Cuff Ring -->
<ellipse cx="438" cy="204" rx="8" ry="14" fill="url(#suitOrange)" transform="rotate(25 438 204)" />
<!-- Padded Spacesuit Cat Paw (Making 'Peace' / Cool Skate Gesture) -->
<g transform="translate(444, 196) rotate(18)">
<path d="M0,0 C8,-6 18,-4 22,2 C24,6 20,12 14,14 L2,10 Z" fill="#475569" />
<!-- Padded Glove Finger Segments -->
<rect x="18" y="-6" width="12" height="6" rx="3" fill="#cbd5e1" transform="rotate(-30 18 -6)" />
<rect x="20" y="2" width="14" height="6" rx="3" fill="#cbd5e1" transform="rotate(-5 20 2)" />
<rect x="14" y="8" width="11" height="5" rx="2.5" fill="#94a3b8" transform="rotate(15 14 8)" />
<!-- Palm Grip Pad -->
<circle cx="8" cy="4" r="5" fill="#1e293b" />
</g>
</g>
<!-- ==================== THE SKATEBOARD (CYBERPUNK MOON CRUISER) ==================== -->
<g id="skateboard" transform="translate(140, 440) rotate(8)">
<!-- Board Top Grip Tape (Perforated space-grip texture with laser pattern) -->
<!-- Skateboard Deck Side Edge Profile -->
<path d="M-25,12 C20,10 70,22 170,22 C270,22 330,10 375,-8 L378,2 C330,20 270,32 170,32 C70,32 20,20 -22,22 Z" fill="url(#deckEdge)" />
<!-- Deck Main Graphic Bottom / Face -->
<path d="M-28,8 C20,6 70,18 170,18 C270,18 330,6 380,-12 C384,-8 382,2 374,6 C328,24 268,36 170,36 C72,36 22,24 -24,18 C-30,14 -32,10 -28,8 Z" fill="url(#deckGrad)" stroke="#ec4899" stroke-width="1.5" />
<!-- Skateboard Top Deck Surface (Where paws stand) -->
<path d="M-25,6 C20,4 70,16 170,16 C270,16 330,4 375,-14 C365,-18 340,-12 280,-4 C190,8 120,4 -10,-8 C-20,-6 -25,0 -25,6 Z" fill="#18181b" />
<!-- Griptape Laser Grid / Graphic Accent Lines (Synthwave styling) -->
<path d="M30,7 L70,14 M120,15 L180,15 M220,14 L270,8 M310,2 L340,-5" stroke="#00f0ff" stroke-width="2" stroke-linecap="round" opacity="0.8" />
<!-- Iconic Neon Cat Paw Logo on center of deck grip -->
<ellipse cx="170" cy="14" rx="8" ry="5" fill="#ff2a8d" filter="url(#softGlow)" />
<circle cx="163" cy="7" r="2" fill="#ff2a8d" />
<circle cx="168" cy="5" r="2.2" fill="#ff2a8d" />
<circle cx="174" cy="6" r="2.2" fill="#ff2a8d" />
<circle cx="178" cy="8" r="1.8" fill="#ff2a8d" />
<!-- Underglow Neon Light Tube Beneath Deck -->
<path d="M0,24 C60,26 120,34 180,34 C240,34 300,24 350,12" stroke="#00f0ff" stroke-width="6" fill="none" opacity="0.8" filter="url(#neonGlow)" />
<path d="M0,24 C60,26 120,34 180,34 C240,34 300,24 350,12" stroke="#ffffff" stroke-width="2" fill="none" opacity="0.9" />
<!-- Skateboard Trucks (Polished chrome metal suspension) -->
<!-- Back Truck -->
<g transform="translate(50, 26)">
<polygon points="0,0 24,0 18,16 6,16" fill="#475569" />
<rect x="2" y="14" width="20" height="6" rx="2" fill="#94a3b8" />
<circle cx="12" cy="17" r="3.5" fill="#f59e0b" /> <!-- Kingpin & Bushing -->
<rect x="-8" y="18" width="40" height="4" rx="2" fill="#cbd5e1" /> <!-- Axle -->
</g>
<!-- Front Truck -->
<g transform="translate(280, 20)">
<polygon points="0,0 24,0 18,16 6,16" fill="#475569" />
<rect x="2" y="14" width="20" height="6" rx="2" fill="#94a3b8" />
<circle cx="12" cy="17" r="3.5" fill="#f59e0b" />
<rect x="-8" y="18" width="40" height="4" rx="2" fill="#cbd5e1" />
</g>
<!-- Wheels (High-speed translucent luminous neon green urethane) -->
<!-- Back Wheel Pair -->
<g transform="translate(42, 38)">
<!-- Outer Left Wheel -->
<ellipse cx="0" cy="8" rx="14" ry="18" fill="url(#neonWheel)" filter="url(#softGlow)" />
<ellipse cx="0" cy="8" rx="7" ry="10" fill="#064e3b" />
<!-- Chrome High-Speed ABEC Bearing Core -->
<ellipse cx="0" cy="8" rx="4" ry="5" fill="#f8fafc" />
<!-- Inner Right Wheel (Offset 3D perspective) -->
<ellipse cx="32" cy="14" rx="12" ry="15" fill="url(#neonWheel)" opacity="0.8" />
<ellipse cx="32" cy="14" rx="6" ry="8" fill="#064e3b" />
</g>
<!-- Front Wheel Pair -->
<g transform="translate(272, 32)">
<!-- Outer Left Wheel -->
<ellipse cx="0" cy="8" rx="14" ry="18" fill="url(#neonWheel)" filter="url(#softGlow)" />
<ellipse cx="0" cy="8" rx="7" ry="10" fill="#064e3b" />
<ellipse cx="0" cy="8" rx="4" ry="5" fill="#f8fafc" />
<!-- Inner Right Wheel -->
<ellipse cx="32" cy="14" rx="12" ry="15" fill="url(#neonWheel)" opacity="0.8" />
<ellipse cx="32" cy="14" rx="6" ry="8" fill="#064e3b" />
</g>
<!-- Wheel Speed Blur Sparks (Low gravity kinetic motion!) -->
<line x1="30" y1="52" x2="-10" y2="48" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" opacity="0.7" />
<line x1="260" y1="46" x2="210" y2="44" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" opacity="0.7" />
<line x1="40" y1="42" x2="0" y2="40" stroke="#00f0ff" stroke-width="1.5" stroke-linecap="round" opacity="0.6" />
</g>
</g>
<!-- ==================== FLOATING PROPS & ATMOSPHERE ==================== -->
<!-- Cute Astronaut Accessories in Zero-G (Floating Fish Treat in Bubble) -->
<g transform="translate(860, 360)">
<!-- Liquid bubble -->
<circle cx="0" cy="0" r="28" fill="#38bdf8" opacity="0.2" filter="url(#softGlow)" />
<circle cx="0" cy="0" r="26" fill="none" stroke="#7dd3fc" stroke-width="2" opacity="0.6" />
<ellipse cx="-8" cy="-10" rx="8" ry="4" fill="#ffffff" opacity="0.5" transform="rotate(-30 -8 -10)" />
<!-- Golden Fish Floating Inside -->
<g transform="rotate(15) scale(0.9)">
<path d="M-14,0 C-8,-10 10,-8 16,0 C10,8 -8,10 -14,0 Z" fill="#fb923c" />
<polygon points="14,0 24,-8 22,0 24,8" fill="#f97316" />
<circle cx="-6" cy="-2" r="2" fill="#0f172a" />
<circle cx="-7" cy="-3" r="0.7" fill="#ffffff" />
</g>
</g>
<!-- A small floating crater pebble in low gravity -->
<g transform="translate(240, 480) rotate(45)">
<polygon points="0,0 12,3 18,14 8,20 -2,12" fill="#64748b" />
<polygon points="0,0 12,3 8,10 -2,12" fill="#94a3b8" />
</g>
<g transform="translate(790, 440) rotate(20) scale(0.7)">
<polygon points="0,0 10,2 14,10 6,15 -1,9" fill="#475569" />
<polygon points="0,0 10,2 6,7 -1,9" fill="#64748b" />
</g>
</svg>
</div>
</body>
</html>
```