Skateboarding astronaut catOne-line
Gemini 4 Argon
by Googlereasoning defaultClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 3 min 5 s
- Cost
- $0.143
- Output tokens
- 14,208
- Spent thinking
- 0 tokens
- Speed
- 78.6 tok/s
- Console errors
- 0
- First token after
- 4.5 s
- First visible text after
- 4.5 s
- Prompt tokens
- 392
- Code size
- 31.0 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-4-argon- Reasoning sent
model default- Max output
- 943,718 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 · 642 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, html {
width: 100%;
height: 100%;
background-color: #050510;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-family: system-ui, -apple-system, sans-serif;
}
svg {
width: 100%;
height: 100%;
max-width: 1280px;
max-height: 800px;
display: block;
box-shadow: 0 0 60px rgba(0, 200, 255, 0.15);
}
/* Animations */
@keyframes float-skater {
0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
50% { transform: translate(4px, -16px) rotate(-1.5deg); }
}
@keyframes shadow-pulse {
0%, 100% { transform: scale(1) rotate(-18deg); opacity: 0.45; }
50% { transform: scale(0.86) rotate(-18deg); opacity: 0.25; }
}
@keyframes wheel-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes flame-flicker {
0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.95; }
50% { transform: scaleX(1.18) scaleY(0.92); opacity: 1; }
}
@keyframes tail-wag {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(7deg); }
}
@keyframes twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
@keyframes earth-float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
.skater-rig {
animation: float-skater 3.4s ease-in-out infinite;
transform-origin: 650px 380px;
}
.moon-shadow {
animation: shadow-pulse 3.4s ease-in-out infinite;
transform-origin: 625px 560px;
}
.wheel-spin {
animation: wheel-spin 0.65s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
.thruster-flame {
animation: flame-flicker 0.14s ease-in-out infinite;
transform-box: fill-box;
transform-origin: right center;
}
.cat-tail {
animation: tail-wag 2.2s ease-in-out infinite;
transform-origin: 550px 400px;
}
.star-twinkle-1 {
animation: twinkle 3s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.star-twinkle-2 {
animation: twinkle 4.2s ease-in-out infinite 1.3s;
transform-box: fill-box;
transform-origin: center;
}
.earth-group {
animation: earth-float 8s ease-in-out infinite;
}
</style>
</head>
<body>
<svg viewBox="0 0 1280 800" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Space Background Gradient -->
<linearGradient id="spaceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#04040c" />
<stop offset="45%" stop-color="#0b0d24" />
<stop offset="80%" stop-color="#181236" />
<stop offset="100%" stop-color="#221642" />
</linearGradient>
<!-- Nebula Gradients -->
<radialGradient id="nebulaPink" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff2a85" stop-opacity="0.22" />
<stop offset="55%" stop-color="#9b1dff" stop-opacity="0.08" />
<stop offset="100%" stop-color="#000000" stop-opacity="0" />
</radialGradient>
<radialGradient id="nebulaCyan" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#00e5ff" stop-opacity="0.18" />
<stop offset="60%" stop-color="#0051ff" stop-opacity="0.05" />
<stop offset="100%" stop-color="#000000" stop-opacity="0" />
</radialGradient>
<!-- Earth Gradients & Clip -->
<linearGradient id="earthOcean" x1="15%" y1="15%" x2="85%" y2="85%">
<stop offset="0%" stop-color="#00d2ff" />
<stop offset="50%" stop-color="#0968e5" />
<stop offset="100%" stop-color="#041b4e" />
</linearGradient>
<radialGradient id="earthAtmo" cx="50%" cy="50%" r="50%">
<stop offset="78%" stop-color="#00d2ff" stop-opacity="0" />
<stop offset="92%" stop-color="#4ae2ff" stop-opacity="0.45" />
<stop offset="100%" stop-color="#00d2ff" stop-opacity="0" />
</radialGradient>
<clipPath id="earthClip">
<circle cx="210" cy="210" r="95" />
</clipPath>
<!-- Saturn Gradients -->
<linearGradient id="saturnBody" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffe299" />
<stop offset="55%" stop-color="#e59852" />
<stop offset="100%" stop-color="#6e352c" />
</linearGradient>
<!-- Moon Surface Gradients -->
<linearGradient id="moonSurface" x1="35%" y1="0%" x2="65%" y2="100%">
<stop offset="0%" stop-color="#d8dce8" />
<stop offset="25%" stop-color="#a8b0c4" />
<stop offset="65%" stop-color="#6c758c" />
<stop offset="100%" stop-color="#3c4254" />
</linearGradient>
<linearGradient id="craterInterior" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#485063" />
<stop offset="40%" stop-color="#5d667d" />
<stop offset="100%" stop-color="#bcc3d4" />
</linearGradient>
<linearGradient id="craterRimShadow" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#2a2f3d" />
<stop offset="100%" stop-color="#586075" />
</linearGradient>
<!-- Suit & Cat Gradients -->
<linearGradient id="suitMain" x1="20%" y1="10%" x2="80%" y2="90%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="60%" stop-color="#e3e8f0" />
<stop offset="100%" stop-color="#abb6c8" />
</linearGradient>
<linearGradient id="suitLimbBack" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#d0d7e2" />
<stop offset="100%" stop-color="#7f8c9f" />
</linearGradient>
<linearGradient id="catFur" x1="20%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#ffb65c" />
<stop offset="55%" stop-color="#f28322" />
<stop offset="100%" stop-color="#b84a08" />
</linearGradient>
<radialGradient id="glassHelmet" cx="35%" cy="28%" r="65%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.55" />
<stop offset="18%" stop-color="#b8f2ff" stop-opacity="0.18" />
<stop offset="65%" stop-color="#00a2ff" stop-opacity="0.06" />
<stop offset="88%" stop-color="#00d8ff" stop-opacity="0.28" />
<stop offset="100%" stop-color="#e0faff" stop-opacity="0.75" />
</radialGradient>
<!-- Skateboard & Flame Gradients -->
<linearGradient id="deckGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff1e74" />
<stop offset="50%" stop-color="#ff7714" />
<stop offset="100%" stop-color="#ffdd00" />
</linearGradient>
<linearGradient id="flameOuter" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="18%" stop-color="#00ffff" />
<stop offset="55%" stop-color="#0066ff" stop-opacity="0.85" />
<stop offset="100%" stop-color="#7a00ff" stop-opacity="0" />
</linearGradient>
<!-- Glow Filter -->
<filter id="neonGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="7" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- ================= 1. DEEP SPACE BACKGROUND ================= -->
<rect width="1280" height="800" fill="url(#spaceGrad)" />
<!-- Cosmic Nebulae -->
<ellipse cx="780" cy="240" rx="520" ry="260" fill="url(#nebulaPink)" transform="rotate(-12 780 240)" />
<ellipse cx="360" cy="360" rx="440" ry="220" fill="url(#nebulaCyan)" transform="rotate(15 360 360)" />
<ellipse cx="1050" cy="140" rx="320" ry="180" fill="url(#nebulaCyan)" />
<!-- Starfield -->
<g fill="#ffffff">
<!-- Tiny Background Stars -->
<circle cx="75" cy="85" r="1.2" opacity="0.5" />
<circle cx="145" cy="340" r="1.5" opacity="0.7" />
<circle cx="290" cy="70" r="1" opacity="0.4" />
<circle cx="380" cy="160" r="1.8" opacity="0.8" />
<circle cx="440" cy="290" r="1.2" opacity="0.6" />
<circle cx="520" cy="60" r="1.5" opacity="0.5" />
<circle cx="670" cy="95" r="2" opacity="0.9" />
<circle cx="740" cy="180" r="1.2" opacity="0.4" />
<circle cx="880" cy="75" r="1.6" opacity="0.7" />
<circle cx="950" cy="240" r="1.2" opacity="0.6" />
<circle cx="1140" cy="80" r="1.8" opacity="0.8" />
<circle cx="1210" cy="220" r="1.4" opacity="0.5" />
<circle cx="1190" cy="380" r="1.2" opacity="0.7" />
<circle cx="60" cy="440" r="1.5" opacity="0.6" />
<circle cx="590" cy="230" r="1.3" opacity="0.5" />
<circle cx="840" cy="330" r="1.4" opacity="0.7" />
<!-- Glowing Sparkle Stars -->
<g class="star-twinkle-1">
<path d="M 480,110 Q 480,124 494,124 Q 480,124 480,138 Q 480,124 466,124 Q 480,124 480,110 Z" fill="#ffffff" />
<circle cx="480" cy="124" r="3" fill="#b8f2ff" filter="url(#neonGlow)" />
<path d="M 920,105 Q 920,115 930,115 Q 920,115 920,125 Q 920,115 910,115 Q 920,115 920,105 Z" fill="#ffffff" />
<circle cx="340" cy="240" r="2.5" fill="#ffd4ec" />
<circle cx="1090" cy="300" r="2.5" fill="#b8f2ff" />
</g>
<g class="star-twinkle-2">
<path d="M 810,45 Q 810,57 822,57 Q 810,57 810,69 Q 810,57 798,57 Q 810,57 810,45 Z" fill="#ffffff" />
<path d="M 110,135 Q 110,144 119,144 Q 110,144 110,153 Q 110,144 101,144 Q 110,144 110,135 Z" fill="#b8f2ff" />
<path d="M 1220,115 Q 1220,124 1229,124 Q 1220,124 1220,133 Q 1220,124 1211,124 Q 1220,124 1220,115 Z" fill="#ffd4ec" />
<circle cx="620" cy="145" r="2.5" fill="#ffffff" />
</g>
</g>
<!-- Shooting Star / Comet -->
<g opacity="0.85" transform="rotate(-22 860 140)">
<path d="M 860,140 L 1010,140" stroke="url(#flameOuter)" stroke-width="3" stroke-linecap="round" />
<circle cx="860" cy="140" r="3" fill="#ffffff" filter="url(#neonGlow)" />
</g>
<!-- ================= 2. PLANETS (EARTH & SATURN) ================= -->
<!-- Earth in the Distance -->
<g class="earth-group">
<circle cx="210" cy="210" r="112" fill="url(#earthAtmo)" />
<g clip-path="url(#earthClip)">
<circle cx="210" cy="210" r="95" fill="url(#earthOcean)" />
<!-- Continents -->
<path d="M 140,145 Q 185,135 205,165 Q 230,195 205,230 Q 175,255 150,235 Q 125,215 140,145 Z" fill="#2ee682" opacity="0.85" />
<path d="M 245,195 Q 275,180 295,215 Q 315,255 275,295 Q 235,305 225,270 Q 215,235 245,195 Z" fill="#26c46f" opacity="0.85" />
<path d="M 180,105 Q 225,115 245,135 Q 270,125 255,100 Z" fill="#52f29c" opacity="0.8" />
<!-- Swirly Clouds -->
<path d="M 115,175 Q 175,155 235,180 Q 275,195 305,175" fill="none" stroke="#ffffff" stroke-width="9" stroke-linecap="round" opacity="0.55" />
<path d="M 135,245 Q 195,225 255,250" fill="none" stroke="#ffffff" stroke-width="7" stroke-linecap="round" opacity="0.45" />
<path d="M 175,135 Q 215,125 265,145" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" opacity="0.5" />
<!-- Night Crescent Shadow -->
<path d="M 210,105 A 95,95 0 0,1 210,315 A 70,98 0 0,0 210,105 Z" fill="#040617" opacity="0.72" transform="rotate(28 210 210)" />
</g>
<!-- Rim Light -->
<circle cx="210" cy="210" r="95" fill="none" stroke="#70ecff" stroke-width="1.5" opacity="0.5" />
</g>
<!-- Saturn on the Right -->
<g transform="translate(1065, 175) rotate(-24)">
<!-- Back Ring -->
<path d="M -98,0 A 98,26 0 0,1 98,0" fill="none" stroke="#e4b887" stroke-width="12" opacity="0.55" />
<path d="M -116,0 A 116,32 0 0,1 116,0" fill="none" stroke="#b5835a" stroke-width="5" opacity="0.4" />
<!-- Planet Body -->
<circle cx="0" cy="0" r="46" fill="url(#saturnBody)" />
<!-- Planet Shading -->
<path d="M 0,-46 A 46,46 0 0,1 0,46 A 32,46 0 0,0 0,-46 Z" fill="#13091c" opacity="0.55" transform="rotate(15)" />
<!-- Front Ring -->
<path d="M 98,0 A 98,26 0 0,1 -98,0" fill="none" stroke="#f7d6a8" stroke-width="12" opacity="0.9" />
<path d="M 116,0 A 116,32 0 0,1 -116,0" fill="none" stroke="#d49e6a" stroke-width="5" opacity="0.7" />
</g>
<!-- ================= 3. DISTANT LUNAR HILLS & FLAG ================= -->
<path d="M -80,630 Q 170,480 450,555 Q 780,455 1040,565 Q 1190,500 1360,585 L 1360,800 L -80,800 Z" fill="#464d63" />
<!-- Cute Paw-Print Moon Flag on Distant Hill -->
<g transform="translate(275, 455) rotate(-7)">
<line x1="0" y1="0" x2="0" y2="85" stroke="#d8dce8" stroke-width="3.5" stroke-linecap="round" />
<circle cx="0" cy="0" r="4.5" fill="#ff3385" />
<path d="M 2,5 Q 30,0 56,9 Q 82,18 106,10 L 106,52 Q 82,60 56,50 Q 30,41 2,48 Z" fill="#ff2a7a" stroke="#ffffff" stroke-width="2" />
<!-- White Paw Print Emblem -->
<g fill="#ffffff" transform="translate(53, 31) scale(0.85)">
<ellipse cx="0" cy="5" rx="9" ry="7" />
<circle cx="-10" cy="-5" r="3.8" />
<circle cx="-3.5" cy="-10" r="3.8" />
<circle cx="4.5" cy="-10" r="3.8" />
<circle cx="11" cy="-5" r="3.8" />
</g>
</g>
<!-- ================= 4. FOREGROUND MOON & CRATER BOWL ================= -->
<!-- Main Moon Horizon Curve (Sloped Like a Skate Ramp) -->
<path d="M -100,660 Q 320,440 830,525 Q 1120,575 1380,470 L 1380,850 L -100,850 Z" fill="url(#moonSurface)" />
<!-- Bright Rim Highlight Along Moon Horizon -->
<path d="M -100,660 Q 320,440 830,525 Q 1120,575 1380,470" fill="none" stroke="#eef2ff" stroke-width="3" opacity="0.5" />
<!-- Giant Skate-Bowl Crater (Right Foreground) -->
<g transform="translate(970, 650) rotate(-6)">
<!-- Outer Rim Highlight -->
<ellipse cx="0" cy="0" rx="235" ry="78" fill="#d8deeb" opacity="0.55" />
<!-- Crater Bowl Wall -->
<ellipse cx="0" cy="4" rx="215" ry="66" fill="url(#craterInterior)" />
<!-- Deep Lip Shadow -->
<path d="M -215,4 A 215,66 0 0,1 215,4 A 215,52 0 0,0 -215,4 Z" fill="url(#craterRimShadow)" />
<!-- Skate Carve Grind Marks Inside Bowl -->
<path d="M -145,16 Q -30,52 115,8" fill="none" stroke="#eef2ff" stroke-width="2.5" stroke-dasharray="10 8" opacity="0.45" />
<path d="M -110,30 Q 10,56 140,20" fill="none" stroke="#8df5ff" stroke-width="2" stroke-dasharray="6 10" opacity="0.35" />
</g>
<!-- Secondary Craters & Moon Rocks -->
<!-- Left Mid Crater -->
<g transform="translate(185, 675) rotate(-13)">
<ellipse cx="0" cy="0" rx="95" ry="34" fill="#c7cfe0" opacity="0.6" />
<ellipse cx="0" cy="3" rx="84" ry="27" fill="url(#craterInterior)" />
<path d="M -84,3 A 84,27 0 0,1 84,3 A 84,19 0 0,0 -84,3 Z" fill="#3a4154" />
</g>
<!-- Center Low Crater -->
<g transform="translate(525, 725) rotate(-4)">
<ellipse cx="0" cy="0" rx="68" ry="22" fill="#bac2d4" opacity="0.5" />
<ellipse cx="0" cy="2" rx="58" ry="17" fill="url(#craterInterior)" />
<path d="M -58,2 A 58,17 0 0,1 58,2 A 58,11 0 0,0 -58,2 Z" fill="#3a4154" />
</g>
<!-- High Rim Small Crater -->
<g transform="translate(430, 540) rotate(-11)">
<ellipse cx="0" cy="2" rx="38" ry="11" fill="url(#craterInterior)" />
<path d="M -38,2 A 38,11 0 0,1 38,2 A 38,7 0 0,0 -38,2 Z" fill="#434b5e" />
</g>
<!-- Surface Pebbles & Texture -->
<g fill="#535b70" opacity="0.7">
<ellipse cx="330" cy="610" rx="14" ry="6" transform="rotate(-10 330 610)" />
<ellipse cx="352" cy="618" rx="6" ry="3" />
<ellipse cx="680" cy="645" rx="18" ry="7" transform="rotate(6 680 645)" />
<ellipse cx="708" cy="652" rx="8" ry="4" />
<ellipse cx="1190" cy="545" rx="12" ry="5" transform="rotate(-15 1190 545)" />
</g>
<!-- Dynamic Shadow Cast by Cat & Skateboard on the Moon -->
<ellipse class="moon-shadow" cx="625" cy="560" rx="145" ry="24" fill="#232838" />
<!-- Floating Low-Gravity Moon Pebbles Kicked Up -->
<g fill="#9aa3b8">
<circle cx="430" cy="495" r="6" />
<circle cx="385" cy="470" r="4" opacity="0.8" />
<circle cx="465" cy="520" r="4.5" />
<circle cx="775" cy="485" r="5" opacity="0.85" />
<circle cx="820" cy="510" r="3.5" opacity="0.65" />
</g>
<!-- ================= 5. ASTRONAUT CAT SKATEBOARDING ================= -->
<g class="skater-rig">
<!-- Motion Speed Arcs / Cosmic Shred Trails -->
<g opacity="0.75" filter="url(#neonGlow)">
<path d="M 270,565 Q 400,520 515,470" fill="none" stroke="#00f2ff" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="18 14" />
<path d="M 320,595 Q 445,550 565,492" fill="none" stroke="#ff2a85" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="10 16" />
<path d="M 230,525 Q 350,480 465,435" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 18" />
</g>
<!-- Center Skateboard & Cat on Pivot (650, 380) and Tilt for Ollie Jump -->
<g transform="translate(650, 380) rotate(-19) translate(-650, -380)">
<!-- -------- A. ROCKET THRUSTER & SKATEBOARD -------- -->
<!-- Rocket Thruster Flame (Left / Rear of Deck) -->
<g class="thruster-flame">
<path d="M 492,455 C 420,432 340,444 255,460 C 340,480 420,486 492,473 Z" fill="url(#flameOuter)" filter="url(#neonGlow)" />
<path d="M 492,459 C 445,448 395,454 345,462 C 395,471 445,474 492,469 Z" fill="#ffffff" />
<!-- Thruster Sparks -->
<circle cx="320" cy="445" r="3.5" fill="#00ffff" />
<circle cx="280" cy="472" r="2.5" fill="#ff3399" />
<circle cx="375" cy="480" r="3" fill="#ffffff" />
</g>
<!-- Thruster Nozzle Hardware -->
<path d="M 508,452 L 486,446 L 486,478 L 508,470 Z" fill="#3a4154" stroke="#7c879e" stroke-width="2" stroke-linejoin="round" />
<ellipse cx="486" cy="462" rx="4" ry="15" fill="#00ffff" opacity="0.8" />
<!-- Skateboard Trucks (Metallic Brackets) -->
<!-- Rear Truck -->
<path d="M 548,472 L 568,472 L 563,493 L 553,493 Z" fill="#9ba6bd" stroke="#2c3242" stroke-width="2" />
<rect x="543" y="468" width="30" height="6" rx="2" fill="#525b70" />
<!-- Front Truck -->
<path d="M 732,472 L 752,472 L 747,493 L 737,493 Z" fill="#9ba6bd" stroke="#2c3242" stroke-width="2" />
<rect x="727" y="468" width="30" height="6" rx="2" fill="#525b70" />
<!-- Neon Under-Glow Beneath Deck -->
<ellipse cx="650" cy="482" rx="125" ry="12" fill="#00f2ff" opacity="0.38" filter="url(#neonGlow)" />
<!-- Skateboard Deck -->
<!-- Deck Bottom Graphic Layer -->
<path d="M 482,442 Q 505,468 538,468 L 762,468 Q 795,468 818,442 L 823,449 Q 798,478 762,478 L 538,478 Q 502,478 477,449 Z" fill="url(#deckGrad)" stroke="#1e2230" stroke-width="2" />
<!-- Deck Side Rim Stripe -->
<path d="M 480,446 Q 503,473 538,473 L 762,473 Q 797,473 820,446" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.75" />
<!-- Dark Grip Tape Top -->
<path d="M 482,442 Q 505,468 538,468 L 762,468 Q 795,468 818,442 Q 795,459 762,459 L 538,459 Q 505,459 482,442 Z" fill="#232736" stroke="#454d66" stroke-width="1.5" />
<!-- Glowing Neon Wheels -->
<!-- Rear Wheel -->
<g transform="translate(558, 498)">
<circle cx="0" cy="0" r="22" fill="#161924" stroke="#00f2ff" stroke-width="5" filter="url(#neonGlow)" />
<g class="wheel-spin">
<line x1="-15" y1="0" x2="15" y2="0" stroke="#ff2a85" stroke-width="3" />
<line x1="0" y1="-15" x2="0" y2="15" stroke="#ff2a85" stroke-width="3" />
<circle cx="0" cy="0" r="7" fill="#ffffff" />
</g>
<circle cx="0" cy="0" r="3" fill="#161924" />
</g>
<!-- Front Wheel -->
<g transform="translate(742, 498)">
<circle cx="0" cy="0" r="22" fill="#161924" stroke="#00f2ff" stroke-width="5" filter="url(#neonGlow)" />
<g class="wheel-spin">
<line x1="-15" y1="0" x2="15" y2="0" stroke="#ff2a85" stroke-width="3" />
<line x1="0" y1="-15" x2="0" y2="15" stroke="#ff2a85" stroke-width="3" />
<circle cx="0" cy="0" r="7" fill="#ffffff" />
</g>
<circle cx="0" cy="0" r="3" fill="#161924" />
</g>
<!-- -------- B. ASTRONAUT CAT SPACESUIT & BODY -------- -->
<!-- Pressurized Cat Tail in Spacesuit Sleeve -->
<g class="cat-tail">
<path d="M 588,398 C 530,412 478,370 486,322 C 492,286 532,292 528,324 C 524,348 548,372 588,376 Z" fill="url(#suitMain)" stroke="#4e586e" stroke-width="3" stroke-linejoin="round" />
<!-- Glowing Neon Stripes on Tail Tip -->
<path d="M 487,328 Q 505,322 526,330" fill="none" stroke="#ff2a85" stroke-width="5" stroke-linecap="round" />
<path d="M 490,312 Q 508,308 525,317" fill="none" stroke="#00e5ff" stroke-width="4" stroke-linecap="round" />
</g>
<!-- Space Jetpack / Life-Support Backpack -->
<g transform="translate(556, 294) rotate(-8)">
<rect x="0" y="0" width="56" height="92" rx="16" fill="url(#suitLimbBack)" stroke="#475166" stroke-width="3" />
<!-- Side Oxygen Tank Cylinder -->
<rect x="-12" y="14" width="18" height="64" rx="9" fill="#68758f" stroke="#3c4457" stroke-width="2.5" />
<!-- Glowing Status Lights -->
<circle cx="-3" cy="28" r="3.5" fill="#00ff88" filter="url(#neonGlow)" />
<circle cx="-3" cy="40" r="3.5" fill="#00e5ff" filter="url(#neonGlow)" />
<rect x="12" y="18" width="22" height="10" rx="3" fill="#ff2a85" />
</g>
<!-- Back Arm (Right Arm Reaching Forward for Balance) -->
<g>
<path d="M 678,315 Q 735,305 772,265" fill="none" stroke="url(#suitLimbBack)" stroke-width="30" stroke-linecap="round" />
<path d="M 678,315 Q 735,305 772,265" fill="none" stroke="#566178" stroke-width="32" stroke-linecap="round" opacity="0.25" />
<!-- Red Suit Cuff Ring -->
<ellipse cx="762" cy="275" rx="15" ry="7" transform="rotate(42 762 275)" fill="#ff2a85" />
<!-- Space Glove Paw -->
<circle cx="778" cy="258" r="17" fill="#ffffff" stroke="#566178" stroke-width="2.5" />
<circle cx="790" cy="252" r="6" fill="#ffffff" stroke="#566178" stroke-width="2" />
<circle cx="788" cy="264" r="6" fill="#ffffff" stroke="#566178" stroke-width="2" />
<ellipse cx="782" cy="259" rx="6" ry="5" fill="#ff85b3" />
</g>
<!-- Front Leg (Right Leg Planted Forward on Board) -->
<g>
<path d="M 672,392 Q 708,412 714,442" fill="none" stroke="url(#suitLimbBack)" stroke-width="36" stroke-linecap="round" />
<!-- Knee Joint Ridges -->
<path d="M 684,412 Q 704,405 716,415" fill="none" stroke="#64708a" stroke-width="3" />
<!-- Futuristic Magnetic Space Boot (Front) -->
<path d="M 692,435 L 732,435 C 748,435 755,448 755,461 L 688,461 Z" fill="#ffffff" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
<rect x="692" y="432" width="40" height="8" rx="4" fill="#ff2a85" />
<rect x="686" y="456" width="71" height="7" rx="3.5" fill="#00e5ff" />
</g>
<!-- Back Leg (Left Leg Bent & Kicking Tail of Board) -->
<g>
<path d="M 608,395 Q 572,418 576,442" fill="none" stroke="url(#suitMain)" stroke-width="36" stroke-linecap="round" />
<path d="M 564,418 Q 584,412 596,422" fill="none" stroke="#8592ad" stroke-width="3" />
<!-- Futuristic Magnetic Space Boot (Rear) -->
<path d="M 554,435 L 594,435 C 608,435 614,448 614,461 L 548,461 Z" fill="#ffffff" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
<rect x="554" y="432" width="40" height="8" rx="4" fill="#ff2a85" />
<rect x="546" y="456" width="70" height="7" rx="3.5" fill="#00e5ff" />
</g>
<!-- Main Spacesuit Torso -->
<path d="M 594,302 C 578,348 582,412 612,418 L 676,418 C 702,412 706,352 686,302 Z" fill="url(#suitMain)" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
<!-- Suit Ribbing / Seam Lines -->
<path d="M 588,375 Q 642,390 694,375" fill="none" stroke="#a6b2c7" stroke-width="3" />
<path d="M 592,392 Q 642,407 692,392" fill="none" stroke="#a6b2c7" stroke-width="3" />
<!-- Chest Control Pack (Fish-Bone Telemetry Display) -->
<g transform="translate(624, 326) rotate(3)">
<rect x="0" y="0" width="48" height="36" rx="8" fill="#23293a" stroke="#8f9cb5" stroke-width="2.5" />
<!-- Cute Neon Fish Icon on Chest Screen -->
<path d="M 12,18 Q 22,9 32,18 Q 22,27 12,18 Z M 30,18 L 38,12 L 38,24 Z" fill="#00f2ff" />
<circle cx="17" cy="17" r="1.5" fill="#23293a" />
<!-- Indicator Buttons -->
<circle cx="12" cy="30" r="2.2" fill="#ff2a85" />
<circle cx="20" cy="30" r="2.2" fill="#ffdd00" />
<circle cx="28" cy="30" r="2.2" fill="#00ff88" />
</g>
<!-- Front Arm (Left Arm Shredding Backwards) -->
<g>
<path d="M 604,322 Q 554,335 516,300" fill="none" stroke="url(#suitMain)" stroke-width="30" stroke-linecap="round" />
<path d="M 604,322 Q 554,335 516,300" fill="none" stroke="#475166" stroke-width="33" stroke-linecap="round" opacity="0.2" />
<!-- Shoulder Patch (Paw Emblem) -->
<circle cx="585" cy="322" r="11" fill="#ff7714" stroke="#ffffff" stroke-width="1.5" />
<circle cx="585" cy="323" r="4" fill="#ffffff" />
<!-- Red Suit Cuff Ring -->
<ellipse cx="526" cy="308" rx="7" ry="15" transform="rotate(-42 526 308)" fill="#ff2a85" />
<!-- Space Glove Paw -->
<circle cx="510" cy="292" r="17" fill="#ffffff" stroke="#475166" stroke-width="2.5" />
<circle cx="497" cy="284" r="6" fill="#ffffff" stroke="#475166" stroke-width="2" />
<circle cx="496" cy="296" r="6" fill="#ffffff" stroke="#475166" stroke-width="2" />
<circle cx="503" cy="276" r="5.5" fill="#ffffff" stroke="#475166" stroke-width="2" />
<!-- Pink Paw Pad on Glove -->
<ellipse cx="508" cy="292" rx="6" ry="5" fill="#ff85b3" />
</g>
<!-- Metallic Neck Ring -->
<ellipse cx="642" cy="298" rx="54" ry="13" fill="#8895b0" stroke="#3c4457" stroke-width="3" />
<ellipse cx="642" cy="295" rx="48" ry="9" fill="#505b73" />
<circle cx="604" cy="299" r="3" fill="#00f2ff" />
<circle cx="642" cy="304" r="3" fill="#ff2a85" />
<circle cx="680" cy="299" r="3" fill="#00f2ff" />
<!-- -------- C. CAT HEAD & GLASS BUBBLE HELMET -------- -->
<!-- Rear Interior of Helmet -->
<circle cx="648" cy="212" r="92" fill="#182238" opacity="0.45" />
<!-- Ginger Tabby Cat Head -->
<g transform="translate(650, 222) rotate(5)">
<!-- Left Ear -->
<path d="M -56,-34 L -70,-92 C -70,-98 -62,-100 -56,-95 L -14,-58 Z" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" stroke-linejoin="round" />
<path d="M -52,-42 L -62,-82 L -25,-54 Z" fill="#ff8da1" />
<!-- Right Ear -->
<path d="M 18,-56 L 62,-92 C 68,-96 75,-92 73,-85 L 56,-28 Z" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" stroke-linejoin="round" />
<path d="M 26,-52 L 60,-80 L 50,-36 Z" fill="#ff8da1" />
<!-- Fluffy Head Base & Cheeks -->
<ellipse cx="0" cy="0" rx="66" ry="54" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" />
<!-- Cheek Fur Tufts -->
<path d="M -62,4 L -76,-2 L -66,14 L -78,18 L -58,26" fill="url(#catFur)" stroke="#8f3500" stroke-width="2" stroke-linejoin="round" />
<path d="M 62,4 L 76,-2 L 66,14 L 78,18 L 58,26" fill="url(#catFur)" stroke="#8f3500" stroke-width="2" stroke-linejoin="round" />
<!-- Tabby Forehead Stripes -->
<path d="M 0,-52 L 0,-28" stroke="#9e3b00" stroke-width="5" stroke-linecap="round" />
<path d="M -14,-49 L -9,-30" stroke="#9e3b00" stroke-width="4.5" stroke-linecap="round" />
<path d="M 14,-49 L 9,-30" stroke="#9e3b00" stroke-width="4.5" stroke-linecap="round" />
<!-- Cream Muzzle Patch -->
<ellipse cx="4" cy="16" rx="28" ry="20" fill="#fff3e6" />
<!-- Big Expressive Eyes (Looking Forward with Stoked Energy) -->
<!-- Left Eye -->
<g transform="translate(-24, -6)">
<ellipse cx="0" cy="0" rx="15" ry="16" fill="#0d1b2a" />
<ellipse cx="1" cy="0" rx="13" ry="14" fill="#17e88f" />
<ellipse cx="3" cy="0" rx="7" ry="10" fill="#09111c" />
<!-- Starry Eye Catchlights -->
<circle cx="-4" cy="-5" r="4.5" fill="#ffffff" />
<circle cx="5" cy="5" r="2.2" fill="#ffffff" />
</g>
<!-- Right Eye -->
<g transform="translate(28, -6)">
<ellipse cx="0" cy="0" rx="15" ry="16" fill="#0d1b2a" />
<ellipse cx="1" cy="0" rx="13" ry="14" fill="#17e88f" />
<ellipse cx="3" cy="0" rx="7" ry="10" fill="#09111c" />
<!-- Starry Eye Catchlights -->
<circle cx="-4" cy="-5" r="4.5" fill="#ffffff" />
<circle cx="5" cy="5" r="2.2" fill="#ffffff" />
</g>
<!-- Cute Rosy Cheeks -->
<ellipse cx="-42" cy="14" rx="10" ry="6" fill="#ff5c8a" opacity="0.55" />
<ellipse cx="44" cy="14" rx="10" ry="6" fill="#ff5c8a" opacity="0.55" />
<!-- Pink Triangle Nose -->
<path d="M -3,7 L 9,7 L 3,14 Z" fill="#ff4d79" stroke="#8f3500" stroke-width="1.5" stroke-linejoin="round" />
<!-- Happy Excited Cat Mouth (:3 + Open Grin) -->
<path d="M -9,17 Q -3,23 3,15 Q 9,23 15,17" fill="none" stroke="#6e2600" stroke-width="2.8" stroke-linecap="round" />
<path d="M -5,19 Q 3,33 11,19 Z" fill="#d92b5a" stroke="#6e2600" stroke-width="2" stroke-linejoin="round" />
<!-- Little White Fang -->
<path d="M 7,19 L 9,24 L 11,19 Z" fill="#ffffff" />
<!-- Whiskers -->
<g stroke="#fff8f0" stroke-width="2" stroke-linecap="round" opacity="0.9">
<line x1="-48" y1="10" x2="-82" y2="2" />
<line x1="-50" y1="17" x2="-86" y2="17" />
<line x1="-48" y1="24" x2="-80" y2="31" />
<line x1="50" y1="10" x2="84" y2="2" />
<line x1="52" y1="17" x2="88" y2="17" />
<line x1="50" y1="24" x2="82" y2="31" />
</g>
</g>
<!-- Helmet Radio Antenna (Left Top) -->
<g transform="translate(575, 145) rotate(-32)">
<rect x="-5" y="0" width="10" height="14" rx="3" fill="#8895b0" stroke="#3c4457" stroke-width="2" />
<line x1="0" y1="0" x2="0" y2="-34" stroke="#d8dce8" stroke-width="4" stroke-linecap="round" />
<circle cx="0" cy="-36" r="7" fill="#00f2ff" filter="url(#neonGlow)" />
<circle cx="0" cy="-36" r="3.5" fill="#ffffff" />
</g>
<!-- Transparent Space Helmet Bubble -->
<circle cx="648" cy="212" r="92" fill="url(#glassHelmet)" stroke="#b8f2ff" stroke-width="3.5" />
<!-- Glossy Helmet Visor Highlights -->
<path d="M 582,162 A 76,76 0 0,1 692,144" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" opacity="0.65" />
<ellipse cx="578" cy="186" rx="6" ry="13" transform="rotate(-18 578 186)" fill="#ffffff" opacity="0.55" />
<path d="M 605,282 A 78,78 0 0,0 722,245" fill="none" stroke="#00e5ff" stroke-width="4" stroke-linecap="round" opacity="0.45" />
</g>
</g>
<!-- ================= 6. FOREGROUND VIGNETTE & SPARKLES ================= -->
<g fill="#00f2ff" opacity="0.7">
<circle cx="485" cy="390" r="2.5" filter="url(#neonGlow)" />
<circle cx="815" cy="360" r="3" filter="url(#neonGlow)" />
<circle cx="745" cy="255" r="2" />
</g>
</svg>
</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, html {
width: 100%;
height: 100%;
background-color: #050510;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-family: system-ui, -apple-system, sans-serif;
}
svg {
width: 100%;
height: 100%;
max-width: 1280px;
max-height: 800px;
display: block;
box-shadow: 0 0 60px rgba(0, 200, 255, 0.15);
}
/* Animations */
@keyframes float-skater {
0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
50% { transform: translate(4px, -16px) rotate(-1.5deg); }
}
@keyframes shadow-pulse {
0%, 100% { transform: scale(1) rotate(-18deg); opacity: 0.45; }
50% { transform: scale(0.86) rotate(-18deg); opacity: 0.25; }
}
@keyframes wheel-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes flame-flicker {
0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.95; }
50% { transform: scaleX(1.18) scaleY(0.92); opacity: 1; }
}
@keyframes tail-wag {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(7deg); }
}
@keyframes twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
@keyframes earth-float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
.skater-rig {
animation: float-skater 3.4s ease-in-out infinite;
transform-origin: 650px 380px;
}
.moon-shadow {
animation: shadow-pulse 3.4s ease-in-out infinite;
transform-origin: 625px 560px;
}
.wheel-spin {
animation: wheel-spin 0.65s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
.thruster-flame {
animation: flame-flicker 0.14s ease-in-out infinite;
transform-box: fill-box;
transform-origin: right center;
}
.cat-tail {
animation: tail-wag 2.2s ease-in-out infinite;
transform-origin: 550px 400px;
}
.star-twinkle-1 {
animation: twinkle 3s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.star-twinkle-2 {
animation: twinkle 4.2s ease-in-out infinite 1.3s;
transform-box: fill-box;
transform-origin: center;
}
.earth-group {
animation: earth-float 8s ease-in-out infinite;
}
</style>
</head>
<body>
<svg viewBox="0 0 1280 800" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Space Background Gradient -->
<linearGradient id="spaceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#04040c" />
<stop offset="45%" stop-color="#0b0d24" />
<stop offset="80%" stop-color="#181236" />
<stop offset="100%" stop-color="#221642" />
</linearGradient>
<!-- Nebula Gradients -->
<radialGradient id="nebulaPink" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff2a85" stop-opacity="0.22" />
<stop offset="55%" stop-color="#9b1dff" stop-opacity="0.08" />
<stop offset="100%" stop-color="#000000" stop-opacity="0" />
</radialGradient>
<radialGradient id="nebulaCyan" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#00e5ff" stop-opacity="0.18" />
<stop offset="60%" stop-color="#0051ff" stop-opacity="0.05" />
<stop offset="100%" stop-color="#000000" stop-opacity="0" />
</radialGradient>
<!-- Earth Gradients & Clip -->
<linearGradient id="earthOcean" x1="15%" y1="15%" x2="85%" y2="85%">
<stop offset="0%" stop-color="#00d2ff" />
<stop offset="50%" stop-color="#0968e5" />
<stop offset="100%" stop-color="#041b4e" />
</linearGradient>
<radialGradient id="earthAtmo" cx="50%" cy="50%" r="50%">
<stop offset="78%" stop-color="#00d2ff" stop-opacity="0" />
<stop offset="92%" stop-color="#4ae2ff" stop-opacity="0.45" />
<stop offset="100%" stop-color="#00d2ff" stop-opacity="0" />
</radialGradient>
<clipPath id="earthClip">
<circle cx="210" cy="210" r="95" />
</clipPath>
<!-- Saturn Gradients -->
<linearGradient id="saturnBody" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffe299" />
<stop offset="55%" stop-color="#e59852" />
<stop offset="100%" stop-color="#6e352c" />
</linearGradient>
<!-- Moon Surface Gradients -->
<linearGradient id="moonSurface" x1="35%" y1="0%" x2="65%" y2="100%">
<stop offset="0%" stop-color="#d8dce8" />
<stop offset="25%" stop-color="#a8b0c4" />
<stop offset="65%" stop-color="#6c758c" />
<stop offset="100%" stop-color="#3c4254" />
</linearGradient>
<linearGradient id="craterInterior" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#485063" />
<stop offset="40%" stop-color="#5d667d" />
<stop offset="100%" stop-color="#bcc3d4" />
</linearGradient>
<linearGradient id="craterRimShadow" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#2a2f3d" />
<stop offset="100%" stop-color="#586075" />
</linearGradient>
<!-- Suit & Cat Gradients -->
<linearGradient id="suitMain" x1="20%" y1="10%" x2="80%" y2="90%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="60%" stop-color="#e3e8f0" />
<stop offset="100%" stop-color="#abb6c8" />
</linearGradient>
<linearGradient id="suitLimbBack" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#d0d7e2" />
<stop offset="100%" stop-color="#7f8c9f" />
</linearGradient>
<linearGradient id="catFur" x1="20%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#ffb65c" />
<stop offset="55%" stop-color="#f28322" />
<stop offset="100%" stop-color="#b84a08" />
</linearGradient>
<radialGradient id="glassHelmet" cx="35%" cy="28%" r="65%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.55" />
<stop offset="18%" stop-color="#b8f2ff" stop-opacity="0.18" />
<stop offset="65%" stop-color="#00a2ff" stop-opacity="0.06" />
<stop offset="88%" stop-color="#00d8ff" stop-opacity="0.28" />
<stop offset="100%" stop-color="#e0faff" stop-opacity="0.75" />
</radialGradient>
<!-- Skateboard & Flame Gradients -->
<linearGradient id="deckGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff1e74" />
<stop offset="50%" stop-color="#ff7714" />
<stop offset="100%" stop-color="#ffdd00" />
</linearGradient>
<linearGradient id="flameOuter" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="18%" stop-color="#00ffff" />
<stop offset="55%" stop-color="#0066ff" stop-opacity="0.85" />
<stop offset="100%" stop-color="#7a00ff" stop-opacity="0" />
</linearGradient>
<!-- Glow Filter -->
<filter id="neonGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="7" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- ================= 1. DEEP SPACE BACKGROUND ================= -->
<rect width="1280" height="800" fill="url(#spaceGrad)" />
<!-- Cosmic Nebulae -->
<ellipse cx="780" cy="240" rx="520" ry="260" fill="url(#nebulaPink)" transform="rotate(-12 780 240)" />
<ellipse cx="360" cy="360" rx="440" ry="220" fill="url(#nebulaCyan)" transform="rotate(15 360 360)" />
<ellipse cx="1050" cy="140" rx="320" ry="180" fill="url(#nebulaCyan)" />
<!-- Starfield -->
<g fill="#ffffff">
<!-- Tiny Background Stars -->
<circle cx="75" cy="85" r="1.2" opacity="0.5" />
<circle cx="145" cy="340" r="1.5" opacity="0.7" />
<circle cx="290" cy="70" r="1" opacity="0.4" />
<circle cx="380" cy="160" r="1.8" opacity="0.8" />
<circle cx="440" cy="290" r="1.2" opacity="0.6" />
<circle cx="520" cy="60" r="1.5" opacity="0.5" />
<circle cx="670" cy="95" r="2" opacity="0.9" />
<circle cx="740" cy="180" r="1.2" opacity="0.4" />
<circle cx="880" cy="75" r="1.6" opacity="0.7" />
<circle cx="950" cy="240" r="1.2" opacity="0.6" />
<circle cx="1140" cy="80" r="1.8" opacity="0.8" />
<circle cx="1210" cy="220" r="1.4" opacity="0.5" />
<circle cx="1190" cy="380" r="1.2" opacity="0.7" />
<circle cx="60" cy="440" r="1.5" opacity="0.6" />
<circle cx="590" cy="230" r="1.3" opacity="0.5" />
<circle cx="840" cy="330" r="1.4" opacity="0.7" />
<!-- Glowing Sparkle Stars -->
<g class="star-twinkle-1">
<path d="M 480,110 Q 480,124 494,124 Q 480,124 480,138 Q 480,124 466,124 Q 480,124 480,110 Z" fill="#ffffff" />
<circle cx="480" cy="124" r="3" fill="#b8f2ff" filter="url(#neonGlow)" />
<path d="M 920,105 Q 920,115 930,115 Q 920,115 920,125 Q 920,115 910,115 Q 920,115 920,105 Z" fill="#ffffff" />
<circle cx="340" cy="240" r="2.5" fill="#ffd4ec" />
<circle cx="1090" cy="300" r="2.5" fill="#b8f2ff" />
</g>
<g class="star-twinkle-2">
<path d="M 810,45 Q 810,57 822,57 Q 810,57 810,69 Q 810,57 798,57 Q 810,57 810,45 Z" fill="#ffffff" />
<path d="M 110,135 Q 110,144 119,144 Q 110,144 110,153 Q 110,144 101,144 Q 110,144 110,135 Z" fill="#b8f2ff" />
<path d="M 1220,115 Q 1220,124 1229,124 Q 1220,124 1220,133 Q 1220,124 1211,124 Q 1220,124 1220,115 Z" fill="#ffd4ec" />
<circle cx="620" cy="145" r="2.5" fill="#ffffff" />
</g>
</g>
<!-- Shooting Star / Comet -->
<g opacity="0.85" transform="rotate(-22 860 140)">
<path d="M 860,140 L 1010,140" stroke="url(#flameOuter)" stroke-width="3" stroke-linecap="round" />
<circle cx="860" cy="140" r="3" fill="#ffffff" filter="url(#neonGlow)" />
</g>
<!-- ================= 2. PLANETS (EARTH & SATURN) ================= -->
<!-- Earth in the Distance -->
<g class="earth-group">
<circle cx="210" cy="210" r="112" fill="url(#earthAtmo)" />
<g clip-path="url(#earthClip)">
<circle cx="210" cy="210" r="95" fill="url(#earthOcean)" />
<!-- Continents -->
<path d="M 140,145 Q 185,135 205,165 Q 230,195 205,230 Q 175,255 150,235 Q 125,215 140,145 Z" fill="#2ee682" opacity="0.85" />
<path d="M 245,195 Q 275,180 295,215 Q 315,255 275,295 Q 235,305 225,270 Q 215,235 245,195 Z" fill="#26c46f" opacity="0.85" />
<path d="M 180,105 Q 225,115 245,135 Q 270,125 255,100 Z" fill="#52f29c" opacity="0.8" />
<!-- Swirly Clouds -->
<path d="M 115,175 Q 175,155 235,180 Q 275,195 305,175" fill="none" stroke="#ffffff" stroke-width="9" stroke-linecap="round" opacity="0.55" />
<path d="M 135,245 Q 195,225 255,250" fill="none" stroke="#ffffff" stroke-width="7" stroke-linecap="round" opacity="0.45" />
<path d="M 175,135 Q 215,125 265,145" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" opacity="0.5" />
<!-- Night Crescent Shadow -->
<path d="M 210,105 A 95,95 0 0,1 210,315 A 70,98 0 0,0 210,105 Z" fill="#040617" opacity="0.72" transform="rotate(28 210 210)" />
</g>
<!-- Rim Light -->
<circle cx="210" cy="210" r="95" fill="none" stroke="#70ecff" stroke-width="1.5" opacity="0.5" />
</g>
<!-- Saturn on the Right -->
<g transform="translate(1065, 175) rotate(-24)">
<!-- Back Ring -->
<path d="M -98,0 A 98,26 0 0,1 98,0" fill="none" stroke="#e4b887" stroke-width="12" opacity="0.55" />
<path d="M -116,0 A 116,32 0 0,1 116,0" fill="none" stroke="#b5835a" stroke-width="5" opacity="0.4" />
<!-- Planet Body -->
<circle cx="0" cy="0" r="46" fill="url(#saturnBody)" />
<!-- Planet Shading -->
<path d="M 0,-46 A 46,46 0 0,1 0,46 A 32,46 0 0,0 0,-46 Z" fill="#13091c" opacity="0.55" transform="rotate(15)" />
<!-- Front Ring -->
<path d="M 98,0 A 98,26 0 0,1 -98,0" fill="none" stroke="#f7d6a8" stroke-width="12" opacity="0.9" />
<path d="M 116,0 A 116,32 0 0,1 -116,0" fill="none" stroke="#d49e6a" stroke-width="5" opacity="0.7" />
</g>
<!-- ================= 3. DISTANT LUNAR HILLS & FLAG ================= -->
<path d="M -80,630 Q 170,480 450,555 Q 780,455 1040,565 Q 1190,500 1360,585 L 1360,800 L -80,800 Z" fill="#464d63" />
<!-- Cute Paw-Print Moon Flag on Distant Hill -->
<g transform="translate(275, 455) rotate(-7)">
<line x1="0" y1="0" x2="0" y2="85" stroke="#d8dce8" stroke-width="3.5" stroke-linecap="round" />
<circle cx="0" cy="0" r="4.5" fill="#ff3385" />
<path d="M 2,5 Q 30,0 56,9 Q 82,18 106,10 L 106,52 Q 82,60 56,50 Q 30,41 2,48 Z" fill="#ff2a7a" stroke="#ffffff" stroke-width="2" />
<!-- White Paw Print Emblem -->
<g fill="#ffffff" transform="translate(53, 31) scale(0.85)">
<ellipse cx="0" cy="5" rx="9" ry="7" />
<circle cx="-10" cy="-5" r="3.8" />
<circle cx="-3.5" cy="-10" r="3.8" />
<circle cx="4.5" cy="-10" r="3.8" />
<circle cx="11" cy="-5" r="3.8" />
</g>
</g>
<!-- ================= 4. FOREGROUND MOON & CRATER BOWL ================= -->
<!-- Main Moon Horizon Curve (Sloped Like a Skate Ramp) -->
<path d="M -100,660 Q 320,440 830,525 Q 1120,575 1380,470 L 1380,850 L -100,850 Z" fill="url(#moonSurface)" />
<!-- Bright Rim Highlight Along Moon Horizon -->
<path d="M -100,660 Q 320,440 830,525 Q 1120,575 1380,470" fill="none" stroke="#eef2ff" stroke-width="3" opacity="0.5" />
<!-- Giant Skate-Bowl Crater (Right Foreground) -->
<g transform="translate(970, 650) rotate(-6)">
<!-- Outer Rim Highlight -->
<ellipse cx="0" cy="0" rx="235" ry="78" fill="#d8deeb" opacity="0.55" />
<!-- Crater Bowl Wall -->
<ellipse cx="0" cy="4" rx="215" ry="66" fill="url(#craterInterior)" />
<!-- Deep Lip Shadow -->
<path d="M -215,4 A 215,66 0 0,1 215,4 A 215,52 0 0,0 -215,4 Z" fill="url(#craterRimShadow)" />
<!-- Skate Carve Grind Marks Inside Bowl -->
<path d="M -145,16 Q -30,52 115,8" fill="none" stroke="#eef2ff" stroke-width="2.5" stroke-dasharray="10 8" opacity="0.45" />
<path d="M -110,30 Q 10,56 140,20" fill="none" stroke="#8df5ff" stroke-width="2" stroke-dasharray="6 10" opacity="0.35" />
</g>
<!-- Secondary Craters & Moon Rocks -->
<!-- Left Mid Crater -->
<g transform="translate(185, 675) rotate(-13)">
<ellipse cx="0" cy="0" rx="95" ry="34" fill="#c7cfe0" opacity="0.6" />
<ellipse cx="0" cy="3" rx="84" ry="27" fill="url(#craterInterior)" />
<path d="M -84,3 A 84,27 0 0,1 84,3 A 84,19 0 0,0 -84,3 Z" fill="#3a4154" />
</g>
<!-- Center Low Crater -->
<g transform="translate(525, 725) rotate(-4)">
<ellipse cx="0" cy="0" rx="68" ry="22" fill="#bac2d4" opacity="0.5" />
<ellipse cx="0" cy="2" rx="58" ry="17" fill="url(#craterInterior)" />
<path d="M -58,2 A 58,17 0 0,1 58,2 A 58,11 0 0,0 -58,2 Z" fill="#3a4154" />
</g>
<!-- High Rim Small Crater -->
<g transform="translate(430, 540) rotate(-11)">
<ellipse cx="0" cy="2" rx="38" ry="11" fill="url(#craterInterior)" />
<path d="M -38,2 A 38,11 0 0,1 38,2 A 38,7 0 0,0 -38,2 Z" fill="#434b5e" />
</g>
<!-- Surface Pebbles & Texture -->
<g fill="#535b70" opacity="0.7">
<ellipse cx="330" cy="610" rx="14" ry="6" transform="rotate(-10 330 610)" />
<ellipse cx="352" cy="618" rx="6" ry="3" />
<ellipse cx="680" cy="645" rx="18" ry="7" transform="rotate(6 680 645)" />
<ellipse cx="708" cy="652" rx="8" ry="4" />
<ellipse cx="1190" cy="545" rx="12" ry="5" transform="rotate(-15 1190 545)" />
</g>
<!-- Dynamic Shadow Cast by Cat & Skateboard on the Moon -->
<ellipse class="moon-shadow" cx="625" cy="560" rx="145" ry="24" fill="#232838" />
<!-- Floating Low-Gravity Moon Pebbles Kicked Up -->
<g fill="#9aa3b8">
<circle cx="430" cy="495" r="6" />
<circle cx="385" cy="470" r="4" opacity="0.8" />
<circle cx="465" cy="520" r="4.5" />
<circle cx="775" cy="485" r="5" opacity="0.85" />
<circle cx="820" cy="510" r="3.5" opacity="0.65" />
</g>
<!-- ================= 5. ASTRONAUT CAT SKATEBOARDING ================= -->
<g class="skater-rig">
<!-- Motion Speed Arcs / Cosmic Shred Trails -->
<g opacity="0.75" filter="url(#neonGlow)">
<path d="M 270,565 Q 400,520 515,470" fill="none" stroke="#00f2ff" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="18 14" />
<path d="M 320,595 Q 445,550 565,492" fill="none" stroke="#ff2a85" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="10 16" />
<path d="M 230,525 Q 350,480 465,435" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 18" />
</g>
<!-- Center Skateboard & Cat on Pivot (650, 380) and Tilt for Ollie Jump -->
<g transform="translate(650, 380) rotate(-19) translate(-650, -380)">
<!-- -------- A. ROCKET THRUSTER & SKATEBOARD -------- -->
<!-- Rocket Thruster Flame (Left / Rear of Deck) -->
<g class="thruster-flame">
<path d="M 492,455 C 420,432 340,444 255,460 C 340,480 420,486 492,473 Z" fill="url(#flameOuter)" filter="url(#neonGlow)" />
<path d="M 492,459 C 445,448 395,454 345,462 C 395,471 445,474 492,469 Z" fill="#ffffff" />
<!-- Thruster Sparks -->
<circle cx="320" cy="445" r="3.5" fill="#00ffff" />
<circle cx="280" cy="472" r="2.5" fill="#ff3399" />
<circle cx="375" cy="480" r="3" fill="#ffffff" />
</g>
<!-- Thruster Nozzle Hardware -->
<path d="M 508,452 L 486,446 L 486,478 L 508,470 Z" fill="#3a4154" stroke="#7c879e" stroke-width="2" stroke-linejoin="round" />
<ellipse cx="486" cy="462" rx="4" ry="15" fill="#00ffff" opacity="0.8" />
<!-- Skateboard Trucks (Metallic Brackets) -->
<!-- Rear Truck -->
<path d="M 548,472 L 568,472 L 563,493 L 553,493 Z" fill="#9ba6bd" stroke="#2c3242" stroke-width="2" />
<rect x="543" y="468" width="30" height="6" rx="2" fill="#525b70" />
<!-- Front Truck -->
<path d="M 732,472 L 752,472 L 747,493 L 737,493 Z" fill="#9ba6bd" stroke="#2c3242" stroke-width="2" />
<rect x="727" y="468" width="30" height="6" rx="2" fill="#525b70" />
<!-- Neon Under-Glow Beneath Deck -->
<ellipse cx="650" cy="482" rx="125" ry="12" fill="#00f2ff" opacity="0.38" filter="url(#neonGlow)" />
<!-- Skateboard Deck -->
<!-- Deck Bottom Graphic Layer -->
<path d="M 482,442 Q 505,468 538,468 L 762,468 Q 795,468 818,442 L 823,449 Q 798,478 762,478 L 538,478 Q 502,478 477,449 Z" fill="url(#deckGrad)" stroke="#1e2230" stroke-width="2" />
<!-- Deck Side Rim Stripe -->
<path d="M 480,446 Q 503,473 538,473 L 762,473 Q 797,473 820,446" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.75" />
<!-- Dark Grip Tape Top -->
<path d="M 482,442 Q 505,468 538,468 L 762,468 Q 795,468 818,442 Q 795,459 762,459 L 538,459 Q 505,459 482,442 Z" fill="#232736" stroke="#454d66" stroke-width="1.5" />
<!-- Glowing Neon Wheels -->
<!-- Rear Wheel -->
<g transform="translate(558, 498)">
<circle cx="0" cy="0" r="22" fill="#161924" stroke="#00f2ff" stroke-width="5" filter="url(#neonGlow)" />
<g class="wheel-spin">
<line x1="-15" y1="0" x2="15" y2="0" stroke="#ff2a85" stroke-width="3" />
<line x1="0" y1="-15" x2="0" y2="15" stroke="#ff2a85" stroke-width="3" />
<circle cx="0" cy="0" r="7" fill="#ffffff" />
</g>
<circle cx="0" cy="0" r="3" fill="#161924" />
</g>
<!-- Front Wheel -->
<g transform="translate(742, 498)">
<circle cx="0" cy="0" r="22" fill="#161924" stroke="#00f2ff" stroke-width="5" filter="url(#neonGlow)" />
<g class="wheel-spin">
<line x1="-15" y1="0" x2="15" y2="0" stroke="#ff2a85" stroke-width="3" />
<line x1="0" y1="-15" x2="0" y2="15" stroke="#ff2a85" stroke-width="3" />
<circle cx="0" cy="0" r="7" fill="#ffffff" />
</g>
<circle cx="0" cy="0" r="3" fill="#161924" />
</g>
<!-- -------- B. ASTRONAUT CAT SPACESUIT & BODY -------- -->
<!-- Pressurized Cat Tail in Spacesuit Sleeve -->
<g class="cat-tail">
<path d="M 588,398 C 530,412 478,370 486,322 C 492,286 532,292 528,324 C 524,348 548,372 588,376 Z" fill="url(#suitMain)" stroke="#4e586e" stroke-width="3" stroke-linejoin="round" />
<!-- Glowing Neon Stripes on Tail Tip -->
<path d="M 487,328 Q 505,322 526,330" fill="none" stroke="#ff2a85" stroke-width="5" stroke-linecap="round" />
<path d="M 490,312 Q 508,308 525,317" fill="none" stroke="#00e5ff" stroke-width="4" stroke-linecap="round" />
</g>
<!-- Space Jetpack / Life-Support Backpack -->
<g transform="translate(556, 294) rotate(-8)">
<rect x="0" y="0" width="56" height="92" rx="16" fill="url(#suitLimbBack)" stroke="#475166" stroke-width="3" />
<!-- Side Oxygen Tank Cylinder -->
<rect x="-12" y="14" width="18" height="64" rx="9" fill="#68758f" stroke="#3c4457" stroke-width="2.5" />
<!-- Glowing Status Lights -->
<circle cx="-3" cy="28" r="3.5" fill="#00ff88" filter="url(#neonGlow)" />
<circle cx="-3" cy="40" r="3.5" fill="#00e5ff" filter="url(#neonGlow)" />
<rect x="12" y="18" width="22" height="10" rx="3" fill="#ff2a85" />
</g>
<!-- Back Arm (Right Arm Reaching Forward for Balance) -->
<g>
<path d="M 678,315 Q 735,305 772,265" fill="none" stroke="url(#suitLimbBack)" stroke-width="30" stroke-linecap="round" />
<path d="M 678,315 Q 735,305 772,265" fill="none" stroke="#566178" stroke-width="32" stroke-linecap="round" opacity="0.25" />
<!-- Red Suit Cuff Ring -->
<ellipse cx="762" cy="275" rx="15" ry="7" transform="rotate(42 762 275)" fill="#ff2a85" />
<!-- Space Glove Paw -->
<circle cx="778" cy="258" r="17" fill="#ffffff" stroke="#566178" stroke-width="2.5" />
<circle cx="790" cy="252" r="6" fill="#ffffff" stroke="#566178" stroke-width="2" />
<circle cx="788" cy="264" r="6" fill="#ffffff" stroke="#566178" stroke-width="2" />
<ellipse cx="782" cy="259" rx="6" ry="5" fill="#ff85b3" />
</g>
<!-- Front Leg (Right Leg Planted Forward on Board) -->
<g>
<path d="M 672,392 Q 708,412 714,442" fill="none" stroke="url(#suitLimbBack)" stroke-width="36" stroke-linecap="round" />
<!-- Knee Joint Ridges -->
<path d="M 684,412 Q 704,405 716,415" fill="none" stroke="#64708a" stroke-width="3" />
<!-- Futuristic Magnetic Space Boot (Front) -->
<path d="M 692,435 L 732,435 C 748,435 755,448 755,461 L 688,461 Z" fill="#ffffff" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
<rect x="692" y="432" width="40" height="8" rx="4" fill="#ff2a85" />
<rect x="686" y="456" width="71" height="7" rx="3.5" fill="#00e5ff" />
</g>
<!-- Back Leg (Left Leg Bent & Kicking Tail of Board) -->
<g>
<path d="M 608,395 Q 572,418 576,442" fill="none" stroke="url(#suitMain)" stroke-width="36" stroke-linecap="round" />
<path d="M 564,418 Q 584,412 596,422" fill="none" stroke="#8592ad" stroke-width="3" />
<!-- Futuristic Magnetic Space Boot (Rear) -->
<path d="M 554,435 L 594,435 C 608,435 614,448 614,461 L 548,461 Z" fill="#ffffff" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
<rect x="554" y="432" width="40" height="8" rx="4" fill="#ff2a85" />
<rect x="546" y="456" width="70" height="7" rx="3.5" fill="#00e5ff" />
</g>
<!-- Main Spacesuit Torso -->
<path d="M 594,302 C 578,348 582,412 612,418 L 676,418 C 702,412 706,352 686,302 Z" fill="url(#suitMain)" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
<!-- Suit Ribbing / Seam Lines -->
<path d="M 588,375 Q 642,390 694,375" fill="none" stroke="#a6b2c7" stroke-width="3" />
<path d="M 592,392 Q 642,407 692,392" fill="none" stroke="#a6b2c7" stroke-width="3" />
<!-- Chest Control Pack (Fish-Bone Telemetry Display) -->
<g transform="translate(624, 326) rotate(3)">
<rect x="0" y="0" width="48" height="36" rx="8" fill="#23293a" stroke="#8f9cb5" stroke-width="2.5" />
<!-- Cute Neon Fish Icon on Chest Screen -->
<path d="M 12,18 Q 22,9 32,18 Q 22,27 12,18 Z M 30,18 L 38,12 L 38,24 Z" fill="#00f2ff" />
<circle cx="17" cy="17" r="1.5" fill="#23293a" />
<!-- Indicator Buttons -->
<circle cx="12" cy="30" r="2.2" fill="#ff2a85" />
<circle cx="20" cy="30" r="2.2" fill="#ffdd00" />
<circle cx="28" cy="30" r="2.2" fill="#00ff88" />
</g>
<!-- Front Arm (Left Arm Shredding Backwards) -->
<g>
<path d="M 604,322 Q 554,335 516,300" fill="none" stroke="url(#suitMain)" stroke-width="30" stroke-linecap="round" />
<path d="M 604,322 Q 554,335 516,300" fill="none" stroke="#475166" stroke-width="33" stroke-linecap="round" opacity="0.2" />
<!-- Shoulder Patch (Paw Emblem) -->
<circle cx="585" cy="322" r="11" fill="#ff7714" stroke="#ffffff" stroke-width="1.5" />
<circle cx="585" cy="323" r="4" fill="#ffffff" />
<!-- Red Suit Cuff Ring -->
<ellipse cx="526" cy="308" rx="7" ry="15" transform="rotate(-42 526 308)" fill="#ff2a85" />
<!-- Space Glove Paw -->
<circle cx="510" cy="292" r="17" fill="#ffffff" stroke="#475166" stroke-width="2.5" />
<circle cx="497" cy="284" r="6" fill="#ffffff" stroke="#475166" stroke-width="2" />
<circle cx="496" cy="296" r="6" fill="#ffffff" stroke="#475166" stroke-width="2" />
<circle cx="503" cy="276" r="5.5" fill="#ffffff" stroke="#475166" stroke-width="2" />
<!-- Pink Paw Pad on Glove -->
<ellipse cx="508" cy="292" rx="6" ry="5" fill="#ff85b3" />
</g>
<!-- Metallic Neck Ring -->
<ellipse cx="642" cy="298" rx="54" ry="13" fill="#8895b0" stroke="#3c4457" stroke-width="3" />
<ellipse cx="642" cy="295" rx="48" ry="9" fill="#505b73" />
<circle cx="604" cy="299" r="3" fill="#00f2ff" />
<circle cx="642" cy="304" r="3" fill="#ff2a85" />
<circle cx="680" cy="299" r="3" fill="#00f2ff" />
<!-- -------- C. CAT HEAD & GLASS BUBBLE HELMET -------- -->
<!-- Rear Interior of Helmet -->
<circle cx="648" cy="212" r="92" fill="#182238" opacity="0.45" />
<!-- Ginger Tabby Cat Head -->
<g transform="translate(650, 222) rotate(5)">
<!-- Left Ear -->
<path d="M -56,-34 L -70,-92 C -70,-98 -62,-100 -56,-95 L -14,-58 Z" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" stroke-linejoin="round" />
<path d="M -52,-42 L -62,-82 L -25,-54 Z" fill="#ff8da1" />
<!-- Right Ear -->
<path d="M 18,-56 L 62,-92 C 68,-96 75,-92 73,-85 L 56,-28 Z" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" stroke-linejoin="round" />
<path d="M 26,-52 L 60,-80 L 50,-36 Z" fill="#ff8da1" />
<!-- Fluffy Head Base & Cheeks -->
<ellipse cx="0" cy="0" rx="66" ry="54" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" />
<!-- Cheek Fur Tufts -->
<path d="M -62,4 L -76,-2 L -66,14 L -78,18 L -58,26" fill="url(#catFur)" stroke="#8f3500" stroke-width="2" stroke-linejoin="round" />
<path d="M 62,4 L 76,-2 L 66,14 L 78,18 L 58,26" fill="url(#catFur)" stroke="#8f3500" stroke-width="2" stroke-linejoin="round" />
<!-- Tabby Forehead Stripes -->
<path d="M 0,-52 L 0,-28" stroke="#9e3b00" stroke-width="5" stroke-linecap="round" />
<path d="M -14,-49 L -9,-30" stroke="#9e3b00" stroke-width="4.5" stroke-linecap="round" />
<path d="M 14,-49 L 9,-30" stroke="#9e3b00" stroke-width="4.5" stroke-linecap="round" />
<!-- Cream Muzzle Patch -->
<ellipse cx="4" cy="16" rx="28" ry="20" fill="#fff3e6" />
<!-- Big Expressive Eyes (Looking Forward with Stoked Energy) -->
<!-- Left Eye -->
<g transform="translate(-24, -6)">
<ellipse cx="0" cy="0" rx="15" ry="16" fill="#0d1b2a" />
<ellipse cx="1" cy="0" rx="13" ry="14" fill="#17e88f" />
<ellipse cx="3" cy="0" rx="7" ry="10" fill="#09111c" />
<!-- Starry Eye Catchlights -->
<circle cx="-4" cy="-5" r="4.5" fill="#ffffff" />
<circle cx="5" cy="5" r="2.2" fill="#ffffff" />
</g>
<!-- Right Eye -->
<g transform="translate(28, -6)">
<ellipse cx="0" cy="0" rx="15" ry="16" fill="#0d1b2a" />
<ellipse cx="1" cy="0" rx="13" ry="14" fill="#17e88f" />
<ellipse cx="3" cy="0" rx="7" ry="10" fill="#09111c" />
<!-- Starry Eye Catchlights -->
<circle cx="-4" cy="-5" r="4.5" fill="#ffffff" />
<circle cx="5" cy="5" r="2.2" fill="#ffffff" />
</g>
<!-- Cute Rosy Cheeks -->
<ellipse cx="-42" cy="14" rx="10" ry="6" fill="#ff5c8a" opacity="0.55" />
<ellipse cx="44" cy="14" rx="10" ry="6" fill="#ff5c8a" opacity="0.55" />
<!-- Pink Triangle Nose -->
<path d="M -3,7 L 9,7 L 3,14 Z" fill="#ff4d79" stroke="#8f3500" stroke-width="1.5" stroke-linejoin="round" />
<!-- Happy Excited Cat Mouth (:3 + Open Grin) -->
<path d="M -9,17 Q -3,23 3,15 Q 9,23 15,17" fill="none" stroke="#6e2600" stroke-width="2.8" stroke-linecap="round" />
<path d="M -5,19 Q 3,33 11,19 Z" fill="#d92b5a" stroke="#6e2600" stroke-width="2" stroke-linejoin="round" />
<!-- Little White Fang -->
<path d="M 7,19 L 9,24 L 11,19 Z" fill="#ffffff" />
<!-- Whiskers -->
<g stroke="#fff8f0" stroke-width="2" stroke-linecap="round" opacity="0.9">
<line x1="-48" y1="10" x2="-82" y2="2" />
<line x1="-50" y1="17" x2="-86" y2="17" />
<line x1="-48" y1="24" x2="-80" y2="31" />
<line x1="50" y1="10" x2="84" y2="2" />
<line x1="52" y1="17" x2="88" y2="17" />
<line x1="50" y1="24" x2="82" y2="31" />
</g>
</g>
<!-- Helmet Radio Antenna (Left Top) -->
<g transform="translate(575, 145) rotate(-32)">
<rect x="-5" y="0" width="10" height="14" rx="3" fill="#8895b0" stroke="#3c4457" stroke-width="2" />
<line x1="0" y1="0" x2="0" y2="-34" stroke="#d8dce8" stroke-width="4" stroke-linecap="round" />
<circle cx="0" cy="-36" r="7" fill="#00f2ff" filter="url(#neonGlow)" />
<circle cx="0" cy="-36" r="3.5" fill="#ffffff" />
</g>
<!-- Transparent Space Helmet Bubble -->
<circle cx="648" cy="212" r="92" fill="url(#glassHelmet)" stroke="#b8f2ff" stroke-width="3.5" />
<!-- Glossy Helmet Visor Highlights -->
<path d="M 582,162 A 76,76 0 0,1 692,144" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" opacity="0.65" />
<ellipse cx="578" cy="186" rx="6" ry="13" transform="rotate(-18 578 186)" fill="#ffffff" opacity="0.55" />
<path d="M 605,282 A 78,78 0 0,0 722,245" fill="none" stroke="#00e5ff" stroke-width="4" stroke-linecap="round" opacity="0.45" />
</g>
</g>
<!-- ================= 6. FOREGROUND VIGNETTE & SPARKLES ================= -->
<g fill="#00f2ff" opacity="0.7">
<circle cx="485" cy="390" r="2.5" filter="url(#neonGlow)" />
<circle cx="815" cy="360" r="3" filter="url(#neonGlow)" />
<circle cx="745" cy="255" r="2" />
</g>
</svg>
</body>
</html>
```