Skateboarding astronaut catOne-line
DeepSeek V4.1 Flash 1017
by DeepSeekReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 19.1 s
- Cost
- $0.0042
- Output tokens
- 5,835
- Spent thinking
- 0 tokens
- Speed
- 317.6 tok/s
- Console errors
- 0
- First token after
- 742 ms
- First visible text after
- 742 ms
- Prompt tokens
- 349
- Code size
- 15.2 KB
- Finish reason
- stop
- Served by
- DigitalOcean
- Model id
deepseek/deepseek-v4.1-flash-1017- Reasoning sent
{"effort":"none"}- Max output
- 64,000 tokens
- Generated
- Nov 10, 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 · 337 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>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: radial-gradient(ellipse at 50% 30%, #0a0a2e 0%, #05051a 60%, #000 100%);
display: flex; justify-content: center; align-items: center;
min-height: 100vh; overflow: hidden;
font-family: 'Courier New', monospace;
}
.scene {
width: 100%; max-width: 1100px; padding: 10px;
}
svg { width: 100%; height: auto; display: block; }
/* twinkle stars */
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
.star { animation: twinkle 3s ease-in-out infinite; }
.star:nth-child(2n) { animation-delay: 0.7s; animation-duration: 4s; }
.star:nth-child(3n) { animation-delay: 1.4s; animation-duration: 2.5s; }
.star:nth-child(5n) { animation-delay: 2.1s; animation-duration: 3.5s; }
/* gentle bobbing for cat+board */
@keyframes bob {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.rider { animation: bob 2.4s ease-in-out infinite; transform-origin: 550px 500px; }
/* tail sway */
@keyframes tailSway {
0%, 100% { transform: rotate(-8deg); }
50% { transform: rotate(10deg); }
}
.tail { animation: tailSway 1.6s ease-in-out infinite; transform-origin: 620px 340px; }
/* wheel spin */
@keyframes spinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.wheel { animation: spinCW 1.2s linear infinite; }
/* antenna glow */
@keyframes glow {
0%, 100% { r: 5; opacity: 1; }
50% { r: 7; opacity: 0.7; }
}
.blinker { animation: glow 1s ease-in-out infinite; }
/* subtle moon crater shimmer */
@keyframes shimmer { 0%,100% { opacity: 0.35; } 50% { opacity: 0.6; } }
.crater { animation: shimmer 4s ease-in-out infinite; }
/* sparkle on visor */
@keyframes sparkle {
0%, 90%, 100% { opacity: 0; transform: scale(0.5); }
95% { opacity: 1; transform: scale(1.2); }
}
.visor-sparkle { animation: sparkle 3.2s ease-in-out infinite; transform-origin: 500px 240px; }
/* floating dust */
@keyframes drift {
0% { transform: translate(0,0); opacity: 0; }
20% { opacity: 0.8; }
100% { transform: translate(-80px, -60px); opacity: 0; }
}
.dust { animation: drift 4s ease-out infinite; }
.dust:nth-child(2) { animation-delay: 1.3s; }
.dust:nth-child(3) { animation-delay: 2.6s; }
.dust:nth-child(4) { animation-delay: 0.7s; }
</style>
</head>
<body>
<div class="scene">
<svg viewBox="0 0 900 650" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Astronaut cat skateboarding on the moon">
<defs>
<radialGradient id="spaceGrad" cx="50%" cy="35%" r="80%">
<stop offset="0%" stop-color="#12123a"/>
<stop offset="60%" stop-color="#080820"/>
<stop offset="100%" stop-color="#020210"/>
</radialGradient>
<radialGradient id="moonGrad" cx="40%" cy="30%" r="75%">
<stop offset="0%" stop-color="#d8d3e8"/>
<stop offset="55%" stop-color="#a8a2c0"/>
<stop offset="100%" stop-color="#6b6588"/>
</radialGradient>
<radialGradient id="earthGrad" cx="35%" cy="30%" r="70%">
<stop offset="0%" stop-color="#6fb7ff"/>
<stop offset="55%" stop-color="#2b6bd4"/>
<stop offset="100%" stop-color="#123a7a"/>
</radialGradient>
<linearGradient id="visorsGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7ff0ff"/>
<stop offset="50%" stop-color="#2ab8e8"/>
<stop offset="100%" stop-color="#0a5a8a"/>
</linearGradient>
<linearGradient id="suitGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f5f5f8"/>
<stop offset="100%" stop-color="#c4c4d0"/>
</linearGradient>
<linearGradient id="boardGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ff5a8a"/>
<stop offset="50%" stop-color="#ffb347"/>
<stop offset="100%" stop-color="#ff5a8a"/>
</linearGradient>
<radialGradient id="glowGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#7ff0ff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#7ff0ff" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Space background -->
<rect width="900" height="650" fill="url(#spaceGrad)"/>
<!-- Stars -->
<g fill="#ffffff">
<circle class="star" cx="80" cy="60" r="1.8"/>
<circle class="star" cx="180" cy="120" r="1.2"/>
<circle class="star" cx="260" cy="50" r="2"/>
<circle class="star" cx="360" cy="100" r="1.4"/>
<circle class="star" cx="460" cy="40" r="1.8"/>
<circle class="star" cx="560" cy="90" r="1.1"/>
<circle class="star" cx="650" cy="45" r="2.2"/>
<circle class="star" cx="740" cy="120" r="1.5"/>
<circle class="star" cx="820" cy="70" r="1.8"/>
<circle class="star" cx="120" cy="200" r="1.3"/>
<circle class="star" cx="40" cy="320" r="1.6"/>
<circle class="star" cx="860" cy="250" r="1.4"/>
<circle class="star" cx="810" cy="380" r="1.9"/>
<circle class="star" cx="340" cy="180" r="1.1"/>
<circle class="star" cx="600" cy="200" r="1.5"/>
<circle class="star" cx="700" cy="300" r="1.2"/>
<circle class="star" cx="150" cy="420" r="1.4"/>
<circle class="star" cx="50" cy="140" r="1.7"/>
<circle class="star" cx="500" cy="150" r="1.0"/>
<circle class="star" cx="880" cy="160" r="1.6"/>
<circle class="star" cx="420" cy="260" r="1.2"/>
<circle class="star" cx="300" cy="300" r="1.0"/>
</g>
<!-- Earth in distance -->
<g transform="translate(760, 130)">
<circle r="42" fill="url(#earthGrad)"/>
<path d="M -18 -8 Q -5 -18 10 -10 Q 20 -2 8 8 Q -6 14 -18 6 Z" fill="#3fbf6a" opacity="0.85"/>
<path d="M 12 -20 Q 24 -12 22 2 Q 30 8 22 18 Q 10 20 8 8 Z" fill="#3fbf6a" opacity="0.7"/>
<circle r="42" fill="none" stroke="#8fd0ff" stroke-width="1" opacity="0.4"/>
</g>
<!-- Moon surface (large circle, bottom) -->
<g>
<circle cx="450" cy="1050" r="560" fill="url(#moonGrad)"/>
<circle cx="450" cy="1050" r="560" fill="none" stroke="#e8e4f5" stroke-width="2" opacity="0.3"/>
<!-- Craters -->
<ellipse class="crater" cx="220" cy="560" rx="46" ry="12" fill="#8a84a6" opacity="0.5"/>
<ellipse class="crater" cx="700" cy="590" rx="60" ry="15" fill="#8a84a6" opacity="0.5"/>
<ellipse class="crater" cx="430" cy="610" rx="38" ry="10" fill="#8a84a6" opacity="0.45"/>
<ellipse class="crater" cx="120" cy="600" rx="30" ry="8" fill="#8a84a6" opacity="0.4"/>
<ellipse class="crater" cx="820" cy="540" rx="25" ry="7" fill="#8a84a6" opacity="0.4"/>
<ellipse class="crater" cx="560" cy="560" rx="20" ry="6" fill="#8a84a6" opacity="0.4"/>
</g>
<!-- Floating dust particles -->
<g fill="#d8d3e8">
<circle class="dust" cx="380" cy="540" r="3"/>
<circle class="dust" cx="650" cy="560" r="2.5"/>
<circle class="dust" cx="720" cy="520" r="2"/>
<circle class="dust" cx="300" cy="570" r="2.5"/>
</g>
<!-- Rider group (cat + board) -->
<g class="rider">
<!-- Skateboard -->
<g>
<!-- Board deck -->
<path d="M 320 560 Q 300 555 305 548 L 780 548 Q 800 555 785 562 L 400 585 Q 340 585 320 560 Z"
fill="url(#boardGrad)" stroke="#8a2050" stroke-width="2"/>
<!-- Deck top line -->
<path d="M 320 558 Q 340 550 400 548 L 770 548" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.5"/>
<!-- Grip stripes -->
<g stroke="#8a2050" stroke-width="1.2" opacity="0.6">
<line x1="380" y1="552" x2="420" y2="552"/>
<line x1="450" y1="550" x2="490" y2="550"/>
<line x1="520" y1="549" x2="560" y2="549"/>
<line x1="590" y1="548" x2="630" y2="548"/>
<line x1="660" y1="548" x2="700" y2="548"/>
</g>
<!-- Trucks -->
<rect x="390" y="578" width="40" height="10" rx="3" fill="#555" stroke="#333" stroke-width="1.5"/>
<rect x="650" y="568" width="40" height="10" rx="3" fill="#555" stroke="#333" stroke-width="1.5"/>
<!-- Wheels (spin) -->
<g class="wheel" style="transform-origin: 410px 596px;">
<circle cx="410" cy="596" r="16" fill="#222" stroke="#555" stroke-width="2"/>
<circle cx="410" cy="596" r="10" fill="#444"/>
<circle cx="410" cy="596" r="4" fill="#ffb347"/>
<line x1="410" y1="586" x2="410" y2="606" stroke="#666" stroke-width="1.5"/>
<line x1="400" y1="596" x2="420" y2="596" stroke="#666" stroke-width="1.5"/>
</g>
<g class="wheel" style="transform-origin: 670px 586px;">
<circle cx="670" cy="586" r="16" fill="#222" stroke="#555" stroke-width="2"/>
<circle cx="670" cy="586" r="10" fill="#444"/>
<circle cx="670" cy="586" r="4" fill="#ffb347"/>
<line x1="670" y1="576" x2="670" y2="596" stroke="#666" stroke-width="1.5"/>
<line x1="660" y1="586" x2="680" y2="586" stroke="#666" stroke-width="1.5"/>
</g>
</g>
<!-- Cat body in spacesuit -->
<g>
<!-- Backpack / life support -->
<rect x="405" y="330" width="70" height="110" rx="18" fill="#a8a2c0" stroke="#6b6588" stroke-width="2"/>
<rect x="415" y="345" width="50" height="20" rx="5" fill="#7ff0ff" opacity="0.5"/>
<circle cx="440" cy="385" r="8" fill="#7ff0ff" opacity="0.6"/>
<!-- Tail (suit-covered) -->
<g class="tail">
<path d="M 600 400 Q 660 390 670 340 Q 675 310 640 300"
fill="none" stroke="#e8e4f5" stroke-width="16" stroke-linecap="round"/>
<path d="M 600 400 Q 660 390 670 340 Q 675 310 640 300"
fill="none" stroke="#c4c4d0" stroke-width="10" stroke-linecap="round" opacity="0.5"/>
<!-- Tail tip -->
<circle cx="638" cy="298" r="9" fill="#ff9ec4"/>
</g>
<!-- Suit torso -->
<path d="M 430 350 Q 420 350 415 370 Q 410 420 420 480 Q 430 510 470 515 L 540 515 Q 585 510 590 470 Q 595 420 585 380 Q 580 355 560 352 Z"
fill="url(#suitGrad)" stroke="#8a8a9a" stroke-width="2"/>
<!-- Suit chest control panel -->
<rect x="465" y="390" width="60" height="50" rx="6" fill="#2a2a3a" stroke="#8a8a9a" stroke-width="1.5"/>
<circle cx="482" cy="408" r="5" fill="#ff5a5a"/>
<circle cx="502" cy="408" r="5" fill="#5aff7a"/>
<circle cx="482" cy="428" r="5" fill="#ffb347"/>
<circle cx="502" cy="428" r="5" fill="#7ff0ff"/>
<rect x="515" y="400" width="6" height="30" rx="2" fill="#7ff0ff" opacity="0.7"/>
<!-- Cat legs (suit covered, in stance) -->
<!-- Front leg -->
<path d="M 480 505 Q 470 530 480 545 L 510 545 Q 518 525 515 505 Z"
fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2"/>
<!-- Back leg -->
<path d="M 555 505 Q 565 530 575 545 L 605 545 Q 610 525 600 500 Z"
fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2"/>
<!-- Boots -->
<path d="M 470 542 Q 465 555 480 558 L 520 558 Q 528 548 520 540 Z" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
<path d="M 570 542 Q 565 555 580 558 L 618 558 Q 625 548 618 540 Z" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
<!-- Arms -->
<path d="M 425 380 Q 395 400 385 440 Q 380 455 395 460 Q 405 462 410 450"
fill="none" stroke="#e8e4f5" stroke-width="20" stroke-linecap="round"/>
<path d="M 585 380 Q 620 390 640 420 Q 650 435 638 442 Q 628 446 622 435"
fill="none" stroke="#e8e4f5" stroke-width="20" stroke-linecap="round"/>
<!-- Gloves -->
<circle cx="405" cy="455" r="13" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
<circle cx="635" cy="438" r="13" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
<!-- Glove details -->
<line x1="398" y1="455" x2="412" y2="455" stroke="#555" stroke-width="1.5"/>
<line x1="628" y1="438" x2="642" y2="438" stroke="#555" stroke-width="1.5"/>
<!-- Cat ears poking out of helmet sides -->
<path d="M 465 240 L 448 195 L 490 225 Z" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2" stroke-linejoin="round"/>
<path d="M 460 232 L 452 205 L 478 225 Z" fill="#ff9ec4"/>
<path d="M 555 240 L 572 195 L 530 225 Z" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2" stroke-linejoin="round"/>
<path d="M 560 232 L 568 205 L 542 225 Z" fill="#ff9ec4"/>
</g>
<!-- Helmet -->
<g>
<!-- Helmet ring / neck -->
<ellipse cx="510" cy="348" rx="72" ry="22" fill="#8a84a6" stroke="#555" stroke-width="2"/>
<ellipse cx="510" cy="342" rx="72" ry="20" fill="#b8b2cc" stroke="#555" stroke-width="2"/>
<!-- Helmet dome -->
<circle cx="510" cy="255" r="78" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2.5" opacity="0.35"/>
<circle cx="510" cy="255" r="78" fill="none" stroke="#c4c4d8" stroke-width="2" opacity="0.8"/>
<!-- Cat face inside visor -->
<!-- Face fur -->
<ellipse cx="510" cy="262" rx="52" ry="48" fill="#f0e6d8"/>
<!-- Darker ear/top fur -->
<path d="M 470 232 Q 490 218 512 220 Q 534 218 552 232 Q 545 245 512 245 Q 478 245 470 232 Z" fill="#d8c8b0"/>
<!-- Eyes (happy/content) -->
<ellipse cx="487" cy="255" rx="12" ry="14" fill="#fff"/>
<ellipse cx="533" cy="255" rx="12" ry="14" fill="#fff"/>
<circle cx="489" cy="257" r="8" fill="#3ac04a"/>
<circle cx="535" cy="257" r="8" fill="#3ac04a"/>
<ellipse cx="489" cy="257" rx="3" ry="7" fill="#111"/>
<ellipse cx="535" cy="257" rx="3" ry="7" fill="#111"/>
<circle cx="492" cy="253" r="2.5" fill="#fff"/>
<circle cx="538" cy="253" r="2.5" fill="#fff"/>
<!-- Blush -->
<ellipse cx="473" cy="275" rx="7" ry="4" fill="#ff9ec4" opacity="0.6"/>
<ellipse cx="547" cy="275" rx="7" ry="4" fill="#ff9ec4" opacity="0.6"/>
<!-- Nose -->
<path d="M 505 272 L 515 272 L 510 280 Z" fill="#ff9ec4"/>
<!-- Mouth (smile) -->
<path d="M 500 283 Q 510 292 520 283" fill="none" stroke="#8a5a4a" stroke-width="2" stroke-linecap="round"/>
<!-- Whiskers -->
<g stroke="#a89880" stroke-width="1.5" stroke-linecap="round" opacity="0.8">
<line x1="455" y1="268" x2="480" y2="272"/>
<line x1="455" y1="280" x2="480" y2="280"/>
<line x1="565" y1="268" x2="540" y2="272"/>
<line x1="565" y1="280" x2="540" y2="280"/>
</g>
<!-- Helmet visor reflection -->
<path d="M 470 220 Q 490 205 515 208 Q 535 212 540 225 Q 520 218 500 222 Q 485 226 470 220 Z"
fill="#7ff0ff" opacity="0.5"/>
<ellipse cx="478" cy="230" rx="8" ry="14" fill="#ffffff" opacity="0.6" transform="rotate(-25 478 230)"/>
<!-- Visor sparkle -->
<g class="visor-sparkle">
<path d="M 500 240 L 504 232 L 508 240 L 516 244 L 508 248 L 504 256 L 500 248 L 492 244 Z" fill="#ffffff"/>
</g>
<!-- Antenna on helmet -->
<line x1="510" y1="180" x2="510" y2="150" stroke="#8a84a6" stroke-width="3" stroke-linecap="round"/>
<circle class="blinker" cx="510" cy="147" r="5" fill="#ff5a8a"/>
<circle cx="510" cy="147" r="12" fill="url(#glowGrad)" opacity="0.6"/>
</g>
</g>
<!-- Subtle motion lines behind board -->
<g stroke="#7ff0ff" stroke-width="2" stroke-linecap="round" opacity="0.35">
<line x1="260" y1="560" x2="200" y2="562"/>
<line x1="250" y1="575" x2="185" y2="578"/>
<line x1="270" y1="590" x2="215" y2="592"/>
<line x1="255" y1="545" x2="210" y2="546"/>
</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: radial-gradient(ellipse at 50% 30%, #0a0a2e 0%, #05051a 60%, #000 100%);
display: flex; justify-content: center; align-items: center;
min-height: 100vh; overflow: hidden;
font-family: 'Courier New', monospace;
}
.scene {
width: 100%; max-width: 1100px; padding: 10px;
}
svg { width: 100%; height: auto; display: block; }
/* twinkle stars */
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
.star { animation: twinkle 3s ease-in-out infinite; }
.star:nth-child(2n) { animation-delay: 0.7s; animation-duration: 4s; }
.star:nth-child(3n) { animation-delay: 1.4s; animation-duration: 2.5s; }
.star:nth-child(5n) { animation-delay: 2.1s; animation-duration: 3.5s; }
/* gentle bobbing for cat+board */
@keyframes bob {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.rider { animation: bob 2.4s ease-in-out infinite; transform-origin: 550px 500px; }
/* tail sway */
@keyframes tailSway {
0%, 100% { transform: rotate(-8deg); }
50% { transform: rotate(10deg); }
}
.tail { animation: tailSway 1.6s ease-in-out infinite; transform-origin: 620px 340px; }
/* wheel spin */
@keyframes spinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.wheel { animation: spinCW 1.2s linear infinite; }
/* antenna glow */
@keyframes glow {
0%, 100% { r: 5; opacity: 1; }
50% { r: 7; opacity: 0.7; }
}
.blinker { animation: glow 1s ease-in-out infinite; }
/* subtle moon crater shimmer */
@keyframes shimmer { 0%,100% { opacity: 0.35; } 50% { opacity: 0.6; } }
.crater { animation: shimmer 4s ease-in-out infinite; }
/* sparkle on visor */
@keyframes sparkle {
0%, 90%, 100% { opacity: 0; transform: scale(0.5); }
95% { opacity: 1; transform: scale(1.2); }
}
.visor-sparkle { animation: sparkle 3.2s ease-in-out infinite; transform-origin: 500px 240px; }
/* floating dust */
@keyframes drift {
0% { transform: translate(0,0); opacity: 0; }
20% { opacity: 0.8; }
100% { transform: translate(-80px, -60px); opacity: 0; }
}
.dust { animation: drift 4s ease-out infinite; }
.dust:nth-child(2) { animation-delay: 1.3s; }
.dust:nth-child(3) { animation-delay: 2.6s; }
.dust:nth-child(4) { animation-delay: 0.7s; }
</style>
</head>
<body>
<div class="scene">
<svg viewBox="0 0 900 650" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Astronaut cat skateboarding on the moon">
<defs>
<radialGradient id="spaceGrad" cx="50%" cy="35%" r="80%">
<stop offset="0%" stop-color="#12123a"/>
<stop offset="60%" stop-color="#080820"/>
<stop offset="100%" stop-color="#020210"/>
</radialGradient>
<radialGradient id="moonGrad" cx="40%" cy="30%" r="75%">
<stop offset="0%" stop-color="#d8d3e8"/>
<stop offset="55%" stop-color="#a8a2c0"/>
<stop offset="100%" stop-color="#6b6588"/>
</radialGradient>
<radialGradient id="earthGrad" cx="35%" cy="30%" r="70%">
<stop offset="0%" stop-color="#6fb7ff"/>
<stop offset="55%" stop-color="#2b6bd4"/>
<stop offset="100%" stop-color="#123a7a"/>
</radialGradient>
<linearGradient id="visorsGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7ff0ff"/>
<stop offset="50%" stop-color="#2ab8e8"/>
<stop offset="100%" stop-color="#0a5a8a"/>
</linearGradient>
<linearGradient id="suitGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f5f5f8"/>
<stop offset="100%" stop-color="#c4c4d0"/>
</linearGradient>
<linearGradient id="boardGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ff5a8a"/>
<stop offset="50%" stop-color="#ffb347"/>
<stop offset="100%" stop-color="#ff5a8a"/>
</linearGradient>
<radialGradient id="glowGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#7ff0ff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#7ff0ff" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Space background -->
<rect width="900" height="650" fill="url(#spaceGrad)"/>
<!-- Stars -->
<g fill="#ffffff">
<circle class="star" cx="80" cy="60" r="1.8"/>
<circle class="star" cx="180" cy="120" r="1.2"/>
<circle class="star" cx="260" cy="50" r="2"/>
<circle class="star" cx="360" cy="100" r="1.4"/>
<circle class="star" cx="460" cy="40" r="1.8"/>
<circle class="star" cx="560" cy="90" r="1.1"/>
<circle class="star" cx="650" cy="45" r="2.2"/>
<circle class="star" cx="740" cy="120" r="1.5"/>
<circle class="star" cx="820" cy="70" r="1.8"/>
<circle class="star" cx="120" cy="200" r="1.3"/>
<circle class="star" cx="40" cy="320" r="1.6"/>
<circle class="star" cx="860" cy="250" r="1.4"/>
<circle class="star" cx="810" cy="380" r="1.9"/>
<circle class="star" cx="340" cy="180" r="1.1"/>
<circle class="star" cx="600" cy="200" r="1.5"/>
<circle class="star" cx="700" cy="300" r="1.2"/>
<circle class="star" cx="150" cy="420" r="1.4"/>
<circle class="star" cx="50" cy="140" r="1.7"/>
<circle class="star" cx="500" cy="150" r="1.0"/>
<circle class="star" cx="880" cy="160" r="1.6"/>
<circle class="star" cx="420" cy="260" r="1.2"/>
<circle class="star" cx="300" cy="300" r="1.0"/>
</g>
<!-- Earth in distance -->
<g transform="translate(760, 130)">
<circle r="42" fill="url(#earthGrad)"/>
<path d="M -18 -8 Q -5 -18 10 -10 Q 20 -2 8 8 Q -6 14 -18 6 Z" fill="#3fbf6a" opacity="0.85"/>
<path d="M 12 -20 Q 24 -12 22 2 Q 30 8 22 18 Q 10 20 8 8 Z" fill="#3fbf6a" opacity="0.7"/>
<circle r="42" fill="none" stroke="#8fd0ff" stroke-width="1" opacity="0.4"/>
</g>
<!-- Moon surface (large circle, bottom) -->
<g>
<circle cx="450" cy="1050" r="560" fill="url(#moonGrad)"/>
<circle cx="450" cy="1050" r="560" fill="none" stroke="#e8e4f5" stroke-width="2" opacity="0.3"/>
<!-- Craters -->
<ellipse class="crater" cx="220" cy="560" rx="46" ry="12" fill="#8a84a6" opacity="0.5"/>
<ellipse class="crater" cx="700" cy="590" rx="60" ry="15" fill="#8a84a6" opacity="0.5"/>
<ellipse class="crater" cx="430" cy="610" rx="38" ry="10" fill="#8a84a6" opacity="0.45"/>
<ellipse class="crater" cx="120" cy="600" rx="30" ry="8" fill="#8a84a6" opacity="0.4"/>
<ellipse class="crater" cx="820" cy="540" rx="25" ry="7" fill="#8a84a6" opacity="0.4"/>
<ellipse class="crater" cx="560" cy="560" rx="20" ry="6" fill="#8a84a6" opacity="0.4"/>
</g>
<!-- Floating dust particles -->
<g fill="#d8d3e8">
<circle class="dust" cx="380" cy="540" r="3"/>
<circle class="dust" cx="650" cy="560" r="2.5"/>
<circle class="dust" cx="720" cy="520" r="2"/>
<circle class="dust" cx="300" cy="570" r="2.5"/>
</g>
<!-- Rider group (cat + board) -->
<g class="rider">
<!-- Skateboard -->
<g>
<!-- Board deck -->
<path d="M 320 560 Q 300 555 305 548 L 780 548 Q 800 555 785 562 L 400 585 Q 340 585 320 560 Z"
fill="url(#boardGrad)" stroke="#8a2050" stroke-width="2"/>
<!-- Deck top line -->
<path d="M 320 558 Q 340 550 400 548 L 770 548" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.5"/>
<!-- Grip stripes -->
<g stroke="#8a2050" stroke-width="1.2" opacity="0.6">
<line x1="380" y1="552" x2="420" y2="552"/>
<line x1="450" y1="550" x2="490" y2="550"/>
<line x1="520" y1="549" x2="560" y2="549"/>
<line x1="590" y1="548" x2="630" y2="548"/>
<line x1="660" y1="548" x2="700" y2="548"/>
</g>
<!-- Trucks -->
<rect x="390" y="578" width="40" height="10" rx="3" fill="#555" stroke="#333" stroke-width="1.5"/>
<rect x="650" y="568" width="40" height="10" rx="3" fill="#555" stroke="#333" stroke-width="1.5"/>
<!-- Wheels (spin) -->
<g class="wheel" style="transform-origin: 410px 596px;">
<circle cx="410" cy="596" r="16" fill="#222" stroke="#555" stroke-width="2"/>
<circle cx="410" cy="596" r="10" fill="#444"/>
<circle cx="410" cy="596" r="4" fill="#ffb347"/>
<line x1="410" y1="586" x2="410" y2="606" stroke="#666" stroke-width="1.5"/>
<line x1="400" y1="596" x2="420" y2="596" stroke="#666" stroke-width="1.5"/>
</g>
<g class="wheel" style="transform-origin: 670px 586px;">
<circle cx="670" cy="586" r="16" fill="#222" stroke="#555" stroke-width="2"/>
<circle cx="670" cy="586" r="10" fill="#444"/>
<circle cx="670" cy="586" r="4" fill="#ffb347"/>
<line x1="670" y1="576" x2="670" y2="596" stroke="#666" stroke-width="1.5"/>
<line x1="660" y1="586" x2="680" y2="586" stroke="#666" stroke-width="1.5"/>
</g>
</g>
<!-- Cat body in spacesuit -->
<g>
<!-- Backpack / life support -->
<rect x="405" y="330" width="70" height="110" rx="18" fill="#a8a2c0" stroke="#6b6588" stroke-width="2"/>
<rect x="415" y="345" width="50" height="20" rx="5" fill="#7ff0ff" opacity="0.5"/>
<circle cx="440" cy="385" r="8" fill="#7ff0ff" opacity="0.6"/>
<!-- Tail (suit-covered) -->
<g class="tail">
<path d="M 600 400 Q 660 390 670 340 Q 675 310 640 300"
fill="none" stroke="#e8e4f5" stroke-width="16" stroke-linecap="round"/>
<path d="M 600 400 Q 660 390 670 340 Q 675 310 640 300"
fill="none" stroke="#c4c4d0" stroke-width="10" stroke-linecap="round" opacity="0.5"/>
<!-- Tail tip -->
<circle cx="638" cy="298" r="9" fill="#ff9ec4"/>
</g>
<!-- Suit torso -->
<path d="M 430 350 Q 420 350 415 370 Q 410 420 420 480 Q 430 510 470 515 L 540 515 Q 585 510 590 470 Q 595 420 585 380 Q 580 355 560 352 Z"
fill="url(#suitGrad)" stroke="#8a8a9a" stroke-width="2"/>
<!-- Suit chest control panel -->
<rect x="465" y="390" width="60" height="50" rx="6" fill="#2a2a3a" stroke="#8a8a9a" stroke-width="1.5"/>
<circle cx="482" cy="408" r="5" fill="#ff5a5a"/>
<circle cx="502" cy="408" r="5" fill="#5aff7a"/>
<circle cx="482" cy="428" r="5" fill="#ffb347"/>
<circle cx="502" cy="428" r="5" fill="#7ff0ff"/>
<rect x="515" y="400" width="6" height="30" rx="2" fill="#7ff0ff" opacity="0.7"/>
<!-- Cat legs (suit covered, in stance) -->
<!-- Front leg -->
<path d="M 480 505 Q 470 530 480 545 L 510 545 Q 518 525 515 505 Z"
fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2"/>
<!-- Back leg -->
<path d="M 555 505 Q 565 530 575 545 L 605 545 Q 610 525 600 500 Z"
fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2"/>
<!-- Boots -->
<path d="M 470 542 Q 465 555 480 558 L 520 558 Q 528 548 520 540 Z" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
<path d="M 570 542 Q 565 555 580 558 L 618 558 Q 625 548 618 540 Z" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
<!-- Arms -->
<path d="M 425 380 Q 395 400 385 440 Q 380 455 395 460 Q 405 462 410 450"
fill="none" stroke="#e8e4f5" stroke-width="20" stroke-linecap="round"/>
<path d="M 585 380 Q 620 390 640 420 Q 650 435 638 442 Q 628 446 622 435"
fill="none" stroke="#e8e4f5" stroke-width="20" stroke-linecap="round"/>
<!-- Gloves -->
<circle cx="405" cy="455" r="13" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
<circle cx="635" cy="438" r="13" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
<!-- Glove details -->
<line x1="398" y1="455" x2="412" y2="455" stroke="#555" stroke-width="1.5"/>
<line x1="628" y1="438" x2="642" y2="438" stroke="#555" stroke-width="1.5"/>
<!-- Cat ears poking out of helmet sides -->
<path d="M 465 240 L 448 195 L 490 225 Z" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2" stroke-linejoin="round"/>
<path d="M 460 232 L 452 205 L 478 225 Z" fill="#ff9ec4"/>
<path d="M 555 240 L 572 195 L 530 225 Z" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2" stroke-linejoin="round"/>
<path d="M 560 232 L 568 205 L 542 225 Z" fill="#ff9ec4"/>
</g>
<!-- Helmet -->
<g>
<!-- Helmet ring / neck -->
<ellipse cx="510" cy="348" rx="72" ry="22" fill="#8a84a6" stroke="#555" stroke-width="2"/>
<ellipse cx="510" cy="342" rx="72" ry="20" fill="#b8b2cc" stroke="#555" stroke-width="2"/>
<!-- Helmet dome -->
<circle cx="510" cy="255" r="78" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2.5" opacity="0.35"/>
<circle cx="510" cy="255" r="78" fill="none" stroke="#c4c4d8" stroke-width="2" opacity="0.8"/>
<!-- Cat face inside visor -->
<!-- Face fur -->
<ellipse cx="510" cy="262" rx="52" ry="48" fill="#f0e6d8"/>
<!-- Darker ear/top fur -->
<path d="M 470 232 Q 490 218 512 220 Q 534 218 552 232 Q 545 245 512 245 Q 478 245 470 232 Z" fill="#d8c8b0"/>
<!-- Eyes (happy/content) -->
<ellipse cx="487" cy="255" rx="12" ry="14" fill="#fff"/>
<ellipse cx="533" cy="255" rx="12" ry="14" fill="#fff"/>
<circle cx="489" cy="257" r="8" fill="#3ac04a"/>
<circle cx="535" cy="257" r="8" fill="#3ac04a"/>
<ellipse cx="489" cy="257" rx="3" ry="7" fill="#111"/>
<ellipse cx="535" cy="257" rx="3" ry="7" fill="#111"/>
<circle cx="492" cy="253" r="2.5" fill="#fff"/>
<circle cx="538" cy="253" r="2.5" fill="#fff"/>
<!-- Blush -->
<ellipse cx="473" cy="275" rx="7" ry="4" fill="#ff9ec4" opacity="0.6"/>
<ellipse cx="547" cy="275" rx="7" ry="4" fill="#ff9ec4" opacity="0.6"/>
<!-- Nose -->
<path d="M 505 272 L 515 272 L 510 280 Z" fill="#ff9ec4"/>
<!-- Mouth (smile) -->
<path d="M 500 283 Q 510 292 520 283" fill="none" stroke="#8a5a4a" stroke-width="2" stroke-linecap="round"/>
<!-- Whiskers -->
<g stroke="#a89880" stroke-width="1.5" stroke-linecap="round" opacity="0.8">
<line x1="455" y1="268" x2="480" y2="272"/>
<line x1="455" y1="280" x2="480" y2="280"/>
<line x1="565" y1="268" x2="540" y2="272"/>
<line x1="565" y1="280" x2="540" y2="280"/>
</g>
<!-- Helmet visor reflection -->
<path d="M 470 220 Q 490 205 515 208 Q 535 212 540 225 Q 520 218 500 222 Q 485 226 470 220 Z"
fill="#7ff0ff" opacity="0.5"/>
<ellipse cx="478" cy="230" rx="8" ry="14" fill="#ffffff" opacity="0.6" transform="rotate(-25 478 230)"/>
<!-- Visor sparkle -->
<g class="visor-sparkle">
<path d="M 500 240 L 504 232 L 508 240 L 516 244 L 508 248 L 504 256 L 500 248 L 492 244 Z" fill="#ffffff"/>
</g>
<!-- Antenna on helmet -->
<line x1="510" y1="180" x2="510" y2="150" stroke="#8a84a6" stroke-width="3" stroke-linecap="round"/>
<circle class="blinker" cx="510" cy="147" r="5" fill="#ff5a8a"/>
<circle cx="510" cy="147" r="12" fill="url(#glowGrad)" opacity="0.6"/>
</g>
</g>
<!-- Subtle motion lines behind board -->
<g stroke="#7ff0ff" stroke-width="2" stroke-linecap="round" opacity="0.35">
<line x1="260" y1="560" x2="200" y2="562"/>
<line x1="250" y1="575" x2="185" y2="578"/>
<line x1="270" y1="590" x2="215" y2="592"/>
<line x1="255" y1="545" x2="210" y2="546"/>
</g>
</svg>
</div>
</body>
</html>
```