Skateboarding astronaut catOne-line
MiMo-V2.6-Flash
by Xiaomireasoning defaultClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 17 min 37 s
- Cost
- $0.0085
- Output tokens
- 37,642
- Spent thinking
- 26,336 tokens
- Speed
- 35.7 tok/s
- Console errors
- 0
- First token after
- 2.6 s
- First visible text after
- 12 min 44 s
- Prompt tokens
- 351
- Code size
- 23.7 KB
- Finish reason
- stop
- Served by
- GMICloud
- Model id
xiaomi/mimo-v2.6-flash- Reasoning sent
model default- Max output
- 131,072 tokens
- Generated
- Nov 13, 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 · 426 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:#04050c;overflow:hidden}
body{display:flex;align-items:center;justify-content:center}
.stage{width:min(100vw,160vh);aspect-ratio:1280/800}
svg{display:block;width:100%;height:100%}
.bob{animation:bob 3.6s ease-in-out infinite alternate;transform-origin:center}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.tw{animation:tw 2.4s ease-in-out infinite alternate}
.tw2{animation:tw 3.2s ease-in-out infinite alternate;animation-delay:.8s}
@keyframes tw{from{opacity:.3}to{opacity:1}}
.spin{animation:spin 6s linear infinite;transform-origin:540px 606px}
.spin2{animation:spin 6s linear infinite;transform-origin:730px 606px}
@keyframes spin{to{transform:rotate(360deg)}}
</style>
</head>
<body>
<div class="stage">
<svg viewBox="0 0 1280 800" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="An astronaut cat skateboarding on the moon">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#04050e"/>
<stop offset="0.5" stop-color="#080d1d"/>
<stop offset="0.82" stop-color="#141d38"/>
<stop offset="1" stop-color="#2b3457"/>
</linearGradient>
<radialGradient id="hglow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#6d8ce0" stop-opacity="0.5"/>
<stop offset="1" stop-color="#6d8ce0" stop-opacity="0"/>
</radialGradient>
<linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#dcd9d2"/>
<stop offset="0.3" stop-color="#bfbbb4"/>
<stop offset="1" stop-color="#89867f"/>
</linearGradient>
<radialGradient id="glass" cx="0.32" cy="0.26" r="0.78">
<stop offset="0" stop-color="#f0fdff" stop-opacity="0.5"/>
<stop offset="0.45" stop-color="#9fd8f5" stop-opacity="0.2"/>
<stop offset="1" stop-color="#16304f" stop-opacity="0.34"/>
</radialGradient>
<linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="0.55" stop-color="#eef1f7"/>
<stop offset="1" stop-color="#c0c8d9"/>
</linearGradient>
<linearGradient id="fur" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f9bd7b"/>
<stop offset="1" stop-color="#eb9146"/>
</linearGradient>
<radialGradient id="earthG" cx="0.35" cy="0.3" r="0.8">
<stop offset="0" stop-color="#79c6ff"/>
<stop offset="0.55" stop-color="#2f7fd8"/>
<stop offset="1" stop-color="#123f86"/>
</radialGradient>
<radialGradient id="wheelG" cx="0.35" cy="0.3" r="0.8">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#c7cedd"/>
</radialGradient>
<filter id="soft" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter>
<filter id="soft2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="20"/></filter>
<filter id="tiny" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="3"/></filter>
<filter id="starGlow" x="-200%" y="-200%" width="500%" height="500%"><feGaussianBlur stdDeviation="2.4"/></filter>
</defs>
<!-- ============ SKY ============ -->
<rect width="1280" height="800" fill="url(#sky)"/>
<ellipse cx="640" cy="516" rx="720" ry="96" fill="url(#hglow)"/>
<!-- stars -->
<g fill="#ffffff">
<circle cx="60" cy="72" r="2.4" class="tw"/>
<circle cx="140" cy="182" r="1.7" class="tw2"/>
<circle cx="232" cy="58" r="2.8" class="tw"/>
<circle cx="302" cy="140" r="1.6" class="tw2"/>
<circle cx="382" cy="92" r="2.2" class="tw"/>
<circle cx="452" cy="212" r="1.7" class="tw2"/>
<circle cx="524" cy="52" r="2.5" class="tw"/>
<circle cx="602" cy="132" r="1.6" class="tw2"/>
<circle cx="684" cy="66" r="2.2" class="tw"/>
<circle cx="762" cy="184" r="1.8" class="tw2"/>
<circle cx="836" cy="108" r="2.6" class="tw"/>
<circle cx="902" cy="56" r="1.7" class="tw2"/>
<circle cx="964" cy="206" r="2.3" class="tw"/>
<circle cx="1024" cy="88" r="1.6" class="tw2"/>
<circle cx="1188" cy="58" r="2.5" class="tw"/>
<circle cx="1244" cy="176" r="1.8" class="tw2"/>
<circle cx="1252" cy="312" r="2.2" class="tw"/>
<circle cx="44" cy="304" r="1.7" class="tw2"/>
<circle cx="112" cy="424" r="2.4" class="tw"/>
<circle cx="92" cy="244" r="1.6" class="tw2"/>
<circle cx="176" cy="336" r="2.1" class="tw"/>
<circle cx="344" cy="304" r="1.7" class="tw2"/>
<circle cx="414" cy="368" r="2.3" class="tw"/>
<circle cx="474" cy="124" r="1.7" class="tw2"/>
<circle cx="562" cy="266" r="2.1" class="tw"/>
<circle cx="502" cy="330" r="1.6" class="tw2"/>
<circle cx="724" cy="38" r="2.4" class="tw"/>
<circle cx="864" cy="256" r="1.8" class="tw2"/>
<circle cx="944" cy="336" r="2.2" class="tw"/>
<circle cx="1004" cy="276" r="1.6" class="tw2"/>
<circle cx="1084" cy="384" r="2.3" class="tw"/>
<circle cx="1164" cy="244" r="1.7" class="tw2"/>
<circle cx="1224" cy="424" r="2.1" class="tw"/>
<circle cx="252" cy="424" r="1.7" class="tw2"/>
<circle cx="60" cy="152" r="2.2" class="tw"/>
<circle cx="196" cy="112" r="1.6" class="tw2"/>
<circle cx="300" cy="222" r="2.4" class="tw"/>
<circle cx="1120" cy="440" r="1.7" class="tw2"/>
<circle cx="70" cy="366" r="1.6" class="tw"/>
<circle cx="820" cy="330" r="1.8" class="tw2"/>
</g>
<g stroke="#ffffff" stroke-linecap="round" fill="none">
<g class="tw"><path d="M170 74 v22 M159 85 h22" stroke-width="2.6" opacity=".9"/></g>
<g class="tw2"><path d="M986 150 v26 M973 163 h26" stroke-width="2.8" opacity=".9"/></g>
<g class="tw"><path d="M432 58 v18 M423 67 h18" stroke-width="2.2" opacity=".85"/></g>
<g class="tw2"><path d="M60 470 v16 M52 478 h16" stroke-width="2" opacity=".7"/></g>
</g>
<!-- ============ EARTH ============ -->
<g>
<circle cx="1112" cy="132" r="86" fill="#4f8fe8" opacity=".22" filter="url(#soft2)"/>
<circle cx="1112" cy="132" r="60" fill="url(#earthG)"/>
<path d="M1076,102 c14,-13 36,-9 43,6 c7,15 -6,26 -21,28 c-17,3 -33,-8 -22,-34 Z" fill="#57c98d"/>
<path d="M1124,158 c17,-9 37,0 39,15 c2,13 -15,24 -32,19 c-15,-4 -19,-26 -7,-34 Z" fill="#4fbd84"/>
<path d="M1072,150 c11,-5 22,4 20,15 c-2,11 -17,15 -26,6 c-9,-9 -4,-17 6,-21 Z" fill="#63d097"/>
<path d="M1100,80 c16,-6 32,-2 40,8 c-12,-2 -26,2 -34,8 c-6,-6 -9,-13 -6,-16 Z" fill="#ffffff" opacity=".45"/>
<path d="M1064,124 c10,-4 20,0 26,6 c-10,0 -20,4 -26,10 c-4,-6 -4,-13 0,-16 Z" fill="#ffffff" opacity=".38"/>
<path d="M1112,72 a60,60 0 0 1 0,120 a46,60 0 0 0 0,-120 Z" fill="#030b1e" opacity=".5"/>
<circle cx="1112" cy="132" r="61" fill="none" stroke="#a8dcff" stroke-width="2.4" opacity=".85"/>
</g>
<!-- ============ DISTANT RIDGE ============ -->
<path d="M0,512 L70,480 L132,500 L212,458 L282,496 L352,470 L432,504 L522,476 L592,502 L672,462 L752,500 L832,478 L912,506 L1002,470 L1082,502 L1162,466 L1232,498 L1280,480 L1280,540 L0,540 Z"
fill="#a9a6a0"/>
<path d="M0,512 L70,480 L132,500 L212,458 L282,496 L352,470 L432,504 L522,476 L592,502 L672,462 L752,500 L832,478 L912,506 L1002,470 L1082,502 L1162,466 L1232,498 L1280,480"
fill="none" stroke="#e3e0d8" stroke-width="3" opacity=".6"/>
<!-- ============ MOON SURFACE ============ -->
<path d="M0,506 C160,494 320,518 480,506 C640,494 800,520 960,506 C1080,496 1180,512 1280,502 L1280,800 L0,800 Z" fill="url(#ground)"/>
<path d="M0,506 C160,494 320,518 480,506 C640,494 800,520 960,506 C1080,496 1180,512 1280,502"
fill="none" stroke="#f2efe8" stroke-width="4" opacity=".7"/>
<!-- craters -->
<g>
<ellipse cx="200" cy="722" rx="172" ry="48" fill="#96938d"/>
<path d="M40,726 A172,48 0 0 1 356,714" fill="none" stroke="#f0ede6" stroke-width="7" opacity=".55"/>
<path d="M92,742 A124,34 0 0 0 322,736" fill="none" stroke="#6d6a65" stroke-width="9" opacity=".55"/>
<ellipse cx="1082" cy="752" rx="192" ry="54" fill="#94918b"/>
<path d="M898,758 A192,54 0 0 1 1266,742" fill="none" stroke="#f0ede6" stroke-width="8" opacity=".5"/>
<path d="M958,772 A134,38 0 0 0 1212,764" fill="none" stroke="#6d6a65" stroke-width="10" opacity=".5"/>
<ellipse cx="640" cy="806" rx="264" ry="66" fill="#8f8c86"/>
<path d="M378,800 A264,66 0 0 1 902,796" fill="none" stroke="#e9e6df" stroke-width="8" opacity=".4"/>
<ellipse cx="342" cy="636" rx="68" ry="19" fill="#a09d97"/>
<path d="M276,638 A68,19 0 0 1 408,634" fill="none" stroke="#eeeae3" stroke-width="5" opacity=".6"/>
<ellipse cx="930" cy="640" rx="76" ry="21" fill="#a09d97"/>
<path d="M856,643 A76,21 0 0 1 1004,638" fill="none" stroke="#eeeae3" stroke-width="5" opacity=".6"/>
<ellipse cx="1184" cy="616" rx="58" ry="16" fill="#a4a19b"/>
<ellipse cx="64" cy="612" rx="62" ry="17" fill="#a4a19b"/>
<ellipse cx="470" cy="588" rx="46" ry="13" fill="#a8a59f"/>
<ellipse cx="820" cy="578" rx="52" ry="14" fill="#a8a59f"/>
</g>
<!-- rocks -->
<g fill="#a7a49e" stroke="#7d7a75" stroke-width="2">
<path d="M744,730 L758,708 L782,714 L788,734 Z"/>
<path d="M866,772 L878,754 L900,760 L904,778 Z"/>
<path d="M150,672 L162,656 L182,662 L186,678 Z"/>
<path d="M1014,700 L1026,684 L1046,690 L1050,706 Z"/>
<path d="M410,756 L420,742 L438,747 L441,761 Z"/>
<path d="M1128,676 L1138,664 L1154,669 L1157,681 Z"/>
</g>
<!-- flag -->
<g>
<ellipse cx="1150" cy="660" rx="34" ry="9" fill="#6f6c67" opacity=".55"/>
<rect x="1146" y="466" width="7" height="194" rx="3.5" fill="#e9edf4"/>
<path d="M1153,470 C1184,460 1214,484 1246,472 L1246,514 C1214,526 1184,502 1153,512 Z" fill="#ff7a3d"/>
<circle cx="1178" cy="492" r="11" fill="#35c6d8"/>
<circle cx="1178" cy="492" r="4.5" fill="#0d2233"/>
</g>
<!-- ============ SPEED LINES ============ -->
<g fill="#ffffff">
<rect x="150" y="404" width="152" height="7" rx="3.5" opacity=".45"/>
<rect x="232" y="452" width="196" height="7" rx="3.5" opacity=".33"/>
<rect x="118" y="502" width="124" height="6" rx="3" opacity=".28"/>
<rect x="304" y="548" width="166" height="6" rx="3" opacity=".24"/>
<rect x="176" y="590" width="94" height="6" rx="3" opacity=".2"/>
<rect x="356" y="356" width="86" height="6" rx="3" opacity=".26"/>
</g>
<!-- ============ DUST ============ -->
<g fill="#dedad2">
<circle cx="432" cy="638" r="24" opacity=".4" filter="url(#tiny)"/>
<circle cx="380" cy="654" r="32" opacity=".33" filter="url(#soft)"/>
<circle cx="322" cy="668" r="40" opacity=".26" filter="url(#soft)"/>
<circle cx="258" cy="680" r="48" opacity=".2" filter="url(#soft2)"/>
<circle cx="196" cy="692" r="54" opacity=".14" filter="url(#soft2)"/>
</g>
<g fill="#b3b0aa">
<ellipse cx="446" cy="612" rx="9" ry="5"/>
<ellipse cx="404" cy="628" rx="7" ry="4"/>
<ellipse cx="466" cy="646" rx="6" ry="4"/>
<ellipse cx="372" cy="616" rx="5" ry="3"/>
</g>
<!-- ============ RIDER ============ -->
<g class="bob">
<g transform="translate(0,26)">
<!-- contact shadow + glow -->
<ellipse cx="652" cy="672" rx="204" ry="27" fill="#3d3a36" opacity=".38" filter="url(#soft)"/>
<ellipse cx="652" cy="644" rx="152" ry="16" fill="#4fd8ff" opacity=".16" filter="url(#soft)"/>
<g transform="rotate(-3 655 640)">
<!-- ---- TAIL ---- -->
<g>
<path d="M610,496 C566,522 514,512 502,474 C494,446 510,424 534,426"
fill="none" stroke="#a8601c" stroke-width="32" stroke-linecap="round"/>
<path d="M610,496 C566,522 514,512 502,474 C494,446 510,424 534,426"
fill="none" stroke="url(#fur)" stroke-width="23" stroke-linecap="round"/>
<path d="M610,496 C566,522 514,512 502,474 C494,446 510,424 534,426"
fill="none" stroke="#c96f26" stroke-width="23" stroke-dasharray="12 34" opacity=".85"/>
</g>
<!-- ---- BACKPACK ---- -->
<g>
<rect x="582" y="388" width="30" height="16" rx="7" fill="#c9d1e0" stroke="#98a1b4" stroke-width="2"/>
<rect x="566" y="400" width="56" height="102" rx="18" fill="url(#suit)" stroke="#98a1b4" stroke-width="2.5"/>
<rect x="566" y="434" width="56" height="16" fill="#ff7a3d"/>
<rect x="566" y="468" width="56" height="6" fill="#35c6d8" opacity=".8"/>
<circle cx="566" cy="492" r="12" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>
<rect x="574" y="406" width="14" height="74" rx="7" fill="#ffffff" opacity=".55"/>
</g>
<!-- ---- BACK ARM ---- -->
<g>
<path d="M616,414 C584,400 554,378 534,364" fill="none" stroke="#98a1b4" stroke-width="40" stroke-linecap="round"/>
<path d="M616,414 C584,400 554,378 534,364" fill="none" stroke="url(#suit)" stroke-width="32" stroke-linecap="round"/>
<circle cx="542" cy="370" r="18" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>
<circle cx="516" cy="350" r="25" fill="#ff7a3d" stroke="#b85a1f" stroke-width="3.5"/>
<path d="M500,344 c8,-8 20,-10 30,-6" fill="none" stroke="#ffd0ae" stroke-width="4" stroke-linecap="round" opacity=".8"/>
</g>
<!-- ---- LEGS ---- -->
<g stroke-linecap="round" stroke-linejoin="round">
<path d="M626,486 L598,516 L608,542" fill="none" stroke="#98a1b4" stroke-width="44"/>
<path d="M626,486 L598,516 L608,542" fill="none" stroke="url(#suit)" stroke-width="36"/>
<path d="M692,486 L728,512 L720,540" fill="none" stroke="#98a1b4" stroke-width="44"/>
<path d="M692,486 L728,512 L720,540" fill="none" stroke="url(#suit)" stroke-width="36"/>
<path d="M622,504 L604,516" fill="none" stroke="#35c6d8" stroke-width="12"/>
<path d="M716,502 L728,512" fill="none" stroke="#ff7a3d" stroke-width="12"/>
</g>
<!-- ---- BOOTS ---- -->
<g stroke="#98a1b4" stroke-width="2.5">
<rect x="574" y="528" width="66" height="32" rx="14" fill="url(#suit)"/>
<rect x="572" y="552" width="70" height="13" rx="6.5" fill="#ff7a3d" stroke="#b85a1f"/>
<rect x="688" y="524" width="72" height="32" rx="14" fill="url(#suit)"/>
<rect x="686" y="548" width="76" height="13" rx="6.5" fill="#ff7a3d" stroke="#b85a1f"/>
</g>
<g fill="#2b3552">
<circle cx="596" cy="540" r="5"/><circle cx="620" cy="540" r="5"/>
<circle cx="710" cy="536" r="5"/><circle cx="736" cy="536" r="5"/>
</g>
<!-- ---- TORSO ---- -->
<g>
<path d="M606,404 C594,436 592,468 600,496 L716,496 C724,468 722,436 710,404 C690,394 626,394 606,404 Z"
fill="url(#suit)" stroke="#98a1b4" stroke-width="3"/>
<circle cx="612" cy="414" r="25" fill="url(#suit)" stroke="#98a1b4" stroke-width="3"/>
<circle cx="706" cy="414" r="25" fill="url(#suit)" stroke="#98a1b4" stroke-width="3"/>
<rect x="612" y="394" width="96" height="18" rx="9" fill="#dfe4ee" stroke="#98a1b4" stroke-width="2.5"/>
<!-- belt -->
<rect x="598" y="482" width="120" height="22" rx="9" fill="#2b3552"/>
<rect x="644" y="485" width="28" height="16" rx="5" fill="#ff7a3d"/>
<rect x="604" y="487" width="10" height="12" rx="4" fill="#35c6d8"/>
<!-- chest panel -->
<rect x="628" y="424" width="76" height="48" rx="11" fill="#27324e" stroke="#8f98ab" stroke-width="2.5"/>
<rect x="636" y="432" width="36" height="20" rx="5" fill="#0d2a3c"/>
<path d="M641,446 l6,-8 l6,6 l7,-10" fill="none" stroke="#35c6d8" stroke-width="3" stroke-linecap="round"/>
<circle cx="690" cy="440" r="7" fill="#ff7a3d"/>
<circle cx="690" cy="460" r="7" fill="#35c6d8"/>
<circle cx="646" cy="464" r="6" fill="#ffd166"/>
<rect x="660" y="458" width="20" height="10" rx="4" fill="#4a5b82"/>
<path d="M646,478 C664,474 686,474 700,478" fill="none" stroke="#c6cddb" stroke-width="3" opacity=".7"/>
</g>
<!-- ---- FRONT ARM ---- -->
<g>
<path d="M704,416 C740,428 774,446 798,462" fill="none" stroke="#98a1b4" stroke-width="40" stroke-linecap="round"/>
<path d="M704,416 C740,428 774,446 798,462" fill="none" stroke="url(#suit)" stroke-width="32" stroke-linecap="round"/>
<circle cx="790" cy="456" r="18" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>
<circle cx="816" cy="472" r="25" fill="#ff7a3d" stroke="#b85a1f" stroke-width="3.5"/>
<path d="M804,462 c9,-6 20,-6 28,-1" fill="none" stroke="#ffd0ae" stroke-width="4" stroke-linecap="round" opacity=".8"/>
</g>
<!-- ---- NECK RING ---- -->
<rect x="606" y="378" width="100" height="32" rx="14" fill="#dfe4ee" stroke="#98a1b4" stroke-width="3"/>
<rect x="606" y="392" width="100" height="7" fill="#35c6d8" opacity=".85"/>
<!-- ---- HELMET ---- -->
<g>
<circle cx="655" cy="292" r="97" fill="#e7ecf5" stroke="#8f98ab" stroke-width="3.5"/>
<circle cx="655" cy="292" r="90" fill="url(#glass)"/>
<circle cx="655" cy="292" r="90" fill="none" stroke="#0b1730" stroke-width="7" opacity=".22"/>
<circle cx="655" cy="292" r="90" fill="none" stroke="#ffffff" stroke-width="4.5" opacity=".9"/>
<!-- ears -->
<path d="M612,272 L610,224 L652,248 Z" fill="url(#fur)" stroke="#c97526" stroke-width="3" stroke-linejoin="round"/>
<path d="M698,272 L700,224 L658,248 Z" fill="url(#fur)" stroke="#c97526" stroke-width="3" stroke-linejoin="round"/>
<path d="M616,264 L614,236 L642,252 Z" fill="#ffb3c1"/>
<path d="M694,264 L696,236 L668,252 Z" fill="#ffb3c1"/>
<!-- head -->
<ellipse cx="655" cy="302" rx="56" ry="47" fill="url(#fur)"/>
<g stroke="#d9762b" stroke-width="5" stroke-linecap="round" fill="none" opacity=".95">
<path d="M640,276 C642,266 644,261 646,257"/>
<path d="M655,272 C655,264 655,259 655,255"/>
<path d="M670,276 C668,266 666,261 664,257"/>
</g>
<!-- blush -->
<ellipse cx="616" cy="322" rx="12" ry="6.5" fill="#ff8fa6" opacity=".55"/>
<ellipse cx="694" cy="322" rx="12" ry="6.5" fill="#ff8fa6" opacity=".55"/>
<!-- eyes -->
<g>
<ellipse cx="634" cy="300" rx="14" ry="15.5" fill="#ffffff"/>
<ellipse cx="676" cy="300" rx="14" ry="15.5" fill="#ffffff"/>
<ellipse cx="634" cy="300" rx="12.5" ry="14" fill="#9fe87a"/>
<ellipse cx="676" cy="300" rx="12.5" ry="14" fill="#9fe87a"/>
<ellipse cx="634" cy="300" rx="4.6" ry="13" fill="#14211a"/>
<ellipse cx="676" cy="300" rx="4.6" ry="13" fill="#14211a"/>
<circle cx="630" cy="294" r="3.4" fill="#ffffff"/>
<circle cx="672" cy="294" r="3.4" fill="#ffffff"/>
<path d="M620,288 c6,-7 16,-9 24,-6" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity=".9"/>
<path d="M662,288 c6,-7 16,-9 24,-6" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity=".9"/>
</g>
<!-- muzzle -->
<ellipse cx="655" cy="327" rx="33" ry="20" fill="#ffe9d4"/>
<path d="M646,315 L664,315 L655,326 Z" fill="#f4789a" stroke="#d85f83" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M655,326 C655,335 648,340 641,336" fill="none" stroke="#c97526" stroke-width="3.4" stroke-linecap="round"/>
<path d="M655,326 C655,335 662,340 669,336" fill="none" stroke="#c97526" stroke-width="3.4" stroke-linecap="round"/>
<!-- whiskers -->
<g stroke="#ffffff" stroke-width="2.6" fill="none" stroke-linecap="round" opacity=".9">
<path d="M634,316 C616,310 600,306 586,306"/>
<path d="M634,324 C616,324 600,326 584,330"/>
<path d="M635,332 C620,338 606,344 594,352"/>
<path d="M676,316 C694,310 710,306 724,306"/>
<path d="M676,324 C694,324 710,326 726,330"/>
<path d="M675,332 C690,338 704,344 716,352"/>
</g>
<!-- visor highlights -->
<ellipse cx="622" cy="248" rx="38" ry="21" transform="rotate(-34 622 248)" fill="#ffffff" opacity=".32" filter="url(#soft)"/>
<path d="M600,272 A70,70 0 0 1 656,230" fill="none" stroke="#ffffff" stroke-width="9" stroke-linecap="round" opacity=".72" filter="url(#tiny)"/>
<path d="M714,338 A70,70 0 0 0 736,300" fill="none" stroke="#bfe9ff" stroke-width="7" stroke-linecap="round" opacity=".45" filter="url(#tiny)"/>
<circle cx="742" cy="336" r="9" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>
<circle cx="568" cy="336" r="9" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>
</g>
</g>
<!-- ---- SKATEBOARD ---- -->
<g transform="rotate(-3 655 640)">
<!-- glow under deck -->
<ellipse cx="652" cy="596" rx="176" ry="14" fill="#4fd8ff" opacity=".3" filter="url(#soft)"/>
<!-- trucks -->
<g fill="#aeb7c7" stroke="#6f7889" stroke-width="2.5">
<path d="M524,583 L556,583 L550,596 L530,596 Z"/>
<path d="M714,583 L746,583 L740,596 L720,596 Z"/>
</g>
<rect x="520" y="578" width="40" height="10" rx="4" fill="#8d97a9"/>
<rect x="710" y="578" width="40" height="10" rx="4" fill="#8d97a9"/>
<!-- wheels -->
<g>
<circle cx="540" cy="606" r="18" fill="url(#wheelG)" stroke="#7d8698" stroke-width="3"/>
<circle class="spin" cx="540" cy="606" r="7.5" fill="#35c6d8" stroke="#1f7f8d" stroke-width="2.5"/>
<path class="spin" d="M540,592 v6 M540,614 v6 M526,606 h6 M548,606 h6" stroke="#7d8698" stroke-width="3" stroke-linecap="round"/>
<circle cx="730" cy="606" r="18" fill="url(#wheelG)" stroke="#7d8698" stroke-width="3"/>
<circle class="spin2" cx="730" cy="606" r="7.5" fill="#35c6d8" stroke="#1f7f8d" stroke-width="2.5"/>
<path class="spin2" d="M730,592 v6 M730,614 v6 M716,606 h6 M738,606 h6" stroke="#7d8698" stroke-width="3" stroke-linecap="round"/>
</g>
<!-- deck -->
<path d="M474,556 L792,556 C806,556 814,562 812,570 L810,574 C808,582 798,586 788,583 L480,583 C470,586 460,582 458,574 L456,570 C454,562 462,556 474,556 Z"
fill="#2c3149" stroke="#12162a" stroke-width="3.5" stroke-linejoin="round"/>
<path d="M474,556 L792,556 C806,556 814,560 812,566 L460,566 C458,560 462,556 474,556 Z" fill="#171b2e"/>
<g stroke="#4a5273" stroke-width="2" opacity=".9">
<path d="M500,560 v6 M524,560 v6 M548,560 v6 M572,560 v6 M596,560 v6 M620,560 v6 M644,560 v6 M668,560 v6 M692,560 v6 M716,560 v6 M740,560 v6 M764,560 v6"/>
</g>
<path d="M466,572 L802,572" stroke="#ff7a3d" stroke-width="6" stroke-linecap="round"/>
<path d="M500,579 L768,579" stroke="#35c6d8" stroke-width="3.5" stroke-linecap="round" opacity=".85"/>
<path d="M508,556 C560,550 720,550 770,556" fill="none" stroke="#ffffff" stroke-width="3" opacity=".2"/>
</g>
</g>
</g>
<!-- ============ LABEL ============ -->
<g font-family="ui-sans-serif,system-ui,'Segoe UI',Helvetica,Arial,sans-serif">
<rect x="56" y="34" width="58" height="6" rx="3" fill="#ff7a3d"/>
<text x="56" y="76" fill="#ffffff" font-size="27" font-weight="700" letter-spacing="8">LUNAR SK8</text>
<text x="58" y="104" fill="#8fb6ff" font-size="13" font-weight="600" letter-spacing="4.6" opacity=".9">EVA 07 · GRAVITY 1/6 · CAT-ASTRONAUT</text>
</g>
<g font-family="ui-sans-serif,system-ui,'Segoe UI',Helvetica,Arial,sans-serif" text-anchor="end">
<text x="1224" y="764" fill="#ffffff" font-size="13" font-weight="600" letter-spacing="4" opacity=".65">SEA OF TRANQUILITY</text>
</g>
</svg>
</div>
</body>
</html>Reasoning trace (26,336 tokens)
The user wants an SVG of an astronaut cat skateboarding on the moon. Let me create a detailed, beautiful SVG scene.
I'll make a full SVG illustration: moon surface, Earth in black starry sky, astronaut cat in a spacesuit helmet riding a skateboard, motion, craters, etc.
Let me build it carefully with good composition at 1280x800 viewBox (or 1200x800).
Design:
- Black/dark space background with gradient, stars
- Earth partially visible top-left/right
- Distant moon hills/craters horizon
- Foreground moon surface with craters and dust
- Cat astronaut: white spacesuit with orange trim, helmet with glass visor, cat face inside (orange tabby with stripes, ears poking... actually ears inside helmet), tail out? Tail could be outside suit — cute. Better: cat ears visible inside helmet, spacesuit body, gloves, boots, tail curling out from the suit back.
- Skateboard: deck, wheels, trucks, with glow.
- Motion lines, dust particles kicked up.
Let's write coordinates.
Canvas 1280x800.
Sky: 0-560. Horizon around y=520-560. Ground below.
Cat position: center around x=640, y=380. Riding board at y~560.
Let me lay out:
- Board deck from x=520 to x=780, y ≈ 560, slight tilt.
- Cat body above board: hips at y≈500, torso up to y≈360, head center y≈300.
Let me construct the cat carefully.
Cat astronaut body (facing right, moving right):
- Torso: rounded rect-ish shape from y380 to 500, centered x 640, width ~110.
- Backpack (life support) behind at left: x 560-600, y 390-470.
- Legs: front leg bent forward to board, back leg pushing.
- Arms: one forward out for balance, one back.
Helmet: circle center (640, 310) r 78. Visor inside: cat face visible.
Cat face: orange/cream cat with green eyes, pink nose, whiskers, stripes on forehead. Ears inside helmet — draw ears on top of head inside helmet circle.
Actually a classic: helmet is a sphere with glass; cat head inside with ears.
Let me define head: center (640, 312), head shape ellipse rx 52 ry 46. Ears triangles at top: left ear points (598,285)→(588,238)→(634,262); right ear (646,258)→(692,240)→(684,288).
Eyes: green almond at (618,308) and (662,308). Nose triangle at (640,330). Mouth curves. Whiskers.
Helmet: circle r 80 at (640,308), fill glass with gradient, stroke white rim, plus neck ring at bottom (rect from y 375 to 395, width 70).
Visor highlight: arc on top-left.
Suit body: white with orange/teal accents. Chest control panel with buttons.
Let's do a slight lean: whole group rotated -8deg around board center for dynamism? Rotating may complicate. I'll rotate group by -6 degrees around (650,560).
Hmm, but board tilted means cat should be tilted. Let's make board tilted: left end y=585, right end y=545 (nose up to the right). So board rising to the right — cat leaning back slightly. Rotate cat group by -8° about (650, 540)? Rotating -8 means counterclockwise, tilting head to left. If board rises to the right, the cat leans back (to the left), so head goes left = counterclockwise = negative rotation in SVG (SVG positive rotation is clockwise). So rotate(-7) about a pivot near the feet.
Let's just build it and use transform="rotate(-7 645 545)".
Actually simpler: build the board horizontal-ish with slight tilt and put cat with a slight lean. Let's do the rotation.
Board:
- Deck: path with kicked nose and tail. Use path: M 505,575 Q 495,562 508,552 L 770,540 Q 790,540 792,556 L 790,566 Q 786,578 772,576 L 520,586 Q 508,586 505,575 Z — messy. Let's do simpler: a long rounded rect with upturned ends drawn as path.
Deck path (in local coords, then rotate slightly):
M 500,560C 486,556 482,544 494,538 (tail kick up-left)
L 540,532
C 620,524 700,524 760,530
C 786,533 796,542 786,552 (nose)
L 770,566
C 762,574 752,574 744,568
L 520,566
C 512,570 504,568 500,560 Z
Hmm that gives a deck ~40px thick. Fine, with a top grip layer.
Actually let me simplify: deck as a shape between two curves:
Top edge: M 495,548 C 495,536 505,530 520,529 L 762,529 C 778,530 788,537 786,548
Bottom edge back: L 786,562 C 786,572 776,578 762,577 L 520,577 C 505,576 495,570 495,558 Z
That's a slab. Add kicks by curving ends. Good enough with rounded ends.
Wheels: two wheels at x=545 and x=735, y=592, r=17, white/blue glow. Trucks: small rects.
But wait — the board should sit on the ground. Ground line around y=620 for contact? Wheels bottom at y=609. Ground surface at y=612. OK.
Then board deck top at y~530, cat feet at y~530.
Cat standing on board: feet at y≈525, head at y≈300. That's 225px tall. Reasonable.
Let me redo cat geometry with feet at 525:
- Boots: y 500-530.
- Legs: hips y≈440.
- Torso:360-450.
- Shoulders y≈370.
- Helmet center y≈305, r 78 → top at 227.
Head center 305. Total height ~ 227 to 530 = 303px. Board length 290. Reasonable proportions (cat slightly taller than board length — fine).
Hmm, maybe make cat a bit smaller. Let's keep; it's a hero illustration.
Actually let me shift: make board bigger/longer: x 470 to 820 (350 long). Wheels at 530 and 760.
Board deck top y≈ 535. Cat feet at 535.
Let's finalize:
- Ground contact y = 615 (wheel bottom).
- Wheels r 18, centers y = 597.
- Trucks from deck bottom y577 to 585.
- Deck: y 528 to 577.
Cat feet bottom at 528.
Cat parts (before rotation):
- Back foot (left): boot at x 575-625, y 495-530, angled.
- Front foot (right): boot at x 665-730, y 495-528, more horizontal (on board).
- Legs: knees bent. Back leg: hip (605,445) → knee (575,478) → ankle (598,505). Front leg: hip (675,445) → knee (705,470) → ankle (700,505).
Actually for a skateboard stance, both feet on board, sideways. Let's do: feet spread apart on board, body facing slightly toward viewer/right, knees bent, arms out.
- Back foot at x 570-620, front foot at x 690-745.
Torso: leaning slightly forward-right. Center x 655, from y 455 (hips) to 365 (shoulders). Width ~110.
Arms:
- Right arm (viewer left, the cat's right? whatever) extends backward-left: shoulder (615,380) → elbow (565,355) → hand (525,325). Glove at (518,318).
- Other arm extends forward-right: shoulder (700,380) → elbow (745,415) → hand (785,440)? That's low. Better: forward arm raised: shoulder (700,378) → elbow (752,362) → hand (798,338).
Backpack behind: rect x 585-630? It should be on the back = left side since moving right. Back is at left. Torso left edge ~600. Backpack: x 565-605, y 375-455, rounded, white with orange stripe, plus a small tank.
Helmet center: (655, 300), r 80 → spans x 575-735, y 220-380. Neck ring at y 370-390.
Head inside: center (655,300).
Tail: comes out from behind at hips, curving left and up: from (600,450) curve to (520,430) to (505,380) — orange striped tail. Nice touch.
Now the ground:
Horizon at y≈540? But the board bottom is 615. Ground needs to be below horizon. Let's put horizon at y=520 in the far distance, and the near ground fills from ~500 to 800. The board at y 615 sits on ground. Good.
Wait but horizon at 520 and board deck at 528 — the board would overlap horizon. That's fine visually (ground is a big area).
Let's set: sky0→500. Distant mountains/hills from y 440-510. Ground plane from y 495 → 800.
Craters on ground: ellipses at (200,660) rx 90 ry 30, (1050,700) rx 120 ry 40, (400,760) etc. Plus small rocks.
Earth: circle at (1090,140) r 62, blue with green landmasses, soft glow.
Stars: many small circles + a few 4-point sparkles.
Also add: flag? Maybe a small planted flag at right for context. Could add a lunar module in distance? Keep it focused but rich: add distant flag and rocks.
Colors:
- Sky: deep #05070f → #0b1226 with slight purple near horizon.
- Moon ground: #c9c6bf light gray with darker craters, lit from right.
- Suit: #f2f4f8 white, shadows #b9c0cf, accents #ff7a3d orange and #35c6d8 teal.
- Cat fur: #f2a65a orange tabby with #d97b2b stripes, cream muzzle #ffe9d2, eyes #7ee08a green.
- Visor: glass with cyan-white highlight, semi-transparent so face shows.
Let me add motion: dust particles behind board, speed lines, and a subtle glow under board.
Also maybe add "MOON" title text? Not necessary. Maybe a small badge "LUNAR SK8". Could be nice but user just asked for drawing. I'll add a small tasteful label maybe. I'll skip heavy text but a tiny caption is fine. Actually a subtle title could be nice: "OUTER ORBIT" small caps in corner. I'll add a small mission patch style text. Keep minimal.
Let's write the SVG.
I'll write as the full HTML file with inline SVG (since required one html code block).
Let me write code.
Stars: I'll generate a bunch manually — maybe 40. Or use JS to generate? Simpler: write a JS that injects stars on load. But screenshot at 3s, JS runs fine. But requirement "meaningful visible on first paint" — JS runs immediately. Still, safer to hardcode a decent number. I'll hardcode ~35 stars.
Let me write.
Details for cat face inside helmet:
Head group (center 655,300):
- Head ellipse: cx 655 cy 302 rx 56 ry 50, fill orange.
- Ears: left path M 606,266 L 598,214 L 646,246 Z ; right M 700,248 L 714,214 L 706,268 Z — need them to look like cat ears. Let's do:
Left ear: M 604,268 L 594,216 L 644,244 Z, inner: M 604,262 L 600,230 L 632,248 Z (pink)
Right ear: M 706,266 L 718,216 L 668,242 Z... hmm order. Let me place ears symmetric about x=655.
Left ear tip at (606,214), base points (604,266) and (648,246).
Right ear tip at (706,214), base points (706,266) and (662,246).
Actually ears should be at top-left and top-right of head. Head top is y=252 at center. Left ear base around (610,262)-(645,240), tip (600,212). Right ear base (700,262)-(665,240), tip (710,212).
Hmm ears inside helmet r=80 centered (655,300): distance from center to tip (600,212) = sqrt(55²+88²)=sqrt(3025+7744)=104 > 80. Too big. So ears would poke out of helmet.
Options: make helmet bigger (r=95) or make ears smaller/lower. A cat with big ears in a helmet — helmet must be roomy. Let's make helmet r=92, center (655,300). Then top y=208, bottom y=392. Ear tips at y=220, x612 and 698: distance from center: dx=43, dy=80 → 91. Just inside. Tight. Let's use r=95 and tips at (614,224) & (696,224): dx41, dy 76 → 86 < 95. Good.
So helmet r=95 at (655,300): spans x 560-750, y 205-395.
Then neck ring at y 390-410, width 90. Shoulders at y ~385. Torso from 385 to 465. Hips 465. Hmm that compresses torso. Let's shift: helmet center (655,290), r=95 → bottom 385. Neck ring 385-405. Shoulders y=400. Torso 400-470. Hips 470. Legs 470-510, boots 505-530. Total torso 70px — too short relative.
Let's rethink proportions: make the cat bigger/whole scene: feet at 530, head top ~205. Body: helmet bottom 385, torso 385→475 (90px), legs 475→530 (55px). Legs short but it's a chibi cat astronaut — cute proportions work. Actually chibi style: big head, small body. That's charming. Let's embrace: helmet diameter 190, torso 90, legs 55. That's very chibi. Might look odd.
Alternative: reduce helmet to r=85 and make ears smaller/more upright so they fit: ears tips at (618,236),(692,236) with center (655,295): dx 37, dy 59 → 70 < 85. Ear height from head top (250) to tip236 =14px only. Too small.
Better approach: ears poke through the helmet? No.
Common solution: the helmet is a bubble with the cat's ears inside and the helmet is large relative to head — that's realistic (helmet must fit ears). So big helmet. Then body can be moderately sized if we make overall figure taller.
Let's scale up the whole figure: feet at 545, head center at 275, helmet r=100 → top 175. Neck ring 375-395. Torso 395-490 (95). Legs 490-545 (55). Still short legs.
Alternatively make board lower... no.
Or: lengthen legs by raising the board? Board deck top at 528 currently; if deck top at 545 and ground at 630... ground horizon would need to be lower. We have room: horizon at 520, ground to 800. Board could be at y 560-610, wheels center 630, bottom 648, ground contact 650. Then cat feet at 560. Head center at 300, helmet r 100 → top 200. Neck 400-420, torso 420-505, legs 505-560 (55). Still 55.
The issue is helmet200 tall + torso 95 + legs 55 = 350 from200 to 560... wait 560-200=360. Yes.
Proportions: head 200, body 160. That's chibi 1.25 head. Fine for a cute astronaut cat. Actually total height 360 with head 200 — very chibi. Hmm.
Alternative: don't show ears fully inside — show ears as part of head that's visible through a helmet whose top is above the ears, i.e., helmet is a wide sphere but we see the head large within. That's what we have.
Let me instead reduce the visual head size: helmet r=92, head rx 50 ry 44 with ears tips at y 232, center (655,292): distance from center to (615,232) = sqrt(1600+3600)=72 < 92. Good, ears fit with 20px clearance.
So helmet r=92, center (655,292): top 200, bottom 384.
Neck ring: y 384-404.
Shoulders y400.
Torso: 400 → 490 (90px).
Hips 490. Legs 490 → 540 (50). Boots 530-555.
Feet at 555, board deck top at 555. Board: deck y 555-600, trucks600-610, wheels center 622 r 18 → bottom 640. Ground line 640.
Horizon at ~500? Board top 555 >500 fine.
Ground region y 495-800 = 305px. OK.
Total figure: 200 → 555 = 355 tall, head 184. Legs 50+25 boot = 75. Torso 90. That's acceptable chibi.
Hmm, legs50px for a body... Let me just extend: hips at 480, torso 400-480 (80), legs 480-555 (75). Better.
Let's set: shoulders y=402, chest to hips y=485, hips to ankle y=540, boot 528-558.
Fine. Let's go with:
- Helmet center (655,292) r 92
- Neck ring y 384-404, x 610-700
- Torso: rounded shape from y 400 to y 490, width from x 598 to 715 (117 wide), leaning.
- Hips y 490
- Legs: back leg from (620,488) to knee (588,522) to ankle (600,548); front leg from (685,488) to knee (722,518) to ankle (716,546).
- Boots at (575-625, 534-562) and (690-745, 532-560).
Board deck top at 555... boots bottom 560. Slight overlap fine; board deck top y=558.
Let me set board: deck from y 558 to 604. Wheels center y 624 r 18 → bottom 642. Ground contact y642.
Hmm horizon: ground from y500 down. Board occupies 558-642. Good.
Arms:
- Left arm (back): shoulder (612,412) → elbow (566,392) → wrist (524,360); glove center (518,352) r 22.
- Right arm (front): shoulder (706,410) → elbow (752,438) → wrist (796,470)? Too low maybe. Let's do forward arm raised forward-down for balance: shoulder (706,412) → elbow (754,432) → wrist (796,458), glove at (802,464).
Hmm, or arm up waving. Balance: one arm back-up, one arm forward-down. Good.
Backpack: behind torso left: x 570-612, y 405-490, rounded rect, white, with orange band and a teal valve. Plus antenna? Add a small antenna from backpack top going up-left with a red tip.
Tail: from (600,492) curving left: C (555,510) (520,485) (518,448) then tip. Orange with dark stripes. Tail width tapering — use path with two curves.
Tail path: M 604,496 C 566,520 520,512 508,478 C 500,456 510,436 526,432 C 516,442 514,458 522,472 C 534,494 566,500 600,482 Z — approximate. I'll craft something reasonable.
Actually simpler: draw tail as a thick stroked path with round cap, stroke-width tapering not possible; use two strokes: main stroke width 22 and it's fine.
Tail: path M 606,494 C 560,516 516,504 506,468 C 500,446 514,428 532,430 with stroke #e8934a width 20 linecap round, then stripes as short strokes across.
Hmm stripes on a stroked path: draw small arcs. Could skip stripes or add 3 short dark strokes. I'll add a couple of darker stroke segments using stroke-dasharray on a duplicate path with darker color! Clever: duplicate path with stroke dark, stroke-dasharray "14 30", width 20, linecap butt. That gives stripes.
Now colors/shading: use gradients.
Let's also add glow: ellipse under board with blur filter (feGaussianBlur) in cyan.
And dust particles: circles of varying opacity trailing left.
Speed lines: horizontal rounded lines to the left of the cat.
Also add: small flag at right background, and a lunar module silhouette? Maybe a simple flag at (1120, 560) on a pole planted in ground — but horizon at 500, ground. Flag pole from y 560 up to 440, with a small orange flag. Nice.
Also Earth top right at (1120,120) r 66.
Stars.
Also a shooting star / sparkle.
Let's also include a title text bottom-left: "LUNAR SK8 —1969 & BEYOND"? Maybe small. I'll add small uppercase letterspaced text at top-left: "APOLLO… " hmm. Let's add "MEOW-ON SURFACE · EVA 07" small. Cute. I'll put it top-left in a subtle style.
Now write the SVG carefully.
Also responsive: SVG with viewBox and width 100%, height auto, preserveAspectRatio="xMidYMid meet". Container centered. On 375px wide it scales down. Good.
Add a subtle CSS background outside.
Let me now write out the code.
Star list (x,y,r,opacity): I'll write ~40.
Let me draft the SVG structure:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
html,body{margin:0;height:100%;background:#05060d;display:grid;place-items:center;overflow:hidden;font-family:...}
.wrap{width:100%;max-width:1280px;aspect-ratio:1280/800}
svg{width:100%;height:100%;display:block}
</style>
```
Careful: aspect-ratio with width 100% might exceed height on short viewports. Use `max-height:100vh` too: width:min(100vw, calc(100vh*1.6)). Let's do:
.wrap{width:min(100vw, 160vh); aspect-ratio:1280/800;}
That ensures it fits both.
Now the SVG content.
Defs:
- linearGradient skyGrad: #05060f → #0a1024 → #131a35 (horizon glow)
- radialGradient earthGlow
- radialGradient helmetGlass
- linearGradient suitGrad (white → #cfd6e4)
- linearGradient groundGrad: #b9b7b2 top → #8f8d8a bottom? Moon surface lit: lighter near horizon? Actually typically ground lighter in distance (atmosphere-less, but let's do mid gray with highlights). Use #cfcdc8 → #9a9895.
- radialGradient craterGrad
- filter softGlow (blur)
- filter shadowBlur
Let's write it.
Ground shape: path M 0,505 C 200,492 380,512 560,500 C 760,488 980,516 1280,498 L 1280,800 L 0,800 ZThen far ridge behind: path M 0,505 ... small hills above horizon: M 0,506 C 80,486 140,478 220,492 C 300,504 340,470 430,478 C 520,486 560,500 640,494 ... Let's add a couple of distant mountain silhouettes in a slightly darker gray (#a8a6a2) above the horizon line.
Distant mountains path: M 0,507 L 90,470 L 150,492 L 250,452 L 330,494 L 420,478 L 520,500 L 620,470 L 700,496 L 800,462 L 880,498 L 980,474 L 1080,502 L 1180,466 L 1280,500 L 1280,520 L 0,520 Z — jagged. Then horizon ground overlaps from500.
Hmm ordering: sky, mountains, ground (ground drawn from y~500 down covering mountain bases). Good.
Craters on ground:
- big ellipse cx 180 cy 690 rx 150 ry 48, fill darker #8b8986 with inner highlight arc.
- ellipse cx 1080 cy 730 rx 180 ry 56
- ellipse cx 640 cy 780 rx 240 ry 60 (partially offscreen bottom)
- small ones: cx 950 cy 590 rx 60 ry 18; cx 380 cy 585 rx 55 ry 16; cx 780 cy 560? that's near board. Maybe skip.
Add rocks: small polygons.
Board shadow: ellipse cx 655 cy 648 rx 170 ry 22 fill rgba dark.
Now the cat assembly group with transform rotate(-6, 655, 540)? Rotating about feet pivot. Feet at y~550. Board is horizontal in my design; a tilted board would be nicer. Let's tilt board: rotate(-4) about (655,620) so right side goes up. And rotate cat by -4 about (655,540). Then wheels must touch ground — rotating wheels means contact point shifts. Simpler: keep everything level but add dynamic pose (bent knees, arms out, dust, speed lines) — plenty of energy. I'll keep board horizontal for correctness, maybe tilt slightly by drawing the deck path with an upward right end.
I'll draw deck with slight upward curve at both ends (kicks) which reads as skateboard. Good.
Actually, a small overall tilt looks great and wheels slightly off ground is barely noticeable if tilt is small (~3°). Let's do rotate(-3) on the whole board+cat group about (655,640). Wheel contact: left wheel at (530,624) → rotating -3° about (655,640): dx=-125, dy=-16. New: x' = 655 + (-125*cos3 + 16*sin3)... for rotate(-3): x' = cx + dx*cos(-3) - dy*sin(-3) = 655 + (-125)(0.9986) - (-16)(-0.0523) = 655 -124.8 -0.84 = 529.4; y' = cy + dx*sin(-3)+dy*cos(-3) = 640 + (-125)(-0.0523) + (-16)(0.9986) = 640 + 6.54 - 15.98 = 630.6. So bottom at 648.6. Right wheel (760,624): dx=105,dy=-16 → y' = 640 + 105*(-0.0523) -15.98 = 640 -5.49 -15.98=618.5, bottom 636.5. So right wheel floats 12px above ground at 648. Hmm visible gap.
Instead rotate about a pivot so both wheels near ground: just make ground contact a soft shadow anyway. A 12px gap with a shadow below looks like a jump — could be fine, actually! A skateboard cat catching air is cool. But then the shadow should be below. Let's just embrace: slight airborne with dust. Or reduce tilt to -1.5°.
Simpler: keep everything level, no global rotation. Pose carries the energy. Decision: level board, dynamic pose, dust + speed lines.
Hmm, but a perfectly horizontal board looks static. Compromise: tilt -3° and place shadow accordingly, plus add a small "pop" — it's fine and looks intentional. Actually with -3° the left wheel touches and right is up = a manual/nose-up. That's dynamic and plausible. I'll do it: rotate(-3 655 640) on group. Left wheel bottom at 648.6, right at 636.5. Ground line ~650. Shadow ellipse at cy 655. Good — reads as riding up over a bump.
Actually let's simplify and just do it.
Let me now write all elements.
Cat suit details:
- Torso: path rounded. I'll use a path:
M 604,414 C 596,440 596,470 604,492 L 712,492 C 720,470 720,440 712,414 Z with rx via curves. Plus chest area.
Let me define torso as:
`<path d="M 606,406 C 594,436 592,468 600,494 L 716,494 C 724,468 722,436 710,406 C 692,396 628,396 606,406 Z" fill="url(#suit)" stroke="#8f98ab" stroke-width="2"/>`
Shoulders: add shoulder pads circles at (612,414) r 22 and (706,414) r 22.
Chest control panel: rect x 626 y 428 w 74 h 46 rx 8 fill #2a3550, with buttons: circles teal, orange, and a small screen.
Belt: rect x 600 y 486 w 116 h 18 rx 6 fill #ff7a3d? Maybe teal belt.
Legs: draw as thick stroked paths with round caps:
- Back leg: M 622,488 L 596,522 L 606,548 stroke #e9edf4 width 34 linecap round linejoin round. Add a darker outline: same path stroke #8f98ab width 40 underneath.
- Front leg: M 690,488 L 726,520 L 718,548 similarly.
Boots: rounded shapes:
- Back boot: path around (580-632, 532-564): `<path d="M 578,566 C 572,548 582,532 602,532 L 618,532 C 630,532 634,544 630,556 L 628,566 Z"` eh. Simpler: rounded rect with toe: `<rect x="574" y="534" width="60" height="32" rx="12" fill="#e9edf4" stroke="#8f98ab" stroke-width="2"/>` plus sole `<rect x="572" y="556" width="64" height="12" rx="6" fill="#ff7a3d"/>`.
- Front boot: rect x 688 y 530 w 66 h 32 rx 12, sole rect x 686 y 552 w 70 h 12 rx 6 fill #35c6d8? Let's use orange for both soles with teal accents elsewhere. Or front teal, back orange — inconsistent. Use orange soles both.
Arms: stroked paths width 30:
- Back arm: M 614,414 C 580,398 552,378 528,360 stroke width 30 white, outline.
- Glove: circle at (514,350) r 24 fill #ff7a3d (orange gloves) with stroke.
- Front arm: M 706,416 C 740,430 772,446 796,462 width 30.
- Glove: circle (806,468) r 24 orange.
Hmm gloves orange might clash with soles; it's fine — accent color.
Actually make gloves and boot soles the same accent (orange), and teal for small details.
Helmet:
- Outer: circle r 92 fill url(#glass) stroke #ffffff stroke-width 7? Plus a rim ring: circle r 92 fill none stroke #dfe6f2 width 8, then inner circle r 86 fill glass.
- Visor reflection: path arc highlight: `<path d="M 600,232 A 74,74 0 0 1 700,222" stroke="#ffffff" opacity=".55" stroke-width="10" fill="none" stroke-linecap="round"/>` and a smaller one.
- Glass gradient: radial from rgba(180,230,255,.35) to rgba(60,90,140,.15).
- Since face must show, use semi-transparent fill.
Neck ring: rect x 606 y 378 w 100 h 30 rx 12 fill #dfe4ee stroke #98a1b4; plus teal stripe.
Wait helmet bottom is 292+92=384. Ring at y 376-406 overlaps. Torso top at 406. Good.
Backpack: behind torso — draw before torso: rounded rect x 566 y 402 w 54 h 96 rx 16 fill #dfe4ee stroke #98a1b4; orange band rect x 566 y 436 w 54 h 14; small tank circle. Antenna: line from (576,402) to (556,352) stroke #cfd6e4 width 5, tip circle r 6 fill #ff5f5f.
Hmm antenna may collide with back arm (arm passes through 614,414 → 528,360). Antenna from576,402 to 556,352 would cross the arm. Move antenna to backpack top-right? Backpack top at402, x 566-620. Antenna from (616,402) up to (632,352)? That crosses helmet? Helmet spans x 563-747 at y 292 center; at y=352, half-width = sqrt(92²-60²)=sqrt(8464-3600)=69.7 → x 585-725. So x=632 at y=352 is inside helmet. Bad.
Put antenna on backpack going left-down: from (570,430) to (536,408)? crosses arm again (arm from614,414 to 528,360 passes near 560,388). Hmm.
Alternative: skip antenna, add a small handle/valve on backpack visible at left edge (x<566): circle at (560,440) r 10 teal.
But backpack left edge 566 and arm passes over it — arm drawn after, fine.
Actually the back arm starts at shoulder (614,414) and goes up-left through (552,378) — it passes over the backpack top. Fine, arm in front.
Tail: drawn behind body (before torso) so it emerges from behind. From hip area (606,490) going left and up. Path: M 608,494 C 566,522 514,514 500,476 C 490,448 506,424 528,424.
Stroke: outline (dark #b5701f, width 30) then main (#f0a45c, width 22), then stripes with dasharray.
Hmm but the tail would overlap the board region? Board spans x 470-820 at y 558-604. Tail at y 424-520, x 490-610. Above board. OK. But tail bottom y522 near board top 558 — fine.
Actually with rotate(-3) applied to the whole group, coordinates shift a bit. Fine.
Face details (center 655,292):
- Head: ellipse cx 655 cy 300 rx 54 ry 46 fill #f4a75c.
- Cheeks/muzzle: ellipse cx 655 cy 318 rx 30 ry 20 fill #ffe9d4.
- Ears: left triangle path M 612,268 L 604,228 L 644,250 Z fill #f4a75c, inner M 614,262 L 610,238 L 634,252 Z fill #ffb3c1. Right: M 698,268 L 706,228 L 666,250 Z, inner M 696,262 L 700,238 L 676,252 Z.
Check ear tips inside helmet: (604,228) distance from (655,292): dx51, dy 64 → 82 < 92 ✓ (with 10px clearance, ok).
(706,228): same ✓.
- Eyes: two ellipses rx 13 ry 15 at (636,298) and (676,298) fill #fff? Actually cat eyes: green iris with black vertical pupil.
Eye whites: ellipse rx 14 ry 15 fill #ffffff? Cat eyes typically fully colored. Let's do: ellipse rx 14 ry 15 fill #9fe87a (green), inner ellipse rx 5 ry 13 fill #14211a (slit pupil), plus small white highlight circle r 3.5 at offset.
- Nose: path triangle at (655,318): M 647,314 L 663,314 L 655,323 Z fill #f4789a.
- Mouth: M 655,323 C 655,331 648,334 642,330 and mirror.
- Whiskers: 3 lines each side from muzzle outward, stroke #fff opacity .85 width 2.5. Left: from (632,318) to (588,308); (632,324) to (586,326); (633,330) to (590,344). Right mirrored.
But whiskers extend to x 586 — head rx 54 → head spans 601-709. Whiskers outside head, that's normal for cats. Inside helmet (r 92 spans 563-747) ✓.
- Forehead stripes: dark orange arcs: M 636,266 C 640,258 644,254 648,252 ... let's do 3 short strokes:
`M 645,262 L 655,250` etc. Use path "M 638,268 C 642,258 646,252 650,248" stroke #d9762b width 5 round.
Stripes: three: at x offsets -14, 0, +14.
Left: M 640,270 C 642,260 644,254 646,249
Mid: M 655,266 C 655,258 655,252 655,247
Right: M 670,270 C 668,260 666,254 664,249
Color #d9762b, width 5, linecap round.
- Blush: two ellipses pink opacity .5 at (624,318) and (686,318) rx 10 ry 6.
Ears should be behind head? Draw ears first, then head ellipse would cover bases. Order: ears, then head, then face. But ear inner pink drawn after head would be covered. So: ear outer, head ellipse, ear inner (positioned so visible above head). Head top at y=254 (cy 300, ry 46). Ear bases at y 250-268 which is partly above head top. Ear inner at y 238-262, mostly above head top (254) so visible. OK: draw ear outer, head, then ear inner. Ear outer bottom might be hidden behind head — good.
But ear outer tips at y=228 and head top 254 — ears stick up 26px. Ear visible height26px + the part above head. Decent.
Hmm, ears look small. Let's push tips to y=216: distance from center (655,292) to (604,216): dx51, dy76 → 91.5 — just at r=92 boundary, would touch helmet. Use tip (606,220): dx 49, dy 72 → 87. OK with 5px clearance — tight but acceptable (ears touching helmet glass is realistic!).
Let's use tips at (606,219) and (704,219). distance = sqrt(49²+73²)=sqrt(2401+5329)=87.9 < 92 ✓.
Ear geometry: left ear: M 610,270 L 606,219 L 650,246 Z. Inner: M 613,262 L 610,232 L 640,248 Z.
Right ear: M 700,270 L 704,219 L 660,246 Z. Inner: M 697,262 L 700,232 L 670,248 Z.
Head ellipse cy 300 ry 46 → top 254. Ear base y 270 (below top) so bases hidden behind head partially. Ear inner from y 232 to 262: visible portion above 254 → most of it. Good.
Now the chest: also add a small cat-face mission badge? Cute: a tiny circle badge on chest with a paw. Maybe just buttons.
Add a name tag? skip.
Also add a little fish-shaped keychain? Cute but maybe clutter.
Let's add a small flag/pennant? no.
Board details:
Deck path (before rotation):
```
M 486,566
C 476,556 478,542 492,540
L 780,536
C 796,536 804,546 798,558
L 792,574
C 786,586 772,590 760,586
L 502,584
C 488,584 482,576 486,566 Z
```
Hmm that's a slab536-586 (50 thick) — thick for a deck. Skateboard deck ~10px at this scale? Board length 315, real board 80cm → thickness ~1cm → 4px. But stylized, make16px.
Let's make deck y 560-578 (18 thick) with kicks:
```
M 478,568
C 468,560 470,548 484,546
L 500,546
C 540,556 740,556 776,546
L 792,546
C 806,548 808,560 798,568
L 794,576
C 790,584 780,586 772,582
C 740,574 540,574 506,582
C 496,586 484,584 480,576 Z
```
This is getting fiddly. Simpler approach: draw deck as a path with two parallel curves:
Top edge: M 484,556 Q 640,544 796,556 (slight sag? no, should be flat-ish)
Actually a board seen from slightly above: top surface visible as a parallelogram-ish shape.
Let's do a simple perspective: the board viewed from front-left slightly. Deck top surface: an ellipse-ish elongated shape.
Simplify: deck as rounded rect rotated slightly:
`<rect x="478" y="556" width="330" height="20" rx="10" fill="#2b2f45" stroke="#0f1220" stroke-width="3"/>` plus grip texture (dashes) and a colored stripe on the side.
Then kicks: add two small curved pieces at ends:
Left kick: `<path d="M 486,560 C 466,558 456,546 462,536 C 468,528 482,530 490,540 Z" fill="#2b2f45"/>`
Right kick: mirror at x 798: `<path d="M 800,560 C 820,558 830,546 824,536 C 818,528 804,530 796,540 Z"/>`
Hmm the kicks should extend the deck upward-outward. Let's just make the deck a single path:
`M 462,540 C 456,532 466,524 476,528 L 500,538 C 560,530 720,530 780,538 L 806,528 C 816,524 826,532 820,540 L 814,566 C 812,574 802,578 794,574 L 780,566 C 720,574 560,574 500,566 L 486,574 C 478,578 468,574 466,566 Z`
This creates a shape: top edge goes from (462,540) via kicks to deck top at y~530-538 across, then down right end to bottom (794,574), back across bottom y~566-574, to left end. Thickness ~36 at middle. A bit thick but reads as a chunky stylized board. Let's reduce: top y546-552, bottom y 572-576 → 26 thick.Let me finalize deck path:
```
M 468,536
C 460,528 470,518 480,524
L 506,540
C 566,532 714,532 774,540
L 800,524
C 810,518 820,528 812,536
L 806,566
C 803,576 792,580 783,575
L 768,566
C 712,574 568,574 512,566
L 494,575
C 485,580 474,576 471,566
Z
```
Top edge from (506,540) to (774,540) — deck top surface line at y 540. Bottom edge from (768,566) to (512,566). Thickness 26. Ends: left end from (468,536) down to (471,566) — a rounded cap with kick. Right similar.The "kicks": at left, top edge starts at (468,536) going through control to (480,524) then to (506,540) — this creates a bump upward. Slightly odd but ok.
Honestly, let's simplify: no kicks, just a clean deck with rounded ends:
```
M 476,542L 790,542
C 806,542 814,550 812,560
L 808,570
C 806,580 796,584 786,582
L 480,582
C 468,582 460,574 462,564
L 466,552
C 468,545 470,542 476,542 Z
```
Wait left side needs symmetry: from (476,542) start... Let me write:
`M 474,542 L 792,542 C 808,542 816,551 813,562 L 809,572 C 806,581 796,585 786,582 L 480,582 C 470,585 460,581 457,572 L 453,562 C 450,551 458,542 474,542 Z`
Hmm left end: from (474,542) the path starts at top-left; then ends at (474,542) via C 458,542 ... wait the final C goes to (474,542). Points: start (474,542) → line to (792,542) → curve to (813,562) → line(809,572) → curve to (786,582) → line to (480,582) → curve to (457,572) → line to (453,562) → curve to (474,542). Yes that's a closed rounded slab. Deck spans x 453-813, y 542-585.
Thickness 43 — too thick. Change: top y556, bottom y 578 → 22 thick. So:
`M 474,556 L 792,556 C 806,556 814,562 812,570 L 810,574 C 808,582 798,586 788,583 L 480,583 C 470,586 460,582 458,574 L 456,570 C 454,562 462,556 474,556 Z`
Bottom edge y 583, top 556 → 27 thick including the rounded ends. Fine, chunky stylized.
Add grip tape: top strip `<rect x="474" y="556" width="318" height="6" fill="#171a2b" opacity=".8"/>` hmm the top edge. Add a colored side stripe: `<path d="M 466,568 L 802,568" stroke="#ff7a3d" stroke-width="5" opacity=".9"/>`.
Wheels:
- truck1 at x 540, truck2 at x 730.
- Trucks: `<rect x="524" y="583" width="34" height="14" rx="5" fill="#aeb7c7"/>` with baseplate.
- Wheels: circle cx 540 cy 610 r 18, cx 730 cy 610 r 18. Fill #f2f4f8 with inner hub circle r 7 fill #35c6d8, plus a glow.
Wheel bottom = 628. Ground contact y = 628. Then shadow ellipse at cy 634.
But earlier I said ground contact 650. Let's set ground horizon at 500, board wheels bottom 628, shadow at 636. Good — plenty of ground below (636→800) for craters.
Wait, but craters I planned at cy 690, 730, 780 — good.
Hmm, but the board floats at y 556 while horizon is at 500 — the board appears close to horizon, meaning far away? No — perspective: objects near horizon are far. The board bottom at 628 vs horizon 500: it's in the mid-foreground. The cat's head at y 200 extends well above horizon into sky. Fine.
Actually maybe push the board lower for more foreground presence: shift everything down ~40px? Board wheels bottom 628 → let's shift the whole cat+board group down by 30: deck top 586, wheels bottom 658, shadow666. Head top 170+30=200... wait head top is 175 (helmet top 200 - ...). Helmet top y=200. Shift +30 → 230. Total figure 230→658. Horizon 500. That's fine and gives more ground.
Hmm but then sky is bigger with Earth and stars, ground from 500-800 with the board at 586-658. Ground below board 658-800 = 142px for foreground craters. OK.
Let's do: keep as designed but shift group by translate(0,26). I'll just apply transform="translate(0,26)" on the board+cat group. Actually then shadow etc. Let's include shadow inside the group too? Shadow shouldn't rotate. We're not rotating. Fine, include.
Let me instead just bake in the offset by adding 26 to all y values... too error-prone. Use transform.
Actually I planned a rotate(-3 655 640) on the group. With translate(0,26), order: transform="translate(0,26) rotate(-3 655 640)". Fine.
Hmm, but with rotation the left wheel dips to y ~630+26=656... let me recompute after translation. Original wheel bottoms: left 628 → after rotate -3 about (655,640): left wheel center (540,610): dx=-115, dy=-30. y' = 640 + (-115)(-0.05234) + (-30)(0.99863) = 640 + 6.02 - 29.96 = 616.06 → bottom 634. Right wheel (730,610): dx=75,dy=-30 → y' = 640 + 75*(-0.05234) -29.96 = 640 -3.93 -29.96=606.1 → bottom 624. So after +26: left bottom 660, right bottom 650. Ground/shadow: place shadow ellipse center (650, 668). Ground plane is uniform so fine.
Hmm, rotation pivot at y=640 but actual board is at 542-628. Rotating about (655,640) moves things. Whatever, it works visually.
Actually, is a -3° rotation going to make the cat look like it's floating? The shadow is separate ellipse so it reads fine.
Let me reduce to rotate(-2.5). Or skip rotation entirely for safety. I'll keep -3, it adds life.
Actually, simpler and safer: skip rotation, add slight deck tilt by drawing... no. I'll keep rotation. It's fine.
Hmm, one concern: with rotation the left wheel at bottom660 and right at 650 — I'll draw the shadow ellipse at cy 672, rx 190, ry 26, blurred. Good.
Now, ground craters must not conflict with shadow. Put craters at y>700 mostly and sides.
Let me also add small pebbles near bottom.
Speed/dust:
- Dust puffs behind (left of) the board: circles at (430,640) r 18, (390,655) r 24, (345,668) r 30 with low opacity white/tan, blurred.
- Speed lines: rounded rects to the left: `<rect x="200" y="470" width="140" height="6" rx="3" fill="#fff" opacity=".5"/>` etc. A few at different y.
Also small rocks flying up behind.
Flag: at x 1150, pole from y 640 up to y 470? Ground at that x — the ground is a plane; y=640 at x=1150 is fine (it's below horizon). Pole: line x 1150 from 640 to 460, stroke #dfe4ee width 6. Flag: path from (1153,465) to (1230,478) to (1153,496) Z fill #ff7a3d with a small star? Actually flags: rectangle. Let's do a wavy flag: `M 1153,464 C 1180,456 1205,476 1232,466 L 1232,500 C 1205,510 1180,490 1153,498 Z` fill #ff7a3d, plus a small teal circle emblem.
Hmm flag at right edge x up to 1232 — near edge, ok.
Actually maybe put flag on the left at x 150 to balance? Left has dust. Right has Earth above. Let's put flag at right x1140, and it's below Earth (Earth at 1120,120). Might be crowded. Put flag at x 210, y pole 640→470. Left side has speed lines though (x 200-340, y 470-520). Move speed lines to x 100-400 at y 420-540? They'd overlap flag.
Let's place: speed lines behind cat at x 180-460, y 400-560 (left of cat). Flag at x 1150. Earth at (1110,130). Rocks scattered.
Hmm Earth at top right and flag below it — ok, different y.
Alternatively put lunar module in distance at left horizon. Could be nice: small silver shape at (240, 470) — but speed lines there.
Let's finalize layout:
- Top-left: small text label.
- Top-right: Earth (1110,130) r 62.
- Left middle: speed lines x 120-430, y 380-560.
- Center: cat on board.
- Right: flag at x 1150.
- Bottom: craters, rocks.
- Dust behind board left.
Stars everywhere in sky.
Let's write final code.
Star coordinates (avoid overlapping Earth/label): I'll list.
(60,70) (140,180) (230,60) (300,140) (380,90) (450,210) (520,50) (600,130) (680,70) (760,180) (830,110) (900,60) (960,200) (1020,90) (1180,60) (1240,170) (1250,300) (40,300) (110,420) (90,240) (170,330) (340,300) (410,360) (470,120) (560,260) (640,330)? that's near cat head (helmet top 200, x 563-747). y 330 x 640 is inside helmet — skip. (720,40)? (860,250) (940,330) (1000,270) (1080,380) (1160,240) (1220,420) (250,420) (380,450)? near speed lines. (60,150) (190,110) (300,220) (500,320)? x500 y320 left of helmet (563) ok.
Also a couple of sparkle stars (4-point) at (170,90), (980,150), (430,60).
Fine.
Also add a subtle nebula/gradient band near horizon: a soft glow ellipse.
Now text label:
`<text x="56" y="70" ...>EVA · LUNA SK8</text>` with letter-spacing. And a second line smaller: "GRAVITY 1/6 · BOARD 001". Keep subtle white opacity .7.
Font: system sans-serif, uppercase, letter-spacing 4.
Now write everything.
One more: glow filter for the board and Earth.
filter id="blur6" feGaussianBlur stdDeviation="6"
filter id="blur18" stdDeviation="18"
Let's write the final HTML.
Also handle: body background dark, svg centered.
Let me write out.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:#04050c;overflow:hidden}
body{display:flex;align-items:center;justify-content:center}
.stage{width:min(100vw,160vh);aspect-ratio:1280/800}
svg{display:block;width:100%;height:100%}
</style>
</head>
<body>
<div class="stage">
<svg viewBox="0 0 1280 800" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="An astronaut cat skateboarding on the moon">
<defs>...</defs>
...
</svg>
</div>
</body>
</html>
```
aspect-ratio on a flex child with width set: height derived. Should work.
Now fill in the SVG. Let me write carefully.
Defs:
```svg
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#04050e"/>
<stop offset="0.55" stop-color="#0a0f22"/>
<stop offset="0.88" stop-color="#16203c"/>
<stop offset="1" stop-color="#2a3352"/>
</linearGradient>
<radialGradient id="horizonGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#5f7fd6" stop-opacity="0.55"/>
<stop offset="1" stop-color="#5f7fd6" stop-opacity="0"/>
</radialGradient>
<linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#d5d2cb"/>
<stop offset="0.35" stop-color="#b9b6af"/>
<stop offset="1" stop-color="#8b8883"/>
</linearGradient>
<radialGradient id="glass" cx="0.32" cy="0.28" r="0.75">
<stop offset="0" stop-color="#eafaff" stop-opacity="0.55"/>
<stop offset="0.45" stop-color="#9fd7f2" stop-opacity="0.22"/>
<stop offset="1" stop-color="#1b3a63" stop-opacity="0.35"/>
</radialGradient>
<linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="0.55" stop-color="#eef1f7"/>
<stop offset="1" stop-color="#c3cbdb"/>
</linearGradient>
<linearGradient id="fur" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f7b673"/>
<stop offset="1" stop-color="#e88f43"/>
</linearGradient>
<radialGradient id="earthG" ...>
<filter id="soft" ...>
<filter id="glowCyan" ...>
```
OK writing now. I need to be careful and complete.
For the Earth:
```
<g>
<circle cx="1112" cy="132" r="72" fill="#3d7fd6" opacity=".25" filter="url(#soft)"/> (glow)
<circle cx="1112" cy="132" r="60" fill="url(#earthG)" stroke="#8fd0ff" stroke-width="2" opacity=".95"/>
<path continents fill="#4fbf7a"/>
<path clouds fill="#fff" opacity=".35"/>
<circle overlay for night side: path arc dark</g>
```
Continents: a few blobs. e.g.
`<path d="M1080,100 c14,-12 34,-8 40,6 c6,14 -6,24 -20,26 c-16,2 -30,-8 -20,-32 Z" fill="#5cc98a"/>`
`<path d="M1120,158 c16,-8 34,0 36,14 c2,12 -14,22 -30,18 c-14,-4 -18,-24 -6,-32 Z" fill="#5cc98a"/>`
`<path d="M1074,148 c10,-4 20,4 18,14 c-2,10 -16,14 -24,6 c-8,-8 -4,-16 6,-20 Z" fill="#4fbf7a"/>`
Night side: `<path d="M1112,72 a60,60 0 0 1 0,120 a44,60 0 0 0 0,-120 Z" fill="#04122e" opacity=".45"/>` — approximate crescent shadow.
Good enough.
Now the cat group. Let me write it in order:
```
<g id="rider" transform="translate(0,26) rotate(-3 655 640)">
<!-- shadow -->
<ellipse cx="650" cy="676" rx="196" ry="26" fill="#000" opacity=".28" filter="url(#soft)"/>
<!-- dust -->
...
<!-- tail (behind body) -->
<!-- backpack -->
<!-- legs behind? -->
<!-- torso -->
<!-- arms -->
<!-- helmet -->
</g>
```
Wait shadow should be on the ground, and ground is not rotating... but shadow is an ellipse, rotating -3 barely matters. Actually the shadow would move with the group — with translate only it's fine since rotation about (655,640) moves the shadow center from (650,676) slightly. Negligible.
Hmm, but shadow placed inside rotated group is fine.
Actually better: put shadow outside the rotated group (only in the main translate group). Let's structure:
```
<g transform="translate(0,26)">
<ellipse shadow .../>
<g transform="rotate(-3 655 640)">
...everything...
</g>
</g>
```
Good.
Order within: dust behind board? Dust is behind → draw first after shadow.
Let's write the legs: back leg first (further), then torso, then front leg? For a stance, both legs attach at hips under torso. Draw: back leg, front leg, then torso covering hips, then boots (boots should be in front of legs). Order: back leg, front leg, boots, torso? Boots at bottom, torso above — no overlap. Order: legs → boots → torso → backpack (behind!) — backpack must be before torso.
Order:
1. shadow, dust, speedlines2. tail
3. backpack
4. back arm (behind body? the back arm extends left/back — should be behind torso) → yes draw back arm before torso
5. back leg, front leg, boots
6. torso + belt + chest panel
7. front arm8. helmet + head
Wait back arm should be behind torso but the shoulder joint covered by torso. Draw back arm before torso ✓.
Legs: hips under torso, so legs before torso ✓.
Boots after legs ✓ (they're separate shapes).
Let's write.
Back leg path: `M 626,486 L 598,524 L 610,552` — with stroke-linejoin round, width 36. Outline stroke #9aa4b8 width 42 beneath.
Front leg: `M 692,486 L 728,518 L 720,548`.
Hmm boots: back boot around ankle (610,552): boot rect x 578 y 540 w 62 h 30 rx 12. Front boot ankle (720,548): rect x 692 y 536 w 66 h 30 rx 12.
Deck top is y 556. Boots bottom 570 → overlapping deck by 14px. Feet should rest on deck top 556. So boot bottom should be ~558. Adjust: back boot y 530 h 30 → bottom 560 ✓. Front boot y 526 h 30 → bottom 556 ✓.
Then ankles: back ankle at (610,545), front at (720,542). Legs: `M 626,486 L 598,516 L 608,540` and `M 692,486 L 728,512 L 720,538`.
Boots: back rect x 574 y 528 w 64 h 32 rx 13; front rect x 688 y 524 w 70 h 32 rx 13.
But board top is 556, boot bottom 560/556 — back boot bottom 560 slightly into deck, fine.
Sole: back rect x 572 y 552 w 68 h 12 rx 6 fill #ff7a3d; front rect x 686 y 548 w 74 h 12 rx 6 fill #ff7a3d.
Wait front boot bottom = 524+32 = 556, sole at 548-560. ok.
Torso: `M 606,404 C 594,436 592,468 600,494 L 716,494 C 724,468 722,436 710,404 C 690,394 626,394 606,404 Z`
Shoulder pads: circle (610,412) r 24, (708,412) r 24 fill suit.
Belt: `<rect x="598" y="482" width="120" height="20" rx="8" fill="#2b3552"/>` with a buckle rect x 646 y 484 w 26 h 16 rx 4 fill #ff7a3d.
Chest panel: `<rect x="628" y="424" width="74" height="46" rx="10" fill="#27324e" stroke="#8f98ab" stroke-width="2"/>` plus:
- screen: rect x 636 y 432 w 34 h 18 rx 4 fill #0e2a3a, with a teal line.
- buttons: circle (686,440) r 6 fill #ff7a3d; circle (686,458) r 6 fill #35c6d8; circle (674,458)? keep simple.
- small circle (640,460) r 6 fill #ffd166.
Collar: `<rect x="612" y="396" width="96" height="16" rx="8" fill="#dfe4ee" stroke="#98a1b4" stroke-width="2"/>` — that's the neck ring area. Actually neck ring rect x 606 y 380 w 100 h 30 rx 12.
Helmet: circle cx 655 cy 292 r 92. But wait — helmet bottom 384, neck ring 380-410, torso top 404. Good.
Order: draw neck ring before helmet? Helmet should overlap ring top. Draw ring, then helmet.
Actually helmet bottom at 384, ring 380-410: ring top edge hidden by helmet. Draw ring first then helmet → helmet covers ring's top. Good.
Helmet elements:
```
<circle cx="655" cy="292" r="96" fill="#dfe6f2" stroke="#8f98ab" stroke-width="3"/> <!-- outer shell -->
<circle cx="655" cy="292" r="88" fill="url(#glass)"/>
<circle cx="655" cy="292" r="88" fill="none" stroke="#ffffff" stroke-width="4" opacity=".85"/>
<!-- face inside: clipped? face fits within r88 -->
...
<!-- visor highlights drawn on top -->
```
Face elements must be within r 88 of (655,292): ears tips at 87.9 — that's within 88 barely. Let's make inner glass r 90 and outer shell r 97. Then tips at 87.9 < 90 ✓ with 2px. Tight. Let's move ear tips slightly: (610,224) and (700,224): dx 45, dy 68 → 81.6 ✓. Ear tips lower: y 224 vs head top 254 → 30px ears. Good.
Ear left: M 612,272 L 610,224 L 652,248 Z. Right: M 698,272 L 700,224 L 658,248 Z.
Hmm right ear base points (698,272) and (658,248) — base width 40ish. ok.
Inner pink: left M 616,264 L 614,236 L 642,252 Z; right M 694,264 L 696,236 L 668,252 Z.
Head ellipse cx 655 cy 302 rx 56 ry 47 → spans x 599-711, y 255-349. Distance of (711,302) from center (655,292) = sqrt(56²+10²)=57 ✓.
Whiskers extend to x ~584 and 726 at y ~318: distance from (655,292): dx71, dy 26 → 75.6 < 90 ✓.
Visor highlights on top of face:
```
<path d="M 606,246 A 78,78 0 0 1 690,222" fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round" opacity=".55" filter="url(#soft)"/>
<path d="M 596,300 A 84,84 0 0 1 620,240" ... thinner
```
Hmm let's do a big soft highlight arc top-left and a small crisp one.
Big: `M 592,318 A 92,92 0 0 1 646,214` stroke white width 16 opacity .35 blur.
Crisp: `M 604,266 A 70,70 0 0 1 656,232` stroke white width 8 opacity .7.
Also bottom-right reflection: `M 700,340 A 70,70 0 0 0 740,300`? small.
Add rim shadow: `<circle r="90" fill="none" stroke="#0b1730" stroke-width="6" opacity=".25"/>` inside to give depth.
Also add helmet side detail: small circle at (745,330) r 8 fill #35c6d8 (a bolt), and at (565,330).
OK. Also the helmet should have a highlight ellipse: `<ellipse cx="620" cy="248" rx="34" ry="20" fill="#fff" opacity=".35" transform="rotate(-30 620 248)" filter="url(#soft)"/>`.
Now backpack: rounded rect x 566 y 400 w 56 h 100 rx 18 fill url(#suit) stroke #98a1b4 sw 2. Orange band rect x 566 y 434 w 56 h 16 fill #ff7a3d. Teal valve circle (566,470) r 11 fill #35c6d8 stroke #2b3552 sw 2 — half outside left edge (x 555-577). ok.
Also top cap rect x 580 y 392 w 30 h 14 rx 6 fill #c9d1e0.
But backpack left edge 566 and helmet spans x 558-752 at y 292; at y 400 helmet half-width = sqrt(97²-108²) → negative, helmet bottom 389. So no overlap. Good.
Back arm: `M 616,414 C 584,400 554,378 532,362` stroke width 32 (outline 40 dark). Glove circle (522,352) r 25 fill #ff7a3d stroke #b85a1f sw 3. Add a small cuff: circle/rect at (546,372) rotated — skip, add a teal band: `<circle cx="548" cy="374" r="17" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>` drawn under the arm? Cuff should be at wrist: place teal circle at (545,372) r 18, then glove on top at (522,352). Order: arm, cuff, glove.
Hmm the arm path endpoint (532,362); cuff at (545,372) is along the arm before the end. Then glove at (522,352) beyond end. Slight mismatch but ok. Let's make arm end at (534,364), cuff circle at (540,370) r 18, glove center (516,350) r 25.
Front arm: `M 704,416 C 740,428 774,446 798,462` width 32. Cuff circle (790,456) r 18 teal, glove circle (814,470) r 25 orange.
Check glove at (814,470) — within canvas ✓. After rotation -3 about (655,640): dx=159, dy=-170 → x' = 655 + 159*0.9986 - (-170)(-0.0523)... let's not worry, it stays in bounds.
Also front arm/glove: after translate +26 → y ~496. Fine.
Speed lines to the left: x from 120 to 440. But back glove is at x ~491 (516-25) after rotation. Speed lines at x<460. Good.
Speed lines:
```
<rect x="150" y="404" width="150" height="7" rx="3.5" fill="#fff" opacity=".45"/>
<rect x="230" y="452" width="200" height="7" rx="3.5" fill="#fff" opacity=".35"/>
<rect x="120" y="500" width="120" height="6" rx="3" fill="#fff" opacity=".3"/>
<rect x="300" y="546" width="170" height="6" rx="3" fill="#fff" opacity=".25"/>
<rect x="180" y="588" width="90" height="6" rx="3" fill="#fff" opacity=".22"/>
```
These are outside the rider group (world space). Put them before the rider group.
Dust behind board (world space, after board? dust should be behind board): put dust before rider group too.
Dust puffs: circles at (420,640) r 26, (370,656) r 32, (312,668) r 40, (250,678) r 46, fill #d8d4cc opacity decreasing0.35→0.15, with blur filter.
Hmm those overlap speed lines at y 588. Different y, fine.
Also flying pebbles: small ellipses at (440,612) rx 8 ry 5, (400,626) rx 6 ry 4, fill #a09d98.
Ground craters (world):
- ellipse cx 210 cy 712 rx 158 ry 46 fill #8e8b86 opacity .8, plus inner highlight: path arc.
Crater style: outer ellipse darker fill, then a lighter rim arc on the sunlit side (light from right? Earth is top-right, sun from right). Let's say light from upper-right → rim highlight on right side, shadow on left-inside.
Simpler: `<ellipse ... fill="#9a9791"/>` then `<path d="M ..." stroke="#e6e3dc" stroke-width="6" fill="none" opacity=".7"/>` for the far rim (top) and a darker inner shadow at bottom? Actually for a crater lit from the right: the inner right wall is in shadow? Let's think: light from right, low angle. Crater's right outer rim lit; the crater's left inner wall lit; the right inner wall shadowed. So: bright arc on the right outer edge, dark arc on right inner.
I'll do: dark ellipse (crater floor), then a crescent highlight on the left-inner side, and a bright crescent on the right outer rim.
Simplify:
```
<g>
<ellipse cx="210" cy="712" rx="158" ry="46" fill="#8a8781"/>
<path d="M 60,714 A 158,46 0 0 1 360,710" fill="none" stroke="#efece5" stroke-width="7" opacity=".55"/> (top rim lit)
<path d="M 96,726 A 120,34 0 0 0 320,722" fill="none" stroke="#6f6c67" stroke-width="8" opacity=".6"/> (inner shadow bottom)
</g>
```
Eh. Good enough — these read as craters.
Let me place craters:
1. cx 200 cy 720 rx 170 ry 48
2. cx 1080 cy 748 rx 190 ry 54
3. cx 640 cy 796 rx 260 ry 64 (bottom, mostly offscreen) — but shadow at y 676 rx 196. Crater 3 top edge at 732. ok.
4. cx 930 cy 640 rx 74 ry 20
5. cx 340 cy 636 rx 66 ry 18
6. cx 1180 cy 620 rx 56 ry 16
7. cx 60 cy 610 rx 60 ry 16
Wait shadow at cy 676 rx 196 → spans x 454-846, y 650-702. Crater 1 at x 30-370 y 672-768 — no overlap ✓. Crater 2 x 890-1270 y 694-802 ✓. Crater 5 at x 274-406 y 618-654 ✓ (left of shadow). Crater 4 x 856-1004 y 620-660 ✓.
Rocks:
- polygon at (760,716) small, (860,760), (150,660), (1000,690).
Use simple paths: `<path d="M 742,724 L 756,706 L 776,712 L 782,728 Z" fill="#a5a29c" stroke="#7d7a75" stroke-width="2"/>`
Also add a small flag at right: pole x 1150 from y 656 to 466.
Ground at x 1150: craters there (crater 2 covers x 890-1270 y 694-802; crater 6 at 1180,620). Pole base at 656 is between. Fine.
Flag:
```
<rect x="1146" y="470" width="7" height="190" rx="3.5" fill="#e6eaf2"/>
<path d="M1153,474 C 1184,464 1214,488 1246,476 L 1246,516 C 1214,528 1184,504 1153,514 Z" fill="#ff7a3d"/>
<circle cx="1176" cy="494" r="10" fill="#35c6d8"/>
```
x up to 1246 < 1280 ✓.
Hmm flag might overlap Earth? Earth at (1112,132) r 60 → y 72-192. Flag y 464-528. No overlap ✓.
Also the flag's a bit close to the right edge. Fine.
Also add a distant mountain range.
Also maybe a small lunar module far left at horizon: skip.
Text label top-left:
```
<text x="56" y="66" fill="#ffffff" opacity=".85" font-family="ui-sans-serif,system-ui,Segoe UI,Helvetica,Arial,sans-serif" font-size="26" font-weight="700" letter-spacing="7">LUNAR SK8</text>
<text x="58" y="96" fill="#8fb6ff" opacity=".8" font-size="13" letter-spacing="5">EVA 07 · GRAVITY 1/6 · CAT-ASTRONAUT</text>
```
Add a small orange line above: `<rect x="56" y="34" width="60" height="5" rx="2.5" fill="#ff7a3d"/>`.
Wait stars might collide with text — text is drawn last (on top), fine.
Let's also ensure no horizontal scrollbar: overflow hidden.
Now let's assemble the final code. Also add subtle animation? Not required; static SVG is fine. Maybe a gentle CSS animation for stars twinkling — but screenshot at 3s; animations fine. Could add slight bob to the rider. Risk: if animation mid-state it's fine. I'll add a very subtle twinkle via CSS opacity on a couple of star groups, and maybe skip motion to be safe. Actually a gentle float makes it lively in a video comparison. I'll add a slow bob (translateY ±6px) — screenshot will catch a random phase, harmless.
Hmm, if they compare screenshots, animation differences are fine. I'll include a subtle one.
Let me add:
```
<style>
.bob{animation:bob 3.4s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.tw{animation:tw 2.6s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.35}to{opacity:1}}
</style>
```
Apply .bob to rider group — but the group has transform attribute; CSS transform overrides the transform attribute! That would break it. Use a wrapper: outer <g class="bob"> containing inner <g transform=...>. CSS transform on outer g works (it replaces any transform attr, but outer has none). Good.
Careful: CSS transform on SVG elements uses user units by default (transform-box: view-box default? For SVG, `transform-box` default is `view-box` in newer specs... Actually initial value of transform-box is `view-box` per SVG2/CSS. translateY(-8px) in SVG user units — px maps to user units. Should be fine either way.
I'll add it.
Let me write final code now, carefully.
Also add a subtle ground texture: a few faint lines/dots.
Also maybe add small stars reflected? no.
One more consideration: "Everything that makes the demo interesting must be visible within the first seconds" — static image, fine.
Let me write it.
Final check on speed lines vs back glove: glove at x 491 (left edge) y ~376+26=402 after translate. Speed line at y 404 x 150-300 — no overlap (x ends 300 < 491) ✓.
Also the tail: path from (608,494) to around (500,476). After rotation it shifts. Tail left extent ~490. Speed lines end at x 300-470. Speed line at y 546 x 300-470 — tail is at y 440-520 (before translate) → 466-546 after. Overlap possible with line at y 546, x 300-470: tail at x 490-610. x 470 < 490 ✓. OK.
Speed line at y 588 x 180-270 ✓.
Dust circles at x 250-446, y 614-724 — behind board, fine.
Let's write it all out.
For the deck, let me re-examine: deck path y 556-585, x 457-814. Wheels: truck at x 540 and 730. Wheel centers (540,610) r 18 → top 592, so truck connects585→592. Make truck rect x 526 y 583 w 30 h 14 rx 5 and wheel top at 592 → gap 592-597. Let's set wheel cy606 r 18 → top 588, bottom 624. Truck rect y 583 h 10 → 593 overlaps wheel top ✓.
So wheel bottom 624. Then after rotation, left bottom ≈ 630, +26 = 656. Shadow cy 668.
Recompute: left wheel center (540,606): dx=-115, dy=-34 → y' = 640 + (-115)(-0.05234) + (-34)(0.99863) = 640+6.02-33.95=612.07 → bottom 630. +26 = 656.
Right wheel (730,606): dx=75, dy=-34 → y' = 640 -3.93 -33.95 = 602.1 → bottom 620 → +26=646.
Shadow: ellipse cx 652 cy 670 rx 200 ry 26 → y 644-696. Left wheel bottom 656 sits within. Good.
Crater 5 (340,636 rx66 ry 18): x 274-406, y 618-654. Shadow x 452-852 ✓ no overlap.
Crater 4 (930,640 rx 74 ry 20): x 856-1004 ✓.
Also dust circles y 614-724 at x 250-446: crater 1 at x 30-370 y 672-768 overlaps dust — dust drawn before ground? Order: sky, mountains, ground, craters, rocks, then speed lines/dust/shadow/rider, then flag? Flag should be behind rider? Flag at right, no overlap. Put flag after ground before rider.
So order: sky → stars → earth → mountains → ground → craters → rocks → flag → speedlines → dust → shadow → rider.
Dust drawn on top of craters — that's correct (dust is in the air in front).
Good.
Let's write the code.
For ground path: `M 0,506 C 160,494 320,516 480,506 C 640,496 800,518 960,506 C 1080,498 1180,510 1280,502 L 1280,800 L 0,800 Z`
Mountains above:`M 0,508 L 70,478 L 130,498 L 210,458 L 280,494 L 350,470 L 430,502 L 520,476 L 590,500 L 670,464 L 750,498 L 830,478 L 910,504 L 1000,472 L 1080,500 L 1160,468 L 1230,496 L 1280,480 L 1280,530 L 0,530 Z` fill #b7b4ae? Then ground overlaps from ~500. Since ground top edge varies 494-518, mountains will show above. Good. Use fill #a9a6a1 with a lighter tone, and add a second darker range further? Just one.
Actually mountains should be lighter (atmospheric) or darker? On the moon, distant mountains are same albedo, appear mid-gray against black. Ground is light gray. Let's make mountains slightly darker gray #a3a09b to separate from ground, with the ground lighter. Or lighter (#c9c6c0) to suggest sunlight. I'll make them #b0ada7.
Add a subtle lighter top edge stroke.
Also add horizon glow ellipse behind mountains: `<ellipse cx="640" cy="512" rx="700" ry="90" fill="url(#horizonGlow)"/>` drawn before mountains.
OK writing now for real.
Let me write the whiskers precisely:
Left whiskers (from muzzle edge x~630):
- `M 634,316 C 616,310 600,306 586,306`
- `M 634,324 C 616,324 600,326 584,330`
- `M 635,332 C 620,338 606,344 594,352`
Right mirrored about x=655:
- `M 676,316 C 694,310 710,306 724,306`
- `M 676,324 C 694,324 710,326 726,330`
- `M 675,332 C 690,338 704,344 716,352`
Check (726,330) distance from (655,292): dx 71, dy 38 → 80.5 < 90 ✓. (716,352): dx 61, dy 60 → 85.6 < 90 ✓. (584,330): dx 71, dy 38 → 80.5 ✓. (594,352): dx 61, dy 60 → 85.6 ✓.Mouth: `M 655,326 C 655,334 648,339 641,335` and `M 655,326 C 655,334 662,339 669,335`.
Nose at y 316-325: `M 646,315 L 664,315 L 655,325 Z` fill #f4789a.
Muzzle ellipse cx 655 cy 326 rx 32 ry 20 fill #ffe9d4.
Eyes at (634,300) and (676,300), rx 14 ry 15. Head top 255, so eyes at y 285-315 ✓.
Brow/forehead: head ellipse top 255.
Blush: ellipse (614,322) rx 11 ry 6 and (696,322).
Head stripes at y 250-272 — head top is 255, so stripes from250 to 272 mostly at the top of head. Slightly above head. Let's shift: stripes y 258-278.
- `M 640,276 C 642,266 644,261 646,257` — y 257 above head top 255? head top at x=640: ellipse y = 302 - 47*sqrt(1-((640-655)/56)²) = 302 - 47*sqrt(1-0.0717)=302-47*0.9635=302-45.3=256.7. So y257 is just at the edge ✓.
- mid: `M 655,272 C 655,264 655,259 655,255` (head top255) ✓
- right: `M 670,276 C 668,266 666,261 664,257` ✓
Good.
Now let's write everything out.
Also I should double check the ear base vs head: ear left `M 612,272 L 610,224 L 652,248 Z`. Draw before head. Head ellipse covers y≥256 at x 612... at x=612, head y range: dx=-43, sqrt(1-(43/56)²)=sqrt(1-0.59)=0.64 → y from 302-30=272 to 334. So at x=612 head top is 272 — ear base point (612,272) exactly at head edge. Ear region above y~256-272 visible. The ear triangle from (612,272) to (610,224) to (652,248): most is above the head outline ✓.
At x=652, head top = 302-47*sqrt(1-(3/56)²)=302-46.9=255. Ear point (652,248) is above 255 ✓ visible.
Good.
Now writing final output.
I'll also make sure `filter="url(#soft)"` filters don't clip: filters have default region -10%..120%, fine.
Let me define:
```
<filter id="soft" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="8"/></filter>
<filter id="soft2" ...><feGaussianBlur stdDeviation="18"/></filter>
<filter id="tiny" ...><feGaussianBlur stdDeviation="3"/></filter>
```
Alright, write it.
Also add a faint cyan glow under the board: ellipse cx 652 cy 640 rx 150 ry 16 fill #4fd8ff opacity .18 blur.
Let's produce the code.
Regarding stars twinkling class `.tw` applied to some stars with different delays via inline style animation-delay.
Write now.
I need to double-check one thing: `<rect>` with rx for speed lines — fine.
Final code.Raw response
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:#04050c;overflow:hidden}
body{display:flex;align-items:center;justify-content:center}
.stage{width:min(100vw,160vh);aspect-ratio:1280/800}
svg{display:block;width:100%;height:100%}
.bob{animation:bob 3.6s ease-in-out infinite alternate;transform-origin:center}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.tw{animation:tw 2.4s ease-in-out infinite alternate}
.tw2{animation:tw 3.2s ease-in-out infinite alternate;animation-delay:.8s}
@keyframes tw{from{opacity:.3}to{opacity:1}}
.spin{animation:spin 6s linear infinite;transform-origin:540px 606px}
.spin2{animation:spin 6s linear infinite;transform-origin:730px 606px}
@keyframes spin{to{transform:rotate(360deg)}}
</style>
</head>
<body>
<div class="stage">
<svg viewBox="0 0 1280 800" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="An astronaut cat skateboarding on the moon">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#04050e"/>
<stop offset="0.5" stop-color="#080d1d"/>
<stop offset="0.82" stop-color="#141d38"/>
<stop offset="1" stop-color="#2b3457"/>
</linearGradient>
<radialGradient id="hglow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#6d8ce0" stop-opacity="0.5"/>
<stop offset="1" stop-color="#6d8ce0" stop-opacity="0"/>
</radialGradient>
<linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#dcd9d2"/>
<stop offset="0.3" stop-color="#bfbbb4"/>
<stop offset="1" stop-color="#89867f"/>
</linearGradient>
<radialGradient id="glass" cx="0.32" cy="0.26" r="0.78">
<stop offset="0" stop-color="#f0fdff" stop-opacity="0.5"/>
<stop offset="0.45" stop-color="#9fd8f5" stop-opacity="0.2"/>
<stop offset="1" stop-color="#16304f" stop-opacity="0.34"/>
</radialGradient>
<linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="0.55" stop-color="#eef1f7"/>
<stop offset="1" stop-color="#c0c8d9"/>
</linearGradient>
<linearGradient id="fur" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f9bd7b"/>
<stop offset="1" stop-color="#eb9146"/>
</linearGradient>
<radialGradient id="earthG" cx="0.35" cy="0.3" r="0.8">
<stop offset="0" stop-color="#79c6ff"/>
<stop offset="0.55" stop-color="#2f7fd8"/>
<stop offset="1" stop-color="#123f86"/>
</radialGradient>
<radialGradient id="wheelG" cx="0.35" cy="0.3" r="0.8">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#c7cedd"/>
</radialGradient>
<filter id="soft" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter>
<filter id="soft2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="20"/></filter>
<filter id="tiny" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="3"/></filter>
<filter id="starGlow" x="-200%" y="-200%" width="500%" height="500%"><feGaussianBlur stdDeviation="2.4"/></filter>
</defs>
<!-- ============ SKY ============ -->
<rect width="1280" height="800" fill="url(#sky)"/>
<ellipse cx="640" cy="516" rx="720" ry="96" fill="url(#hglow)"/>
<!-- stars -->
<g fill="#ffffff">
<circle cx="60" cy="72" r="2.4" class="tw"/>
<circle cx="140" cy="182" r="1.7" class="tw2"/>
<circle cx="232" cy="58" r="2.8" class="tw"/>
<circle cx="302" cy="140" r="1.6" class="tw2"/>
<circle cx="382" cy="92" r="2.2" class="tw"/>
<circle cx="452" cy="212" r="1.7" class="tw2"/>
<circle cx="524" cy="52" r="2.5" class="tw"/>
<circle cx="602" cy="132" r="1.6" class="tw2"/>
<circle cx="684" cy="66" r="2.2" class="tw"/>
<circle cx="762" cy="184" r="1.8" class="tw2"/>
<circle cx="836" cy="108" r="2.6" class="tw"/>
<circle cx="902" cy="56" r="1.7" class="tw2"/>
<circle cx="964" cy="206" r="2.3" class="tw"/>
<circle cx="1024" cy="88" r="1.6" class="tw2"/>
<circle cx="1188" cy="58" r="2.5" class="tw"/>
<circle cx="1244" cy="176" r="1.8" class="tw2"/>
<circle cx="1252" cy="312" r="2.2" class="tw"/>
<circle cx="44" cy="304" r="1.7" class="tw2"/>
<circle cx="112" cy="424" r="2.4" class="tw"/>
<circle cx="92" cy="244" r="1.6" class="tw2"/>
<circle cx="176" cy="336" r="2.1" class="tw"/>
<circle cx="344" cy="304" r="1.7" class="tw2"/>
<circle cx="414" cy="368" r="2.3" class="tw"/>
<circle cx="474" cy="124" r="1.7" class="tw2"/>
<circle cx="562" cy="266" r="2.1" class="tw"/>
<circle cx="502" cy="330" r="1.6" class="tw2"/>
<circle cx="724" cy="38" r="2.4" class="tw"/>
<circle cx="864" cy="256" r="1.8" class="tw2"/>
<circle cx="944" cy="336" r="2.2" class="tw"/>
<circle cx="1004" cy="276" r="1.6" class="tw2"/>
<circle cx="1084" cy="384" r="2.3" class="tw"/>
<circle cx="1164" cy="244" r="1.7" class="tw2"/>
<circle cx="1224" cy="424" r="2.1" class="tw"/>
<circle cx="252" cy="424" r="1.7" class="tw2"/>
<circle cx="60" cy="152" r="2.2" class="tw"/>
<circle cx="196" cy="112" r="1.6" class="tw2"/>
<circle cx="300" cy="222" r="2.4" class="tw"/>
<circle cx="1120" cy="440" r="1.7" class="tw2"/>
<circle cx="70" cy="366" r="1.6" class="tw"/>
<circle cx="820" cy="330" r="1.8" class="tw2"/>
</g>
<g stroke="#ffffff" stroke-linecap="round" fill="none">
<g class="tw"><path d="M170 74 v22 M159 85 h22" stroke-width="2.6" opacity=".9"/></g>
<g class="tw2"><path d="M986 150 v26 M973 163 h26" stroke-width="2.8" opacity=".9"/></g>
<g class="tw"><path d="M432 58 v18 M423 67 h18" stroke-width="2.2" opacity=".85"/></g>
<g class="tw2"><path d="M60 470 v16 M52 478 h16" stroke-width="2" opacity=".7"/></g>
</g>
<!-- ============ EARTH ============ -->
<g>
<circle cx="1112" cy="132" r="86" fill="#4f8fe8" opacity=".22" filter="url(#soft2)"/>
<circle cx="1112" cy="132" r="60" fill="url(#earthG)"/>
<path d="M1076,102 c14,-13 36,-9 43,6 c7,15 -6,26 -21,28 c-17,3 -33,-8 -22,-34 Z" fill="#57c98d"/>
<path d="M1124,158 c17,-9 37,0 39,15 c2,13 -15,24 -32,19 c-15,-4 -19,-26 -7,-34 Z" fill="#4fbd84"/>
<path d="M1072,150 c11,-5 22,4 20,15 c-2,11 -17,15 -26,6 c-9,-9 -4,-17 6,-21 Z" fill="#63d097"/>
<path d="M1100,80 c16,-6 32,-2 40,8 c-12,-2 -26,2 -34,8 c-6,-6 -9,-13 -6,-16 Z" fill="#ffffff" opacity=".45"/>
<path d="M1064,124 c10,-4 20,0 26,6 c-10,0 -20,4 -26,10 c-4,-6 -4,-13 0,-16 Z" fill="#ffffff" opacity=".38"/>
<path d="M1112,72 a60,60 0 0 1 0,120 a46,60 0 0 0 0,-120 Z" fill="#030b1e" opacity=".5"/>
<circle cx="1112" cy="132" r="61" fill="none" stroke="#a8dcff" stroke-width="2.4" opacity=".85"/>
</g>
<!-- ============ DISTANT RIDGE ============ -->
<path d="M0,512 L70,480 L132,500 L212,458 L282,496 L352,470 L432,504 L522,476 L592,502 L672,462 L752,500 L832,478 L912,506 L1002,470 L1082,502 L1162,466 L1232,498 L1280,480 L1280,540 L0,540 Z"
fill="#a9a6a0"/>
<path d="M0,512 L70,480 L132,500 L212,458 L282,496 L352,470 L432,504 L522,476 L592,502 L672,462 L752,500 L832,478 L912,506 L1002,470 L1082,502 L1162,466 L1232,498 L1280,480"
fill="none" stroke="#e3e0d8" stroke-width="3" opacity=".6"/>
<!-- ============ MOON SURFACE ============ -->
<path d="M0,506 C160,494 320,518 480,506 C640,494 800,520 960,506 C1080,496 1180,512 1280,502 L1280,800 L0,800 Z" fill="url(#ground)"/>
<path d="M0,506 C160,494 320,518 480,506 C640,494 800,520 960,506 C1080,496 1180,512 1280,502"
fill="none" stroke="#f2efe8" stroke-width="4" opacity=".7"/>
<!-- craters -->
<g>
<ellipse cx="200" cy="722" rx="172" ry="48" fill="#96938d"/>
<path d="M40,726 A172,48 0 0 1 356,714" fill="none" stroke="#f0ede6" stroke-width="7" opacity=".55"/>
<path d="M92,742 A124,34 0 0 0 322,736" fill="none" stroke="#6d6a65" stroke-width="9" opacity=".55"/>
<ellipse cx="1082" cy="752" rx="192" ry="54" fill="#94918b"/>
<path d="M898,758 A192,54 0 0 1 1266,742" fill="none" stroke="#f0ede6" stroke-width="8" opacity=".5"/>
<path d="M958,772 A134,38 0 0 0 1212,764" fill="none" stroke="#6d6a65" stroke-width="10" opacity=".5"/>
<ellipse cx="640" cy="806" rx="264" ry="66" fill="#8f8c86"/>
<path d="M378,800 A264,66 0 0 1 902,796" fill="none" stroke="#e9e6df" stroke-width="8" opacity=".4"/>
<ellipse cx="342" cy="636" rx="68" ry="19" fill="#a09d97"/>
<path d="M276,638 A68,19 0 0 1 408,634" fill="none" stroke="#eeeae3" stroke-width="5" opacity=".6"/>
<ellipse cx="930" cy="640" rx="76" ry="21" fill="#a09d97"/>
<path d="M856,643 A76,21 0 0 1 1004,638" fill="none" stroke="#eeeae3" stroke-width="5" opacity=".6"/>
<ellipse cx="1184" cy="616" rx="58" ry="16" fill="#a4a19b"/>
<ellipse cx="64" cy="612" rx="62" ry="17" fill="#a4a19b"/>
<ellipse cx="470" cy="588" rx="46" ry="13" fill="#a8a59f"/>
<ellipse cx="820" cy="578" rx="52" ry="14" fill="#a8a59f"/>
</g>
<!-- rocks -->
<g fill="#a7a49e" stroke="#7d7a75" stroke-width="2">
<path d="M744,730 L758,708 L782,714 L788,734 Z"/>
<path d="M866,772 L878,754 L900,760 L904,778 Z"/>
<path d="M150,672 L162,656 L182,662 L186,678 Z"/>
<path d="M1014,700 L1026,684 L1046,690 L1050,706 Z"/>
<path d="M410,756 L420,742 L438,747 L441,761 Z"/>
<path d="M1128,676 L1138,664 L1154,669 L1157,681 Z"/>
</g>
<!-- flag -->
<g>
<ellipse cx="1150" cy="660" rx="34" ry="9" fill="#6f6c67" opacity=".55"/>
<rect x="1146" y="466" width="7" height="194" rx="3.5" fill="#e9edf4"/>
<path d="M1153,470 C1184,460 1214,484 1246,472 L1246,514 C1214,526 1184,502 1153,512 Z" fill="#ff7a3d"/>
<circle cx="1178" cy="492" r="11" fill="#35c6d8"/>
<circle cx="1178" cy="492" r="4.5" fill="#0d2233"/>
</g>
<!-- ============ SPEED LINES ============ -->
<g fill="#ffffff">
<rect x="150" y="404" width="152" height="7" rx="3.5" opacity=".45"/>
<rect x="232" y="452" width="196" height="7" rx="3.5" opacity=".33"/>
<rect x="118" y="502" width="124" height="6" rx="3" opacity=".28"/>
<rect x="304" y="548" width="166" height="6" rx="3" opacity=".24"/>
<rect x="176" y="590" width="94" height="6" rx="3" opacity=".2"/>
<rect x="356" y="356" width="86" height="6" rx="3" opacity=".26"/>
</g>
<!-- ============ DUST ============ -->
<g fill="#dedad2">
<circle cx="432" cy="638" r="24" opacity=".4" filter="url(#tiny)"/>
<circle cx="380" cy="654" r="32" opacity=".33" filter="url(#soft)"/>
<circle cx="322" cy="668" r="40" opacity=".26" filter="url(#soft)"/>
<circle cx="258" cy="680" r="48" opacity=".2" filter="url(#soft2)"/>
<circle cx="196" cy="692" r="54" opacity=".14" filter="url(#soft2)"/>
</g>
<g fill="#b3b0aa">
<ellipse cx="446" cy="612" rx="9" ry="5"/>
<ellipse cx="404" cy="628" rx="7" ry="4"/>
<ellipse cx="466" cy="646" rx="6" ry="4"/>
<ellipse cx="372" cy="616" rx="5" ry="3"/>
</g>
<!-- ============ RIDER ============ -->
<g class="bob">
<g transform="translate(0,26)">
<!-- contact shadow + glow -->
<ellipse cx="652" cy="672" rx="204" ry="27" fill="#3d3a36" opacity=".38" filter="url(#soft)"/>
<ellipse cx="652" cy="644" rx="152" ry="16" fill="#4fd8ff" opacity=".16" filter="url(#soft)"/>
<g transform="rotate(-3 655 640)">
<!-- ---- TAIL ---- -->
<g>
<path d="M610,496 C566,522 514,512 502,474 C494,446 510,424 534,426"
fill="none" stroke="#a8601c" stroke-width="32" stroke-linecap="round"/>
<path d="M610,496 C566,522 514,512 502,474 C494,446 510,424 534,426"
fill="none" stroke="url(#fur)" stroke-width="23" stroke-linecap="round"/>
<path d="M610,496 C566,522 514,512 502,474 C494,446 510,424 534,426"
fill="none" stroke="#c96f26" stroke-width="23" stroke-dasharray="12 34" opacity=".85"/>
</g>
<!-- ---- BACKPACK ---- -->
<g>
<rect x="582" y="388" width="30" height="16" rx="7" fill="#c9d1e0" stroke="#98a1b4" stroke-width="2"/>
<rect x="566" y="400" width="56" height="102" rx="18" fill="url(#suit)" stroke="#98a1b4" stroke-width="2.5"/>
<rect x="566" y="434" width="56" height="16" fill="#ff7a3d"/>
<rect x="566" y="468" width="56" height="6" fill="#35c6d8" opacity=".8"/>
<circle cx="566" cy="492" r="12" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>
<rect x="574" y="406" width="14" height="74" rx="7" fill="#ffffff" opacity=".55"/>
</g>
<!-- ---- BACK ARM ---- -->
<g>
<path d="M616,414 C584,400 554,378 534,364" fill="none" stroke="#98a1b4" stroke-width="40" stroke-linecap="round"/>
<path d="M616,414 C584,400 554,378 534,364" fill="none" stroke="url(#suit)" stroke-width="32" stroke-linecap="round"/>
<circle cx="542" cy="370" r="18" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>
<circle cx="516" cy="350" r="25" fill="#ff7a3d" stroke="#b85a1f" stroke-width="3.5"/>
<path d="M500,344 c8,-8 20,-10 30,-6" fill="none" stroke="#ffd0ae" stroke-width="4" stroke-linecap="round" opacity=".8"/>
</g>
<!-- ---- LEGS ---- -->
<g stroke-linecap="round" stroke-linejoin="round">
<path d="M626,486 L598,516 L608,542" fill="none" stroke="#98a1b4" stroke-width="44"/>
<path d="M626,486 L598,516 L608,542" fill="none" stroke="url(#suit)" stroke-width="36"/>
<path d="M692,486 L728,512 L720,540" fill="none" stroke="#98a1b4" stroke-width="44"/>
<path d="M692,486 L728,512 L720,540" fill="none" stroke="url(#suit)" stroke-width="36"/>
<path d="M622,504 L604,516" fill="none" stroke="#35c6d8" stroke-width="12"/>
<path d="M716,502 L728,512" fill="none" stroke="#ff7a3d" stroke-width="12"/>
</g>
<!-- ---- BOOTS ---- -->
<g stroke="#98a1b4" stroke-width="2.5">
<rect x="574" y="528" width="66" height="32" rx="14" fill="url(#suit)"/>
<rect x="572" y="552" width="70" height="13" rx="6.5" fill="#ff7a3d" stroke="#b85a1f"/>
<rect x="688" y="524" width="72" height="32" rx="14" fill="url(#suit)"/>
<rect x="686" y="548" width="76" height="13" rx="6.5" fill="#ff7a3d" stroke="#b85a1f"/>
</g>
<g fill="#2b3552">
<circle cx="596" cy="540" r="5"/><circle cx="620" cy="540" r="5"/>
<circle cx="710" cy="536" r="5"/><circle cx="736" cy="536" r="5"/>
</g>
<!-- ---- TORSO ---- -->
<g>
<path d="M606,404 C594,436 592,468 600,496 L716,496 C724,468 722,436 710,404 C690,394 626,394 606,404 Z"
fill="url(#suit)" stroke="#98a1b4" stroke-width="3"/>
<circle cx="612" cy="414" r="25" fill="url(#suit)" stroke="#98a1b4" stroke-width="3"/>
<circle cx="706" cy="414" r="25" fill="url(#suit)" stroke="#98a1b4" stroke-width="3"/>
<rect x="612" y="394" width="96" height="18" rx="9" fill="#dfe4ee" stroke="#98a1b4" stroke-width="2.5"/>
<!-- belt -->
<rect x="598" y="482" width="120" height="22" rx="9" fill="#2b3552"/>
<rect x="644" y="485" width="28" height="16" rx="5" fill="#ff7a3d"/>
<rect x="604" y="487" width="10" height="12" rx="4" fill="#35c6d8"/>
<!-- chest panel -->
<rect x="628" y="424" width="76" height="48" rx="11" fill="#27324e" stroke="#8f98ab" stroke-width="2.5"/>
<rect x="636" y="432" width="36" height="20" rx="5" fill="#0d2a3c"/>
<path d="M641,446 l6,-8 l6,6 l7,-10" fill="none" stroke="#35c6d8" stroke-width="3" stroke-linecap="round"/>
<circle cx="690" cy="440" r="7" fill="#ff7a3d"/>
<circle cx="690" cy="460" r="7" fill="#35c6d8"/>
<circle cx="646" cy="464" r="6" fill="#ffd166"/>
<rect x="660" y="458" width="20" height="10" rx="4" fill="#4a5b82"/>
<path d="M646,478 C664,474 686,474 700,478" fill="none" stroke="#c6cddb" stroke-width="3" opacity=".7"/>
</g>
<!-- ---- FRONT ARM ---- -->
<g>
<path d="M704,416 C740,428 774,446 798,462" fill="none" stroke="#98a1b4" stroke-width="40" stroke-linecap="round"/>
<path d="M704,416 C740,428 774,446 798,462" fill="none" stroke="url(#suit)" stroke-width="32" stroke-linecap="round"/>
<circle cx="790" cy="456" r="18" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>
<circle cx="816" cy="472" r="25" fill="#ff7a3d" stroke="#b85a1f" stroke-width="3.5"/>
<path d="M804,462 c9,-6 20,-6 28,-1" fill="none" stroke="#ffd0ae" stroke-width="4" stroke-linecap="round" opacity=".8"/>
</g>
<!-- ---- NECK RING ---- -->
<rect x="606" y="378" width="100" height="32" rx="14" fill="#dfe4ee" stroke="#98a1b4" stroke-width="3"/>
<rect x="606" y="392" width="100" height="7" fill="#35c6d8" opacity=".85"/>
<!-- ---- HELMET ---- -->
<g>
<circle cx="655" cy="292" r="97" fill="#e7ecf5" stroke="#8f98ab" stroke-width="3.5"/>
<circle cx="655" cy="292" r="90" fill="url(#glass)"/>
<circle cx="655" cy="292" r="90" fill="none" stroke="#0b1730" stroke-width="7" opacity=".22"/>
<circle cx="655" cy="292" r="90" fill="none" stroke="#ffffff" stroke-width="4.5" opacity=".9"/>
<!-- ears -->
<path d="M612,272 L610,224 L652,248 Z" fill="url(#fur)" stroke="#c97526" stroke-width="3" stroke-linejoin="round"/>
<path d="M698,272 L700,224 L658,248 Z" fill="url(#fur)" stroke="#c97526" stroke-width="3" stroke-linejoin="round"/>
<path d="M616,264 L614,236 L642,252 Z" fill="#ffb3c1"/>
<path d="M694,264 L696,236 L668,252 Z" fill="#ffb3c1"/>
<!-- head -->
<ellipse cx="655" cy="302" rx="56" ry="47" fill="url(#fur)"/>
<g stroke="#d9762b" stroke-width="5" stroke-linecap="round" fill="none" opacity=".95">
<path d="M640,276 C642,266 644,261 646,257"/>
<path d="M655,272 C655,264 655,259 655,255"/>
<path d="M670,276 C668,266 666,261 664,257"/>
</g>
<!-- blush -->
<ellipse cx="616" cy="322" rx="12" ry="6.5" fill="#ff8fa6" opacity=".55"/>
<ellipse cx="694" cy="322" rx="12" ry="6.5" fill="#ff8fa6" opacity=".55"/>
<!-- eyes -->
<g>
<ellipse cx="634" cy="300" rx="14" ry="15.5" fill="#ffffff"/>
<ellipse cx="676" cy="300" rx="14" ry="15.5" fill="#ffffff"/>
<ellipse cx="634" cy="300" rx="12.5" ry="14" fill="#9fe87a"/>
<ellipse cx="676" cy="300" rx="12.5" ry="14" fill="#9fe87a"/>
<ellipse cx="634" cy="300" rx="4.6" ry="13" fill="#14211a"/>
<ellipse cx="676" cy="300" rx="4.6" ry="13" fill="#14211a"/>
<circle cx="630" cy="294" r="3.4" fill="#ffffff"/>
<circle cx="672" cy="294" r="3.4" fill="#ffffff"/>
<path d="M620,288 c6,-7 16,-9 24,-6" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity=".9"/>
<path d="M662,288 c6,-7 16,-9 24,-6" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity=".9"/>
</g>
<!-- muzzle -->
<ellipse cx="655" cy="327" rx="33" ry="20" fill="#ffe9d4"/>
<path d="M646,315 L664,315 L655,326 Z" fill="#f4789a" stroke="#d85f83" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M655,326 C655,335 648,340 641,336" fill="none" stroke="#c97526" stroke-width="3.4" stroke-linecap="round"/>
<path d="M655,326 C655,335 662,340 669,336" fill="none" stroke="#c97526" stroke-width="3.4" stroke-linecap="round"/>
<!-- whiskers -->
<g stroke="#ffffff" stroke-width="2.6" fill="none" stroke-linecap="round" opacity=".9">
<path d="M634,316 C616,310 600,306 586,306"/>
<path d="M634,324 C616,324 600,326 584,330"/>
<path d="M635,332 C620,338 606,344 594,352"/>
<path d="M676,316 C694,310 710,306 724,306"/>
<path d="M676,324 C694,324 710,326 726,330"/>
<path d="M675,332 C690,338 704,344 716,352"/>
</g>
<!-- visor highlights -->
<ellipse cx="622" cy="248" rx="38" ry="21" transform="rotate(-34 622 248)" fill="#ffffff" opacity=".32" filter="url(#soft)"/>
<path d="M600,272 A70,70 0 0 1 656,230" fill="none" stroke="#ffffff" stroke-width="9" stroke-linecap="round" opacity=".72" filter="url(#tiny)"/>
<path d="M714,338 A70,70 0 0 0 736,300" fill="none" stroke="#bfe9ff" stroke-width="7" stroke-linecap="round" opacity=".45" filter="url(#tiny)"/>
<circle cx="742" cy="336" r="9" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>
<circle cx="568" cy="336" r="9" fill="#35c6d8" stroke="#2b3552" stroke-width="3"/>
</g>
</g>
<!-- ---- SKATEBOARD ---- -->
<g transform="rotate(-3 655 640)">
<!-- glow under deck -->
<ellipse cx="652" cy="596" rx="176" ry="14" fill="#4fd8ff" opacity=".3" filter="url(#soft)"/>
<!-- trucks -->
<g fill="#aeb7c7" stroke="#6f7889" stroke-width="2.5">
<path d="M524,583 L556,583 L550,596 L530,596 Z"/>
<path d="M714,583 L746,583 L740,596 L720,596 Z"/>
</g>
<rect x="520" y="578" width="40" height="10" rx="4" fill="#8d97a9"/>
<rect x="710" y="578" width="40" height="10" rx="4" fill="#8d97a9"/>
<!-- wheels -->
<g>
<circle cx="540" cy="606" r="18" fill="url(#wheelG)" stroke="#7d8698" stroke-width="3"/>
<circle class="spin" cx="540" cy="606" r="7.5" fill="#35c6d8" stroke="#1f7f8d" stroke-width="2.5"/>
<path class="spin" d="M540,592 v6 M540,614 v6 M526,606 h6 M548,606 h6" stroke="#7d8698" stroke-width="3" stroke-linecap="round"/>
<circle cx="730" cy="606" r="18" fill="url(#wheelG)" stroke="#7d8698" stroke-width="3"/>
<circle class="spin2" cx="730" cy="606" r="7.5" fill="#35c6d8" stroke="#1f7f8d" stroke-width="2.5"/>
<path class="spin2" d="M730,592 v6 M730,614 v6 M716,606 h6 M738,606 h6" stroke="#7d8698" stroke-width="3" stroke-linecap="round"/>
</g>
<!-- deck -->
<path d="M474,556 L792,556 C806,556 814,562 812,570 L810,574 C808,582 798,586 788,583 L480,583 C470,586 460,582 458,574 L456,570 C454,562 462,556 474,556 Z"
fill="#2c3149" stroke="#12162a" stroke-width="3.5" stroke-linejoin="round"/>
<path d="M474,556 L792,556 C806,556 814,560 812,566 L460,566 C458,560 462,556 474,556 Z" fill="#171b2e"/>
<g stroke="#4a5273" stroke-width="2" opacity=".9">
<path d="M500,560 v6 M524,560 v6 M548,560 v6 M572,560 v6 M596,560 v6 M620,560 v6 M644,560 v6 M668,560 v6 M692,560 v6 M716,560 v6 M740,560 v6 M764,560 v6"/>
</g>
<path d="M466,572 L802,572" stroke="#ff7a3d" stroke-width="6" stroke-linecap="round"/>
<path d="M500,579 L768,579" stroke="#35c6d8" stroke-width="3.5" stroke-linecap="round" opacity=".85"/>
<path d="M508,556 C560,550 720,550 770,556" fill="none" stroke="#ffffff" stroke-width="3" opacity=".2"/>
</g>
</g>
</g>
<!-- ============ LABEL ============ -->
<g font-family="ui-sans-serif,system-ui,'Segoe UI',Helvetica,Arial,sans-serif">
<rect x="56" y="34" width="58" height="6" rx="3" fill="#ff7a3d"/>
<text x="56" y="76" fill="#ffffff" font-size="27" font-weight="700" letter-spacing="8">LUNAR SK8</text>
<text x="58" y="104" fill="#8fb6ff" font-size="13" font-weight="600" letter-spacing="4.6" opacity=".9">EVA 07 · GRAVITY 1/6 · CAT-ASTRONAUT</text>
</g>
<g font-family="ui-sans-serif,system-ui,'Segoe UI',Helvetica,Arial,sans-serif" text-anchor="end">
<text x="1224" y="764" fill="#ffffff" font-size="13" font-weight="600" letter-spacing="4" opacity=".65">SEA OF TRANQUILITY</text>
</g>
</svg>
</div>
</body>
</html>
```