Skateboarding astronaut catOne-line
MiniMax M3.1 Flash
by MiniMaxReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 52.5 s
- Cost
- $0.0055
- Output tokens
- 9,226
- Spent thinking
- 2,157 tokens
- Speed
- 180 tok/s
- Console errors
- 0
- First token after
- 1.2 s
- First visible text after
- 17.8 s
- Prompt tokens
- 532
- Code size
- 18.3 KB
- Finish reason
- stop
- Served by
- Fireworks
- Model id
minimax/minimax-m3.1-flash- Reasoning sent
{"effort":"medium"}- Max output
- 64,000 tokens
- Generated
- Nov 11, 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 · 350 lines
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="1280" height="800" role="img" aria-label="An astronaut cat skateboarding on the moon">
<title>Astronaut Cat Skateboarding on the Moon</title>
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#05060f"/>
<stop offset="0.55" stop-color="#0d1030"/>
<stop offset="1" stop-color="#1b2350"/>
</linearGradient>
<radialGradient id="earthGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0.55" stop-color="#6fb7ff" stop-opacity="0.55"/>
<stop offset="1" stop-color="#6fb7ff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="earthOcean" cx="0.35" cy="0.3" r="0.8">
<stop offset="0" stop-color="#5fc7ff"/>
<stop offset="0.6" stop-color="#2a7fd4"/>
<stop offset="1" stop-color="#123f8c"/>
</radialGradient>
<linearGradient id="moonGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#cfd3df"/>
<stop offset="0.35" stop-color="#a9afc0"/>
<stop offset="1" stop-color="#6c7186"/>
</linearGradient>
<linearGradient id="suit" x1="0.2" y1="0" x2="0.9" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="0.55" stop-color="#eceadf"/>
<stop offset="1" stop-color="#c8c6bb"/>
</linearGradient>
<linearGradient id="visor" x1="0.15" y1="0" x2="0.85" y2="1">
<stop offset="0" stop-color="#2c4a7d"/>
<stop offset="0.45" stop-color="#12203f"/>
<stop offset="1" stop-color="#070c1c"/>
</linearGradient>
<radialGradient id="boardGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#8cf7ff" stop-opacity="0.85"/>
<stop offset="0.45" stop-color="#5b7dff" stop-opacity="0.35"/>
<stop offset="1" stop-color="#5b7dff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="shadow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#2b2f45" stop-opacity="0.65"/>
<stop offset="1" stop-color="#2b2f45" stop-opacity="0"/>
</radialGradient>
<radialGradient id="craterShade" cx="0.4" cy="0.35" r="0.7">
<stop offset="0" stop-color="#7d8296"/>
<stop offset="1" stop-color="#9aa0b2"/>
</radialGradient>
<filter id="soft" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="6"/>
</filter>
<filter id="soft2" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="14"/>
</filter>
</defs>
<style>
.bob { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.twinkle { animation: tw 3.4s ease-in-out infinite; }
@keyframes tw { 0%,100% { opacity:.25; } 50% { opacity:1; } }
.shoot { animation: shoot 6s linear infinite; }
@keyframes shoot { 0% { transform: translate(-260px,120px); opacity:0; } 8% { opacity:1; } 22% { transform: translate(760px,-70px); opacity:0; } 100% { transform: translate(760px,-70px); opacity:0; } }
.dust { animation: dust 2.2s ease-out infinite; }
@keyframes dust { 0% { opacity:.7; transform: translateX(0) scale(.5);} 100% { opacity:0; transform: translateX(-70px) scale(1.6);} }
.spin { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>
<!-- ================= SKY ================= -->
<rect width="1280" height="800" fill="url(#sky)"/>
<ellipse cx="640" cy="640" rx="900" ry="240" fill="#3b3f7a" opacity="0.18" filter="url(#soft2)"/>
<!-- stars -->
<g fill="#ffffff">
<circle class="twinkle" cx="90" cy="70" r="2.2" style="animation-delay:.1s"/>
<circle class="twinkle" cx="180" cy="140" r="1.4" style="animation-delay:.6s"/>
<circle class="twinkle" cx="260" cy="50" r="1.8" style="animation-delay:1.2s"/>
<circle class="twinkle" cx="330" cy="190" r="1.3" style="animation-delay:.3s"/>
<circle class="twinkle" cx="415" cy="90" r="2.4" style="animation-delay:1.7s"/>
<circle class="twinkle" cx="500" cy="40" r="1.5" style="animation-delay:.9s"/>
<circle class="twinkle" cx="600" cy="130" r="2" style="animation-delay:2.1s"/>
<circle class="twinkle" cx="700" cy="60" r="1.4" style="animation-delay:.4s"/>
<circle class="twinkle" cx="790" cy="210" r="2.1" style="animation-delay:1.5s"/>
<circle class="twinkle" cx="880" cy="45" r="1.7" style="animation-delay:.8s"/>
<circle class="twinkle" cx="960" cy="300" r="1.3" style="animation-delay:2.4s"/>
<circle class="twinkle" cx="1150" cy="60" r="2.3" style="animation-delay:.5s"/>
<circle class="twinkle" cx="1220" cy="220" r="1.6" style="animation-delay:1.9s"/>
<circle class="twinkle" cx="60" cy="330" r="1.8" style="animation-delay:1.1s"/>
<circle class="twinkle" cx="150" cy="260" r="1.3" style="animation-delay:2.6s"/>
<circle class="twinkle" cx="360" cy="330" r="1.5" style="animation-delay:.2s"/>
<circle class="twinkle" cx="240" cy="430" r="2" style="animation-delay:1.35s"/>
<circle class="twinkle" cx="470" cy="410" r="1.2" style="animation-delay:2.8s"/>
<circle class="twinkle" cx="740" cy="360" r="1.6" style="animation-delay:.75s"/>
<circle class="twinkle" cx="850" cy="440" r="2.2" style="animation-delay:1.95s"/>
<circle class="twinkle" cx="1180" cy="420" r="1.4" style="animation-delay:1.05s"/>
<circle class="twinkle" cx="1080" cy="520" r="1.9" style="animation-delay:2.2s"/>
<circle class="twinkle" cx="990" cy="200" r="1.2" style="animation-delay:.55s"/>
<circle class="twinkle" cx="640" cy="250" r="1.1" style="animation-delay:1.45s"/>
<circle class="twinkle" cx="520" cy="250" r="1.3" style="animation-delay:.95s"/>
<circle class="twinkle" cx="30" cy="180" r="1.1" style="animation-delay:2.35s"/>
<circle class="twinkle" cx="1235" cy="520" r="1.2" style="animation-delay:1.6s"/>
<circle class="twinkle" cx="700" cy="480" r="1.5" style="animation-delay:2.75s"/>
</g>
<g fill="#cfe4ff" opacity="0.85">
<path d="M1200 150 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4z"/>
<path d="M300 120 l3 8 8 3 -8 3 -3 8 -3 -8 -8 -3 8 -3z"/>
<path d="M980 80 l3 7 7 3 -7 3 -3 7 -3 -7 -7 -3 7 -3z"/>
</g>
<!-- shooting star -->
<g class="shoot">
<path d="M0 0 L-70 -34" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" opacity="0.9"/>
<path d="M0 0 L-46 -22" stroke="#9fd8ff" stroke-width="1.4" stroke-linecap="round" opacity="0.6"/>
</g>
<!-- ================= EARTH ================= -->
<g>
<circle cx="1040" cy="150" r="150" fill="url(#earthGlow)"/>
<circle cx="1040" cy="150" r="74" fill="url(#earthOcean)"/>
<g fill="#57c08a" opacity="0.95">
<path d="M1002 108 q22 -16 44 -6 q10 12 -6 20 q-24 6 -40 0 q-8 -6 2 -14z"/>
<path d="M1058 162 q26 -8 34 12 q4 22 -16 30 q-24 -2 -24 -20 q0 -14 6 -22z"/>
<path d="M1010 158 q16 -6 22 8 q2 14 -12 20 q-16 -2 -16 -14 q0 -10 6 -14z"/>
</g>
<g fill="#ffffff" opacity="0.45">
<ellipse cx="1024" cy="132" rx="30" ry="8"/>
<ellipse cx="1064" cy="176" rx="22" ry="7"/>
<ellipse cx="1016" cy="180" rx="18" ry="6"/>
</g>
<circle cx="1040" cy="150" r="74" fill="none" stroke="#bfe6ff" stroke-width="2" opacity="0.5"/>
<ellipse cx="1040" cy="150" rx="118" ry="30" fill="none" stroke="#9ad3ff" stroke-width="3" opacity="0.25"/>
</g>
<!-- ================= MOON SURFACE ================= -->
<path d="M0 616 Q150 578 320 606 Q470 630 630 602 Q800 572 950 606 Q1110 638 1280 604 L1280 800 L0 800 Z" fill="url(#moonGrad)"/>
<path d="M0 616 Q150 578 320 606 Q470 630 630 602 Q800 572 950 606 Q1110 638 1280 604" fill="none" stroke="#e7eaf4" stroke-width="4" opacity="0.8"/>
<!-- craters -->
<g>
<ellipse cx="140" cy="690" rx="86" ry="26" fill="url(#craterShade)"/>
<ellipse cx="140" cy="684" rx="66" ry="16" fill="#767b90" opacity="0.55"/>
<ellipse cx="1120" cy="716" rx="110" ry="30" fill="url(#craterShade)"/>
<ellipse cx="1120" cy="708" rx="84" ry="19" fill="#767b90" opacity="0.5"/>
<ellipse cx="880" cy="762" rx="70" ry="20" fill="url(#craterShade)"/>
<ellipse cx="330" cy="748" rx="58" ry="17" fill="url(#craterShade)"/>
<ellipse cx="820" cy="662" rx="42" ry="12" fill="url(#craterShade)"/>
<ellipse cx="470" cy="690" rx="36" ry="11" fill="url(#craterShade)"/>
<ellipse cx="660" cy="770" rx="46" ry="13" fill="url(#craterShade)"/>
</g>
<!-- small rocks -->
<g fill="#8e94a8">
<ellipse cx="520" cy="640" rx="10" ry="6"/>
<ellipse cx="985" cy="636" rx="13" ry="7"/>
<ellipse cx="250" cy="662" rx="8" ry="5"/>
<ellipse cx="1180" cy="630" rx="9" ry="5"/>
<ellipse cx="70" cy="748" rx="12" ry="6"/>
</g>
<!-- ================= FLAG ================= -->
<g>
<rect x="196" y="560" width="6" height="112" rx="3" fill="#dfe3ef"/>
<path d="M202 566 q34 12 66 2 q30 -10 58 4 l0 40 q-28 -14 -58 -4 q-32 12 -66 -2z" fill="#ff7a45">
<animate attributeName="d" dur="2.4s" repeatCount="indefinite"
values="M202 566 q34 12 66 2 q30 -10 58 4 l0 40 q-28 -14 -58 -4 q-32 12 -66 -2z;
M202 566 q34 -12 66 -2 q30 10 58 -4 l0 40 q-28 14 -58 4 q-32 -12 -66 2z;
M202 566 q34 12 66 2 q30 -10 58 4 l0 40 q-28 -14 -58 -4 q-32 12 -66 -2z"/>
</path>
<g fill="#fff" opacity="0.95">
<path d="M238 590 q6 -14 14 -14 q-2 8 -6 12 q6 0 9 4 q-6 8 -14 8 q-8 0 -8 -6 q0 -4 5 -4z"/>
</g>
<ellipse cx="199" cy="674" rx="26" ry="7" fill="url(#shadow)"/>
</g>
<!-- ================= SKATEBOARD + CAT ================= -->
<g transform="translate(430,300)">
<!-- ground shadow -->
<ellipse cx="80" cy="290" rx="150" ry="26" fill="url(#shadow)"/>
<g class="bob">
<!-- speed motion lines -->
<g stroke="#bcd4ff" stroke-linecap="round" opacity="0.5">
<path d="M-150 120 h-90" stroke-width="5"/>
<path d="M-190 160 h-130" stroke-width="7"/>
<path d="M-150 200 h-80" stroke-width="4"/>
<path d="M-215 235 h-70" stroke-width="3"/>
<path d="M-120 80 h-60" stroke-width="3"/>
</g>
<!-- tail -->
<g>
<animateTransform attributeName="transform" type="rotate"
values="-14 30 150; 16 30 150; -14 30 150" dur="2.6s" repeatCount="indefinite"/>
<path d="M40 148 C -20 168 -74 140 -70 96 C -68 70 -92 62 -104 74" fill="none" stroke="#efedE3" stroke-width="17" stroke-linecap="round"/>
<path d="M40 148 C -20 168 -74 140 -70 96 C -68 70 -92 62 -104 74" fill="none" stroke="#d8d6ca" stroke-width="17" stroke-linecap="round" opacity="0.35"/>
<g stroke="#ffb066" stroke-width="9" stroke-linecap="round" opacity="0.95">
<path d="M-14 152 l4 -14"/>
<path d="M-46 138 l8 -12"/>
<path d="M-68 108 l11 -8"/>
</g>
</g>
<!-- backpack -->
<rect x="4" y="78" width="36" height="62" rx="13" fill="#d9d7cc"/>
<rect x="8" y="90" width="28" height="16" rx="6" fill="#b9b7ac"/>
<circle cx="22" cy="124" r="7" fill="#ff7a45"/>
<!-- back arm (behind body) -->
<g>
<animateTransform attributeName="transform" type="rotate"
values="6 44 78; -10 44 78; 6 44 78" dur="2.6s" repeatCount="indefinite"/>
<path d="M44 80 C 16 70 -6 52 -18 34" fill="none" stroke="url(#suit)" stroke-width="19" stroke-linecap="round"/>
<circle cx="-22" cy="30" r="12" fill="#f2f0e6"/>
<circle cx="-22" cy="30" r="6" fill="#ddd9cd"/>
</g>
<!-- legs -->
<g>
<!-- back leg -->
<path d="M58 140 C 44 160 32 176 30 194" fill="none" stroke="url(#suit)" stroke-width="26" stroke-linecap="round"/>
<path d="M30 188 q-16 0 -20 12 q10 12 34 10 q6 -14 -2 -22z" fill="#ff7a45"/>
<!-- front leg -->
<path d="M92 142 C 102 162 106 178 104 196" fill="none" stroke="url(#suit)" stroke-width="26" stroke-linecap="round"/>
<path d="M104 190 q16 -2 22 10 q-10 13 -36 12 q-6 -14 2 -22z" fill="#ff7a45"/>
</g>
<!-- torso -->
<path d="M44 56 C 28 92 26 128 44 150 L 100 150 C 118 126 118 88 100 56 Z" fill="url(#suit)" stroke="#c9c7ba" stroke-width="2"/>
<path d="M100 56 C 118 88 118 126 100 150 L 86 150 C 100 124 100 88 86 56 Z" fill="#000000" opacity="0.07"/>
<!-- collar ring -->
<ellipse cx="72" cy="60" rx="30" ry="9" fill="#ff7a45"/>
<ellipse cx="72" cy="57" rx="26" ry="7" fill="#ff9a6b"/>
<!-- chest panel -->
<rect x="52" y="84" width="42" height="28" rx="8" fill="#2a3550"/>
<rect x="56" y="88" width="34" height="11" rx="4" fill="#7ef0c0" opacity="0.9"/>
<circle cx="62" cy="106" r="3" fill="#ff7a45"/>
<circle cx="73" cy="106" r="3" fill="#ffd166"/>
<circle cx="84" cy="106" r="3" fill="#8ad7ff"/>
<!-- belt -->
<rect x="38" y="132" width="68" height="12" rx="6" fill="#ff7a45"/>
<!-- front arm -->
<g>
<animateTransform attributeName="transform" type="rotate"
values="-8 100 78; 8 100 78; -8 100 78" dur="2.6s" repeatCount="indefinite"/>
<path d="M100 80 C 128 70 148 54 158 36" fill="none" stroke="url(#suit)" stroke-width="19" stroke-linecap="round"/>
<circle cx="162" cy="32" r="12" fill="#f2f0e6"/>
<circle cx="162" cy="32" r="6" fill="#ddd9cd"/>
</g>
<!-- helmet -->
<g>
<circle cx="72" cy="14" r="56" fill="url(#suit)"/>
<circle cx="72" cy="14" r="56" fill="none" stroke="#c9c7ba" stroke-width="2"/>
<!-- visor -->
<ellipse cx="72" cy="18" rx="45" ry="41" fill="url(#visor)"/>
<ellipse cx="72" cy="18" rx="45" ry="41" fill="none" stroke="#bfc4d4" stroke-width="4"/>
<!-- cat ears inside helmet -->
<g fill="#f6f4ea">
<path d="M42 2 L 36 -26 L 60 -6 Z">
<animateTransform attributeName="transform" type="rotate" values="-6 50 -4; 6 50 -4; -6 50 -4" dur="3.1s" repeatCount="indefinite"/>
</path>
<path d="M102 2 L 108 -26 L 84 -6 Z">
<animateTransform attributeName="transform" type="rotate" values="6 94 -4; -6 94 -4; 6 94 -4" dur="3.1s" repeatCount="indefinite"/>
</path>
<path d="M45 -3 L 42 -16 L 54 -7 Z" fill="#ffb3c7"/>
<path d="M99 -3 L 102 -16 L 90 -7 Z" fill="#ffb3c7"/>
</g>
<!-- face -->
<ellipse cx="72" cy="20" rx="30" ry="26" fill="#f7f5ec"/>
<ellipse cx="60" cy="18" rx="5" ry="7" fill="#2a3550"/>
<ellipse cx="86" cy="18" rx="5" ry="7" fill="#2a3550"/>
<circle cx="61.5" cy="16" r="1.8" fill="#fff"/>
<circle cx="87.5" cy="16" r="1.8" fill="#fff"/>
<path d="M68 28 q4 4 8 0 l-4 5z" fill="#ff8fa3"/>
<path d="M72 33 q-5 6 -11 3 M72 33 q5 6 11 3" fill="none" stroke="#2a3550" stroke-width="2" stroke-linecap="round"/>
<g stroke="#c9c7ba" stroke-width="1.6" stroke-linecap="round">
<path d="M52 28 h-16 M52 33 h-15 M92 28 h16 M92 33 h15"/>
</g>
<!-- visor reflections -->
<path d="M42 -6 q14 -14 32 -10 q-16 10 -22 26 q-4 10 -10 4 q-6 -10 0 -20z" fill="#ffffff" opacity="0.35"/>
<ellipse cx="104" cy="40" rx="9" ry="5" fill="#ffffff" opacity="0.2" transform="rotate(-25 104 40)"/>
<!-- helmet lamp -->
<rect x="58" y="-42" width="28" height="9" rx="4" fill="#ff7a45"/>
<circle cx="72" cy="-46" r="4" fill="#fff3c4"/>
<path d="M72 -50 l0 -30" stroke="#ffffff" stroke-width="3" opacity="0.25"/>
<!-- antenna -->
<path d="M112 -28 q18 -12 14 -32" fill="none" stroke="#c9c7ba" stroke-width="4" stroke-linecap="round"/>
<circle cx="126" cy="-62" r="5" fill="#ff7a45">
<animate attributeName="opacity" values="1;0.25;1" dur="1.6s" repeatCount="indefinite"/>
</circle>
</g>
<!-- skateboard -->
<g transform="translate(0,6)">
<!-- hover glow -->
<ellipse cx="76" cy="250" rx="130" ry="30" fill="url(#boardGlow)"/>
<!-- deck -->
<path d="M-14 206 Q 76 232 166 206 L166 218 Q 76 246 -14 218 Z" fill="#ff7a45"/>
<path d="M-14 206 Q 76 232 166 206 L166 211 Q 76 238 -14 212 Z" fill="#ffb08a"/>
<path d="M-14 206 Q 76 232 166 206" fill="none" stroke="#8a8f9e" stroke-width="3"/>
<!-- trucks -->
<rect x="26" y="220" width="16" height="16" rx="4" fill="#b9bcc7"/>
<rect x="118" y="220" width="16" height="16" rx="4" fill="#b9bcc7"/>
<!-- wheels -->
<g>
<circle cx="34" cy="244" r="14" fill="#2b3350"/>
<g class="spin" style="transform-origin:34px 244px">
<rect x="33" y="232" width="3" height="24" fill="#7ef0c0"/>
<rect x="22" y="243" width="24" height="3" fill="#7ef0c0"/>
</g>
<circle cx="34" cy="244" r="4" fill="#c9c7ba"/>
</g>
<g>
<circle cx="126" cy="244" r="14" fill="#2b3350"/>
<g class="spin" style="transform-origin:126px 244px">
<rect x="125" y="232" width="3" height="24" fill="#7ef0c0"/>
<rect x="114" y="243" width="24" height="3" fill="#7ef0c0"/>
</g>
<circle cx="126" cy="244" r="4" fill="#c9c7ba"/>
</g>
<!-- thruster flames -->
<g opacity="0.85">
<path d="M44 250 q6 26 -2 38 q-10 -14 -6 -38z" fill="#8cf7ff" opacity="0.8">
<animate attributeName="opacity" values="0.9;0.45;0.9" dur="0.35s" repeatCount="indefinite"/>
</path>
<path d="M76 254 q7 30 -2 44 q-11 -16 -6 -44z" fill="#ffd166" opacity="0.75">
<animate attributeName="opacity" values="0.75;0.4;0.75" dur="0.28s" repeatCount="indefinite"/>
</path>
<path d="M110 250 q6 26 -2 38 q-10 -14 -6 -38z" fill="#8cf7ff" opacity="0.8">
<animate attributeName="opacity" values="0.85;0.5;0.85" dur="0.42s" repeatCount="indefinite"/>
</path>
</g>
</g>
<!-- dust puffs -->
<g fill="#e3e7f2">
<circle class="dust" cx="10" cy="252" r="12" style="animation-delay:0s"/>
<circle class="dust" cx="-10" cy="240" r="9" style="animation-delay:.5s"/>
<circle class="dust" cx="4" cy="268" r="8" style="animation-delay:1s"/>
<circle class="dust" cx="-4" cy="226" r="7" style="animation-delay:1.5s"/>
</g>
</g>
</g>
<!-- foreground sparkle -->
<g fill="#ffffff" opacity="0.8">
<circle class="twinkle" cx="420" cy="600" r="1.8" style="animation-delay:.7s"/>
<circle class="twinkle" cx="700" cy="640" r="1.5" style="animation-delay:1.8s"/>
<circle class="twinkle" cx="900" cy="600" r="1.7" style="animation-delay:2.5s"/>
<circle class="twinkle" cx="1080" cy="670" r="1.4" style="animation-delay:.3s"/>
</g>
</svg>Reasoning trace (2,157 tokens)
We need to output an SVG. Task says "draw me an SVG of an astronaut cat skateboarding on the moon". Output rules: one fenced code block with ```svg. But rules also mention HTML page... The task asks for SVG, so output ```svg block. It should be self-contained, viewBox, maybe with CSS animations inline. Let's make it nice.
Let me design an SVG scene: moon surface with craters, Earth in sky, stars, astronaut cat with helmet visor, riding a skateboard, motion lines, dust.
Dimensions 1280x800, viewBox "0 0 1280 800".
Let me draw carefully.
Elements:
- Background: dark space gradient, stars.
- Earth in upper right with glow.
- Moon surface at bottom: gray ground with craters, rolling hills.
- Cat astronaut: white/gray cat suit, helmet (glass dome with reflection), ears inside helmet, tail, arms out balancing, legs on skateboard.
- Skateboard: deck, wheels, glowing underside (moon low gravity, maybe hovering with glow thruster).
- Motion lines, dust puffs.
Animation: subtle bobbing of the cat, tail wag, drifting stars, wheels spin, dust.
I'll use SVG with <animate> elements (SMIL) — supported in Chrome. Or CSS animations in a <style> inside svg. CSS is fine.
Let me build the cat astronaut:
Group at translate, around x=560, y=430 on board.
Body: rounded rect-ish path for torso, from (540,380) to (620,480). Let's define coordinates locally within a group and use transform for animation.
Let me set up group "cat" transform="translate(420,330)":
- Tail behind: path curving up-left from (0,110) to (-90,40), stroke width 14 round, cream color.
- Legs: two legs from hips down to board: back leg at x=30, front leg x=90, bent.
- Torso: ellipse cx=60 cy=80 rx=48 ry=58, white suit with shading, chest panel.
- Arms: left arm out to the left up (balancing), right arm out to the right.
- Head: helmet sphere circle cx=60 cy=0 r=52; inner visor ellipse; cat face inside visor: ears triangles, eyes, nose, whiskers.
- Backpack on the side.
Skateboard under at y ~ 200 in that group.
Let me be concrete and write coordinates.
Cat group translate(430, 300):
- Tail: path M 20,150 C -40,160 -70,120 -60,80 stroke #F2F0E6 width 16 round. Add stripes.
- Helmet: circle cx=70 cy=10 r=55.
- Visor: ellipse cx=70 cy=12 rx=42 ry=38 fill dark blue gradient, with reflection highlight.
- Ears: inside visor, triangle paths at (45,-5) and (95,-5)? Ears should be at top of head inside helmet. path M 45,0 L 40,-28 L 62,-8 Z and mirrored.
- Face: eyes ellipses at (58,18) and (84,18) rx=5 ry=7 with pupils; nose triangle at (71,30); mouth.
- Whiskers lines.
- Torso: path rounded from (40,60) to (100,150): use path M 45,58 C 30,90 28,130 45,150 L 95,150 C 112,125 112,85 95,58 Z. Fill white suit.
- Chest control panel: rect rounded x=55 y=78 w=30 h=22 dark with lights.
- Backpack: rounded rect x=10 y=75 w=28 h=50 behind.
- Arms: left arm: path from (38,70) C 10,60 -10,40 -20,20 stroke width 18 round; with glove circle at end. Right arm: M 102,70 C 130,62 150,45 160,25.
- Legs: back leg: from (60,145) down-left knee to foot (35,190); front leg (90,145) to (100,195). Suit white with boot darker.
Skateboard group: deck as a rounded path (crescent) around y=205: M -20,200 Q 70,225 160,200 L 160,210 Q 70,235 -20,210 Z plus a top grip. Wheels: circles at (25,235) and (125,235) r=12 with hubs. Under glow: ellipse with blur? Use radial gradient ellipse for hover glow.
Also add thruster flames from board underside for fun.
Moon ground: path at bottom y=600-800 in gray with craters ellipse ellipses.
Stars: many small circles with twinkle animation.
Earth: circle at (1050,150) r=70 with continents paths, glow radial gradient, plus a ring.
Motion lines: horizontal lines behind the cat.
Let's write it. Use gradients defined in defs.
Careful with the "moon" ground and the cat position: cat group translate(430,300), board bottom around y=300+250=550. Ground surface around y=560-600. Good.
Add small flag, footprints? Keep it clean.
Let me write the code.
I'll include CSS animations: bob (cat translate y), tail swish, wheel rotate, star twinkle, dust drift, earth slow rotate.
Bob: transform on the outer group using CSS keyframes with transform translate? The group already has transform attribute; CSS animation on transform would override. Use nested groups: outer <g transform="translate(430,300)"> containing inner <g class="bob">. CSS .bob { animation: bob 2s ease-in-out infinite } with keyframes transform: translateY(0) -> translateY(-12px). Fine.
Wheels: use a group rotating about center. Use CSS transform-origin with transform-box: fill-box? Simpler: animate with SMIL animateTransform for wheel spokes rotation. Actually SMIL inside SVG works in Chrome. Use <animateTransform attributeName="transform" type="rotate" from="0 25 235" to="360 25 235" dur="1s" repeatCount="indefinite"/> on a wheel group — but group coordinates are within cat group; rotate origin in local coords works fine.
Let's write full SVG.
Star field: generate ~60 stars manually — tedious but fine; I'll write a decent number with varied sizes. Use a <g> with many circles. Maybe 40.
Let me write final SVG code.
Earth continents: simplified blobs.
Also add a flag planted on moon left side with cat paw print? Keep a small flag with a fish emblem.
I'll write it now.
Visor reflection: ellipse highlight path.
Write:
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="1280" height="800" role="img" aria-label="An astronaut cat skateboarding on the moon">
```
Add style block.
Defs:
- bgGrad radialGradient
- suitGrad linear
- visorGrad linear
- moonGrad linear
- earthGrad radial
- glow radial
- shadow radial
Let me carefully produce code.
Craters: ellipses with darker fill and lighter rim, plus small shadow.
Ground: path "M0,610 Q 160,580 320,606 Q 480,632 640,600 Q 800,570 960,604 Q 1120,636 1280,600 L1280,800 L0,800 Z" fill moonGrad. Add a lighter ridge line.
Then the shadow under skateboard: ellipse.
Ok writing final.
Tail animation: rotate about attach point. Use CSS transform on tail group with transform-origin at attach (in local coords). transform-origin in CSS on SVG element uses the element's own coordinate system; can use transform-origin: 20px 150px with transform-box: fill-box? Actually with transform-box: view-box default for SVG is view-box, so transform-origin: 20px 150px refers to the SVG user space of the nearest viewport... Hmm, for CSS transforms on SVG elements, the reference box default is view-box meaning coordinates relative to the viewBox origin, but the element's local coordinate system (after parent's transform) — transform-origin percentages resolve against the reference box. Safer: use SMIL animateTransform for tail with rotate values around a specific point, applied to a group with local coords — SMIL rotate "a x y" is in the local coordinate system, so tail group inside cat group: <g><animateTransform type="rotate" values="-12 20 150; 14 20 150; -12 20 150" dur="3s" repeatCount="indefinite"/> paths...</g>. Good, use SMIL for tail, wheels, ears, arm.
Ears twitch: also SMIL.
Bob: CSS on inner group is fine since it's a plain translate.
Ok let's write.
Details for cat suit colors: suit #F5F3EC, shading #DCD9CF, accent orange #FF8A3D (nasa-ish), visor #1B2A4A -> #0B1226, highlights.
Now write out the whole file.
Earth at (1040,140) r=72: ocean gradient blue, land green blobs, cloud swirls white with opacity, glow ring, and a small atmospheric rim.
Let's write final answer.
I'll compose carefully.
Stars list — I'll write ~45 circles with random-ish coords in upper region y<560.
Also a shooting star animated crossing.
Let me write.
For the flag: at x=180 on the ground, pole from (180,600) to (180,520), flag wave path animated.
Board glow: ellipse with radialGradient orange/purple, plus flame paths from underside with SMIL flicker opacity.
Okay, final code.
One more: the skateboard should look like it's hovering slightly with a neon glow (moon). Add wheels touching? Let's have wheels with small gap and glow beneath.
Write it.