Skateboarding astronaut catOne-line
Nemotron 3.5 Super VL (free)
by NVIDIAReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 16 s
- Cost
- $0
- Output tokens
- 8,845
- Spent thinking
- 5,513 tokens
- Speed
- 117.5 tok/s
- Console errors
- 0
- First token after
- 468 ms
- First visible text after
- 54.9 s
- Prompt tokens
- 366
- Code size
- 7.3 KB
- Finish reason
- stop
- Served by
- Nvidia
- Model id
nvidia/nemotron-3.5-super-vl:free- Reasoning sent
model default- Max output
- 32,000 tokens
- Generated
- Nov 9, 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 · 187 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #05050a;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
svg {
max-width: 98vw;
max-height: 92vh;
width: auto;
height: auto;
display: block;
}
</style>
</head>
<body>
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Astronaut cat skateboarding on the moon">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#02020a"/>
<stop offset="50%" stop-color="#12123a"/>
<stop offset="100%" stop-color="#1a1a4d"/>
</linearGradient>
<radialGradient id="earthGrad" cx="40%" cy="40%" r="60%">
<stop offset="0%" stop-color="#5aa9ff"/>
<stop offset="55%" stop-color="#2c6fb3"/>
<stop offset="100%" stop-color="#1a3e6b"/>
</radialGradient>
<radialGradient id="craterGrad" cx="40%" cy="40%" r="60%">
<stop offset="0%" stop-color="#c0c0c0"/>
<stop offset="100%" stop-color="#a8a8a8"/>
</radialGradient>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.35"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Sky -->
<rect width="800" height="500" fill="url(#skyGrad)"/>
<!-- Stars -->
<g fill="#ffffff">
<circle cx="60" cy="70" r="1.2" opacity="0.9"/>
<circle cx="140" cy="40" r="0.9" opacity="0.7"/>
<circle cx="200" cy="110" r="1.5" opacity="0.8"/>
<circle cx="260" cy="60" r="1" opacity="0.6"/>
<circle cx="320" cy="130" r="1.3" opacity="0.9"/>
<circle cx="380" cy="50" r="0.8" opacity="0.5"/>
<circle cx="450" cy="90" r="1.1" opacity="0.7"/>
<circle cx="520" cy="150" r="1.4" opacity="0.8"/>
<circle cx="580" cy="80" r="1" opacity="0.6"/>
<circle cx="640" cy="120" r="1.6" opacity="0.9"/>
<circle cx="700" cy="70" r="0.9" opacity="0.7"/>
<circle cx="760" cy="140" r="1.2" opacity="0.8"/>
<circle cx="730" cy="40" r="0.7" opacity="0.5"/>
<circle cx="50" cy="180" r="1" opacity="0.6"/>
<circle cx="170" cy="200" r="1.4" opacity="0.9"/>
<circle cx="620" cy="200" r="0.9" opacity="0.7"/>
<circle cx="770" cy="180" r="1.1" opacity="0.8"/>
<circle cx="300" cy="20" r="0.8" opacity="0.6"/>
<circle cx="550" cy="30" r="1.3" opacity="0.9"/>
</g>
<!-- Earth -->
<g transform="translate(640, 110)">
<circle r="58" fill="url(#earthGrad)"/>
<circle cx="-14" cy="-12" r="11" fill="#ffffff" opacity="0.55"/>
<circle cx="22" cy="18" r="8" fill="#ffffff" opacity="0.5"/>
<circle cx="-32" cy="28" r="9" fill="#ffffff" opacity="0.45"/>
<circle cx="8" cy="-30" r="7" fill="#ffffff" opacity="0.5"/>
<circle r="62" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.25"/>
</g>
<!-- Moon surface -->
<rect x="0" y="500" width="800" height="100" fill="#d3d3d3"/>
<rect x="0" y="500" width="800" height="7" fill="#bcbcbc"/>
<!-- Craters -->
<g filter="url(#softShadow)">
<circle cx="120" cy="545" r="26" fill="url(#craterGrad)"/>
<ellipse cx="116" cy="540" rx="11" ry="5" fill="#e8e8e8" opacity="0.7"/>
<circle cx="280" cy="525" r="18" fill="url(#craterGrad)"/>
<ellipse cx="276" cy="521" rx="7" ry="4" fill="#e8e8e8" opacity="0.7"/>
<circle cx="420" cy="560" r="22" fill="url(#craterGrad)"/>
<ellipse cx="416" cy="555" rx="9" ry="4" fill="#e8e8e8" opacity="0.7"/>
<circle cx="620" cy="535" r="30" fill="url(#craterGrad)"/>
<ellipse cx="615" cy="530" rx="13" ry="6" fill="#e8e8e8" opacity="0.7"/>
<circle cx="760" cy="575" r="14" fill="url(#craterGrad)"/>
<ellipse cx="757" cy="571" rx="6" ry="3" fill="#e8e8e8" opacity="0.7"/>
</g>
<!-- Skateboard -->
<g id="skateboard">
<!-- Wheels -->
<circle cx="365" cy="496" r="16" fill="#444"/>
<circle cx="435" cy="496" r="16" fill="#444"/>
<circle cx="365" cy="496" r="6" fill="#777"/>
<circle cx="435" cy="496" r="6" fill="#777"/>
<!-- Deck -->
<rect x="328" y="478" width="144" height="18" rx="9" fill="#ff6b6b"/>
<rect x="338" y="480" width="124" height="4" rx="2" fill="#e55555"/>
<!-- Trucks -->
<rect x="343" y="492" width="10" height="7" fill="#888"/>
<rect x="447" y="492" width="10" height="7" fill="#888"/>
</g>
<!-- Astronaut Cat -->
<g id="cat">
<!-- Tail -->
<path d="M 430,438 Q 470,438 495,375 Q 505,320 465,330" stroke="#f0f0f0" stroke-width="14" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Body suit -->
<rect x="360" y="392" width="80" height="88" rx="22" fill="#f5f5f5" stroke="#dcdcdc" stroke-width="2"/>
<line x1="400" y1="402" x2="400" y2="478" stroke="#ddd" stroke-width="2"/>
<rect x="376" y="422" width="18" height="26" rx="6" fill="#e6e6e6"/>
<!-- Legs -->
<rect x="366" y="462" width="24" height="34" rx="12" fill="#f5f5f5" transform="rotate(18 378 479)"/>
<circle cx="379" cy="479" r="9" fill="#e6e6e6"/>
<rect x="410" y="462" width="24" height="34" rx="12" fill="#f5f5f5" transform="rotate(-18 422 479)"/>
<circle cx="421" cy="479" r="9" fill="#e6e6e6"/>
<!-- Arms -->
<rect x="338" y="420" width="26" height="44" rx="13" fill="#f5f5f5" transform="rotate(-16 351 442)"/>
<circle cx="346" cy="468" r="8" fill="#e6e6e6"/>
<rect x="436" y="420" width="26" height="44" rx="13" fill="#f5f5f5" transform="rotate(16 449 442)"/>
<circle cx="454" cy="468" r="8" fill="#e6e6e6"/>
<!-- Helmet neck ring -->
<ellipse cx="400" cy="396" rx="40" ry="14" fill="#e0e0e0"/>
<!-- Helmet -->
<circle cx="400" cy="330" r="50" fill="#e8e8e8" stroke="#c9c9c9" stroke-width="3"/>
<!-- Ears -->
<polygon points="360,306 345,256 376,296" fill="#e8e8e8" stroke="#c9c9c9" stroke-width="2"/>
<polygon points="364,301 356,274 371,297" fill="#ffb6c1"/>
<polygon points="440,306 455,256 424,296" fill="#e8e8e8" stroke="#c9c9c9" stroke-width="2"/>
<polygon points="436,301 444,274 429,297" fill="#ffb6c1"/>
<!-- Visor -->
<ellipse cx="400" cy="330" rx="34" ry="26" fill="#cceeff" opacity="0.92"/>
<ellipse cx="392" cy="320" rx="7" ry="4" fill="#ffffff" opacity="0.7"/>
<!-- Face -->
<circle cx="391" cy="324" r="2.5" fill="#ffb6c1"/>
<circle cx="389" cy="321" r="2" fill="#333"/>
<circle cx="411" cy="321" r="2" fill="#333"/>
<path d="M 388,328 Q 395,332 402,328" fill="none" stroke="#333" stroke-width="1.8" stroke-linecap="round"/>
<line x1="382" y1="321" x2="371" y2="321" stroke="#333" stroke-width="1"/>
<line x1="418" y1="321" x2="429" y2="321" stroke="#333" stroke-width="1"/>
</g>
<!-- Motion lines under board -->
<g stroke="#ffffff" stroke-width="2" opacity="0.35" stroke-linecap="round">
<line x1="320" y1="504" x2="340" y2="508"/>
<line x1="350" y1="506" x2="370" y2="510"/>
<line x1="460" y1="504" x2="480" y2="508"/>
<line x1="490" y1="506" x2="510" y2="510"/>
</g>
</svg>
</body>
</html>Reasoning trace (5,513 tokens)
The user wants an SVG of an astronaut cat skateboarding on the moon. Since they want it self-contained and likely rendered in an iframe, I should provide a complete HTML file with inline SVG. Let me create a cute, detailed SVG illustration:
- Background: moon surface (gray craters, stars, Earth in sky perhaps)
- Astronaut cat: cat in a spacesuit with helmet
- Skateboard: under the cat's paws
- Style: flat vector, cute, colorful but space-themed
I'll make it responsive within the HTML, centered, viewBox appropriate. No external assets. Pure inline SVG.
Let me design the SVG:
- viewBox="0 0 800 600"
- Sky: dark gradient, stars, earth
- Moon surface: light gray with craters
- Skateboard: deck, wheels
- Cat: body, head, helmet visor, ears, tail, paws on board
- Astronaut suit details
I'll wrap in HTML with CSS to center it and make it responsive (max-width, height auto).
Let me write the code carefully.
Structure:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
body { margin: 0; background: #050508; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: sans-serif; }
svg { max-width: 100%; height: auto; display: block; }
</style>
</head>
<body>
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<!-- defs gradients -->
<!-- sky -->
<!-- moon ground -->
<!-- craters -->
<!-- earth -->
<!-- stars -->
<!-- skateboard -->
<!-- cat astronaut -->
</svg>
</body>
</html>
```
Let's detail the drawing.
Sky: rect 0 0 800 400 fill #0a0a1a maybe linear gradient to #1a1a3e at horizon.
Stars: small circles random positions white/yellow.
Earth: circle at top right, blue/green with white clouds.
Moon surface: rect or path from y=400 to 600, light gray #e0e0e0 with darker shadow.
Craters: ellipses/circles with darker fill and highlight rim.
Skateboard:
- Deck: rounded rect, maybe yellow or red, at bottom around y=500.
- Wheels: 4 circles gray.
- Cat standing on it.
Cat astronaut:
Group transformed maybe translate(400, 450).
- Body: suit white/gray, torso rect/rounded rect.
- Helmet: circle head with visor (light blue ellipse), antenna.
- Ears: cat ears sticking out of helmet? Or helmet covers ears but cat ears poke through? Cute: cat ears on top of helmet.
- Arms: reaching forward/down.
- Paws: on skateboard.
- Legs: bent on board.
- Tail: curving behind.
Let's approximate coordinates.
Center around cx=400.
Ground line y=420.
Skateboard deck: x=340 to 460, y=410 to 430 (thin), wheels below y=430 to 450.
Cat feet on deck around y=410.
Actually let's put ground at y=500 to give more space.
Sky: 0-500.
Ground: 500-600.
Skateboard wheels touch ground at y=500. Deck at y=480. Thickness 20.
Cat stands on deck, feet at y=480. Body extends up to y=300.
Helmet center: (400, 340), radius 45.
Visor: ellipse cx=400 cy=340 rx=30 ry=22 fill #b3e5fc.
Ears: triangles at (370,310) and (430,310) pink inside white.
Body suit: rounded rect x=355 y=380 width=90 height=100 rx=20 fill #f5f5f5.
Arms: lines or rounded rects from body to board.
Paws: small circles on board.
Legs: from suit bottom to board.
Tail: path curving behind from body to right side.
Let's write it out.
I need to ensure no horizontal scrollbar, responsive. The SVG has fixed viewBox but max-width:100% handles it.
Let's create the SVG content.
Defs:
- linearGradient skyGradient from #02020a to #1a1a4d to #2a2a6e? Actually space dark.
- radialGradient for craters.
- filter for drop shadow maybe? Keep simple.
Moon surface: rect x=0 y=500 width=800 height=100 fill #d3d3d3.
Darker shadow strip at y=500 height=10 fill #bcbcbc.
Craters: group of circles/ellipses:
- cx=100 cy=540 r=30 fill #c0c0c0, inner highlight #e8e8e8 ellipse.
- cx=250 cy=520 r=20
- cx=400 cy=560 r=25
- cx=600 cy=530 r=35
- cx=750 cy=570 r=15
Each crater: main circle darker, small inner ellipse lighter.
Stars: 30 small circles random white with opacity. I'll just place some manually or use a loop in JS? Since static SVG, I can manually place ~15 stars. Or use <script> to generate? Simpler to manually place a dozen. But to make it look nice, maybe use JS to scatter stars inside SVG? The instructions say everything inline. JS is fine. But no need, manual is okay. I'll manually place ~20 stars with varying sizes and opacities.
Earth: circle cx=650 cy=100 r=60 fill linear gradient blue/green. Overlay white clouds circles. Maybe a glow.
Skateboard:
- Wheels: two visible? Actually side view shows 2 wheels (one side) but cartoon can show 4: two on near side as circles, two on far side partially hidden. Let's do 2 wheels visible on side facing viewer, plus maybe deck shape implies width.
- Deck: rounded rect x=330 y=470 width=140 height=20 rx=10 fill #ff6b6b.
- Wheels: circles cx=360 cy=495 r=18 fill #555, cx=440 cy=495 r=18 fill #555.
- Wheel hubs: small circles #888.
- Grip tape: line on top? maybe not needed.
Cat:
Group id="cat" transform maybe.
Head/Helmet:
- Helmet outer: circle cx=400 cy=330 r=50 fill #e0e0e0 stroke #bdbdbd stroke-width=3.
- Visor: ellipse cx=400 cy=330 rx=34 ry=26 fill #cceeff opacity 0.9. Reflection: small white ellipse cx=390 cy=320 rx=8 ry=5 opacity 0.6.
- Helmet neck ring: ellipse cx=400 cy=380 rx=45 ry=15 fill #d3d3d3.
- Ears:
- Left ear outer: polygon points="365,310 350,260 380,300" fill #e0e0e0 stroke...
- Left ear inner: polygon points="368,305 360,275 375,302" fill #ffb6c1.
- Right ear outer: polygon points="435,310 450,260 420,300"...
- Right ear inner similar pink.
- Face details: maybe closed happy eyes (curves), nose triangle, mouth whiskers inside visor. Since visor covers face, we can draw simple face on top or slightly inside visor. Let's draw small closed eyes: arc or path. Nose: tiny pink circle. Whiskers: thin lines.
Body:
- Suit torso: rounded rect x=350 y=380 width=100 height=120 rx=25 fill #f0f0f0 stroke #ccc stroke-width=2.
- Suit details: zipper line x=400 y=390 to y=480 stroke #ccc. Rect patch on left arm maybe.
- Arms:
- Left arm (viewer's left): rounded rect x=330 y=420 width=25 height=50 rx=12 fill #f0f0f0, rotated -20 deg around 345,445? Simpler: use path or just rotated rect. Let's use transform rotate(-20 345 445). Ends at paw near board left side x=350 y=470.
- Right arm: rotated rect x=445 y=420 width=25 height=50 rx=12 transform rotate(20 455 445). Paw at x=450 y=470.
- Paws: circles r=8 fill #d3d3d3 at approx (350,472) and (450,472).
- Legs:
- Left leg: rounded rect x=370 y=485 width=30 height=50 rx=15 fill #f0f0f0 transform rotate(15 385 515)? Hmm leg goes down to board. Actually board deck top is y=470. Cat feet on deck. Legs go from suit bottom (y=500) up? Wait suit bottom y=380+120=500, but board is at y=470. That means suit overlaps board. Let's adjust: suit torso y=380 height=90 -> bottom 470. Then legs are short or tucked. Let's make cat crouching on skateboard.
Better: Cat is crouching/kneeling on skateboard.
- Torso: x=360 y=400 width=80 height=80 rx=20. Bottom at 480.
- Legs bent: upper leg from torso down to knee, lower leg to foot on board.
Simplify: just draw two leg shapes as rounded rects going down to feet on deck at y=470.
- Left leg: rounded rect x=365 y=460 width=22 height=30 rx=11 fill #f0f0f0 transform rotate(25 376 475). Foot circle at (375,475).
- Right leg: rounded rect x=413 y=460 width=22 height=30 rx=11 fill #f0f0f0 transform rotate(-25 424 475). Foot circle at (425,475).
Tail: path from body back (x=440, y=450) curving up and right: M 440,450 Q 480,450 490,400 Q 500,350 470,340 stroke #f0f0f0 stroke-width=12 fill none stroke-linecap=round. Then maybe white tip circle.
Actually tail behind body, so draw tail before body? Order: tail, then body, then head? Let's just draw tail first, then body over it.
Earth and stars in background.
Let's write full SVG.
Need to be careful with transforms and coordinates so it looks cohesive.
I'll add a title text? Maybe not necessary, but could add small text "Moon Mission" at bottom? The user asked for SVG of astronaut cat skateboarding. A simple label might be nice but not required. I'll skip text to keep focus on art.
Let's build the HTML string.
I'll ensure CSS: body dark, svg centered, max-width 95vw, max-height 90vh maybe.
Let's code it.
Potential issue: viewBox 800x600, on mobile 375px wide it scales down fine.
No external resources.
Let's produce the final code block.
I will write the SVG manually with careful coordinates.
Sky gradient:
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#02020a"/>
<stop offset="100%" stop-color="#1a1a3e"/>
</linearGradient>
Earth gradient:
<radialGradient id="earthGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#4a90e2"/>
<stop offset="100%" stop-color="#2c5aa0"/>
</radialGradient>
Stars: I'll add about 25 circles.
Moon ground:
<rect x="0" y="500" width="800" height="100" fill="#d3d3d3"/>
<rect x="0" y="500" width="800" height="8" fill="#bcbcbc"/>
Craters:
<g fill="#c0c0c0">
<circle cx="120" cy="540" r="28"/>
<ellipse cx="115" cy="535" rx="12" ry="6" fill="#e8e8e8"/>
...
</g>
Skateboard:
<g id="skateboard">
<!-- far side wheels maybe behind deck? Actually side view: deck on top, wheels below. -->
<circle cx="360" cy="495" r="18" fill="#444"/>
<circle cx="440" cy="495" r="18" fill="#444"/>
<rect x="330" y="470" width="140" height="20" rx="10" fill="#ff6b6b"/>
<!-- trucks -->
<rect x="345" y="488" width="10" height="8" fill="#888"/>
<rect x="445" y="488" width="10" height="8" fill="#888"/>
<circle cx="360" cy="495" r="6" fill="#777"/>
<circle cx="440" cy="495" r="6" fill="#777"/>
</g>
Wait, deck y=470 height=20 means bottom at 490. Wheels cy=495 r=18 means top at 477, overlapping deck slightly, bottom at 513 below ground y=500. Ground is 500-600. Wheel bottom at 513 goes into ground. That's fine, or set wheel cy=492 r=16 bottom 508. Let's set ground at y=500, wheels touch at y=500. Deck at y=475 height=15 bottom 490. Wheels cy=500 r=16. Good.
Cat group:
<g id="cat">
<!-- tail -->
<path d="M 430,440 Q 470,440 490,380 Q 500,320 460,330" stroke="#f0f0f0" stroke-width="14" fill="none" stroke-linecap="round"/>
<!-- body suit -->
<rect x="360" y="390" width="80" height="90" rx="22" fill="#f5f5f5" stroke="#dcdcdc" stroke-width="2"/>
<line x1="400" y1="400" x2="400" y2="480" stroke="#ddd" stroke-width="2"/>
<rect x="375" y="420" width="20" height="30" rx="5" fill="#e0e0e0"/> <!-- patch -->
<!-- left leg -->
<rect x="365" y="460" width="24" height="35" rx="12" fill="#f5f5f5" transform="rotate(20 377 477)"/>
<circle cx="378" cy="478" r="9" fill="#e0e0e0"/>
<!-- right leg -->
<rect x="411" y="460" width="24" height="35" rx="12" fill="#f5f5f5" transform="rotate(-20 423 477)"/>
<circle cx="422" cy="478" r="9" fill="#e0e0e0"/>
<!-- arms -->
<rect x="340" y="420" width="26" height="45" rx="13" fill="#f5f5f5" transform="rotate(-15 353 442)"/>
<circle cx="348" cy="470" r="8" fill="#e0e0e0"/>
<rect x="434" y="420" width="26" height="45" rx="13" fill="#f5f5f5" transform="rotate(15 447 442)"/>
<circle cx="452" cy="470" r="8" fill="#e0e0e0"/>
<!-- helmet neck -->
<ellipse cx="400" cy="395" rx="42" ry="16" fill="#e0e0e0"/>
<!-- head helmet -->
<circle cx="400" cy="330" r="52" fill="#e8e8e8" stroke="#c9c9c9" stroke-width="3"/>
<!-- ears -->
<polygon points="360,305 345,255 375,295" fill="#e8e8e8" stroke="#c9c9c9" stroke-width="2"/>
<polygon points="364,300 355,270 370,296" fill="#ffb6c1"/>
<polygon points="440,305 455,255 425,295" fill="#e8e8e8" stroke="#c9c9c9" stroke-width="2"/>
<polygon points="436,300 445,270 430,296" fill="#ffb6c1"/>
<!-- visor -->
<ellipse cx="400" cy="330" rx="35" ry="27" fill="#cceeff" opacity="0.92"/>
<ellipse cx="392" cy="320" rx="7" ry="4" fill="#ffffff" opacity="0.7"/>
<!-- face inside visor -->
<path d="M 388,328 Q 395,332 402,328" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/> <!-- mouth smile -->
<circle cx="392" cy="326" r="2.5" fill="#ffb6c1"/> <!-- nose -->
<circle cx="390" cy="322" r="2.5" fill="#333"/> <!-- left eye -->
<circle cx="410" cy="322" r="2.5" fill="#333"/> <!-- right eye -->
<line x1="382" y1="322" x2="370" y2="322" stroke="#333" stroke-width="1"/> <!-- whisker -->
<line x1="418" y1="322" x2="430" y2="322" stroke="#333" stroke-width="1"/>
</g>
Wait, paws on skateboard: the paws are at y=470, deck top y=475. Good. But legs rotated might look odd. Let's check transforms:
Left leg rect x=365 y=460 w24 h35 rotate(20 377 477). The rect center around (377,477). Rotation moves it. Might be okay.
Actually simpler: draw legs as simple paths or just omit detailed legs and have body directly above feet? But astronaut cat should have legs. The current approach is okay.
However, the body rect bottom y=480, legs start at y=460, so they overlap body. That's fine, legs in front of body? Order: body drawn before legs, so legs cover bottom of body. Good.
But arms: left arm x=340 y=420 rotate(-15 353 442). The paw at 348,470. Deck top y=475. Paw slightly above deck. Fine.
One issue: tail might overlap body if drawn before body. I drew tail first, so body covers tail base. Fine.
Let's add some moon dust / motion lines behind skateboard? Could add small lines under board to imply movement. But it's a static image; maybe subtle motion lines: a few dashed lines behind board. Not necessary.
Add two small craters in foreground near board? Already have craters on ground.
Add stars in sky. Let's place them manually:
<circle cx="100" cy="80" r="1.5" fill="#fff" opacity="0.8"/>
... many.
I'll include about 20.
Earth:
<g transform="translate(650,100)">
<circle r="60" fill="url(#earthGrad)"/>
<circle cx="-15" cy="-10" r="12" fill="#fff" opacity="0.6"/>
<circle cx="20" cy="15" r="8" fill="#fff" opacity="0.5"/>
<circle cx="-30" cy="25" r="10" fill="#fff" opacity="0.4"/>
<circle r="62" fill="none" stroke="#fff" stroke-width="1" opacity="0.3"/> <!-- glow ring -->
</g>
Also maybe a small "rocket" in distance? Not needed.
Let's assemble.
One more thing: user said "draw me an SVG". I can just output the SVG itself, but the system prompt says output exactly one fenced code block containing the complete file: ```html ... ```. So I must wrap in HTML. Good.
Let's write the HTML.
I need to make sure no external images. All inline.
Potential console errors: none, pure SVG.
Responsive: CSS:
html, body { margin:0; height:100%; }
body { display:flex; place-items:center; background:#05050a; }
svg { max-width: 98vw; max-height: 90vh; height: auto; width: auto; }
Actually max-height and max-width together might distort? No, SVG preserves aspect ratio by default. With max-width and max-height constraints, it scales down uniformly. Good.
Let's write 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.0">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #05050a;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
svg {
max-width: 98vw;
max-height: 92vh;
width: auto;
height: auto;
display: block;
}
</style>
</head>
<body>
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Astronaut cat skateboarding on the moon">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#02020a"/>
<stop offset="50%" stop-color="#12123a"/>
<stop offset="100%" stop-color="#1a1a4d"/>
</linearGradient>
<radialGradient id="earthGrad" cx="40%" cy="40%" r="60%">
<stop offset="0%" stop-color="#5aa9ff"/>
<stop offset="55%" stop-color="#2c6fb3"/>
<stop offset="100%" stop-color="#1a3e6b"/>
</radialGradient>
<radialGradient id="craterGrad" cx="40%" cy="40%" r="60%">
<stop offset="0%" stop-color="#c0c0c0"/>
<stop offset="100%" stop-color="#a8a8a8"/>
</radialGradient>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.35"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Sky -->
<rect width="800" height="500" fill="url(#skyGrad)"/>
<!-- Stars -->
<g fill="#ffffff">
<circle cx="60" cy="70" r="1.2" opacity="0.9"/>
<circle cx="140" cy="40" r="0.9" opacity="0.7"/>
<circle cx="200" cy="110" r="1.5" opacity="0.8"/>
<circle cx="260" cy="60" r="1" opacity="0.6"/>
<circle cx="320" cy="130" r="1.3" opacity="0.9"/>
<circle cx="380" cy="50" r="0.8" opacity="0.5"/>
<circle cx="450" cy="90" r="1.1" opacity="0.7"/>
<circle cx="520" cy="150" r="1.4" opacity="0.8"/>
<circle cx="580" cy="80" r="1" opacity="0.6"/>
<circle cx="640" cy="120" r="1.6" opacity="0.9"/>
<circle cx="700" cy="70" r="0.9" opacity="0.7"/>
<circle cx="760" cy="140" r="1.2" opacity="0.8"/>
<circle cx="730" cy="40" r="0.7" opacity="0.5"/>
<circle cx="50" cy="180" r="1" opacity="0.6"/>
<circle cx="170" cy="200" r="1.4" opacity="0.9"/>
<circle cx="620" cy="200" r="0.9" opacity="0.7"/>
<circle cx="770" cy="180" r="1.1" opacity="0.8"/>
<circle cx="300" cy="20" r="0.8" opacity="0.6"/>
<circle cx="550" cy="30" r="1.3" opacity="0.9"/>
</g>
<!-- Earth -->
<g transform="translate(640, 110)">
<circle r="58" fill="url(#earthGrad)"/>
<circle cx="-14" cy="-12" r="11" fill="#ffffff" opacity="0.55"/>
<circle cx="22" cy="18" r="8" fill="#ffffff" opacity="0.5"/>
<circle cx="-32" cy="28" r="9" fill="#ffffff" opacity="0.45"/>
<circle cx="8" cy="-30" r="7" fill="#ffffff" opacity="0.5"/>
<circle r="62" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.25"/>
</g>
<!-- Moon surface -->
<rect x="0" y="500" width="800" height="100" fill="#d3d3d3"/>
<rect x="0" y="500" width="800" height="7" fill="#bcbcbc"/>
<!-- Craters -->
<g filter="url(#softShadow)">
<circle cx="120" cy="545" r="26" fill="url(#craterGrad)"/>
<ellipse cx="116" cy="540" rx="11" ry="5" fill="#e8e8e8" opacity="0.7"/>
<circle cx="280" cy="525" r="18" fill="url(#craterGrad)"/>
<ellipse cx="276" cy="521" rx="7" ry="4" fill="#e8e8e8" opacity="0.7"/>
<circle cx="420" cy="560" r="22" fill="url(#craterGrad)"/>
<ellipse cx="416" cy="555" rx="9" ry="4" fill="#e8e8e8" opacity="0.7"/>
<circle cx="620" cy="535" r="30" fill="url(#craterGrad)"/>
<ellipse cx="615" cy="530" rx="13" ry="6" fill="#e8e8e8" opacity="0.7"/>
<circle cx="760" cy="575" r="14" fill="url(#craterGrad)"/>
<ellipse cx="757" cy="571" rx="6" ry="3" fill="#e8e8e8" opacity="0.7"/>
</g>
<!-- Skateboard -->
<g id="skateboard">
<!-- Wheels -->
<circle cx="365" cy="496" r="16" fill="#444"/>
<circle cx="435" cy="496" r="16" fill="#444"/>
<circle cx="365" cy="496" r="6" fill="#777"/>
<circle cx="435" cy="496" r="6" fill="#777"/>
<!-- Deck -->
<rect x="328" y="478" width="144" height="18" rx="9" fill="#ff6b6b"/>
<rect x="338" y="480" width="124" height="4" rx="2" fill="#e55555"/>
<!-- Trucks -->
<rect x="343" y="492" width="10" height="7" fill="#888"/>
<rect x="447" y="492" width="10" height="7" fill="#888"/>
</g>
<!-- Astronaut Cat -->
<g id="cat">
<!-- Tail -->
<path d="M 430,438 Q 470,438 495,375 Q 505,320 465,330" stroke="#f0f0f0" stroke-width="14" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Body suit -->
<rect x="360" y="392" width="80" height="88" rx="22" fill="#f5f5f5" stroke="#dcdcdc" stroke-width="2"/>
<line x1="400" y1="402" x2="400" y2="478" stroke="#ddd" stroke-width="2"/>
<rect x="376" y="422" width="18" height="26" rx="6" fill="#e6e6e6"/>
<!-- Legs -->
<rect x="366" y="462" width="24" height="34" rx="12" fill="#f5f5f5" transform="rotate(18 378 479)"/>
<circle cx="379" cy="479" r="9" fill="#e6e6e6"/>
<rect x="410" y="462" width="24" height="34" rx="12" fill="#f5f5f5" transform="rotate(-18 422 479)"/>
<circle cx="421" cy="479" r="9" fill="#e6e6e6"/>
<!-- Arms -->
<rect x="338" y="420" width="26" height="44" rx="13" fill="#f5f5f5" transform="rotate(-16 351 442)"/>
<circle cx="346" cy="468" r="8" fill="#e6e6e6"/>
<rect x="436" y="420" width="26" height="44" rx="13" fill="#f5f5f5" transform="rotate(16 449 442)"/>
<circle cx="454" cy="468" r="8" fill="#e6e6e6"/>
<!-- Helmet neck ring -->
<ellipse cx="400" cy="396" rx="40" ry="14" fill="#e0e0e0"/>
<!-- Helmet -->
<circle cx="400" cy="330" r="50" fill="#e8e8e8" stroke="#c9c9c9" stroke-width="3"/>
<!-- Ears -->
<polygon points="360,306 345,256 376,296" fill="#e8e8e8" stroke="#c9c9c9" stroke-width="2"/>
<polygon points="364,301 356,274 371,297" fill="#ffb6c1"/>
<polygon points="440,306 455,256 424,296" fill="#e8e8e8" stroke="#c9c9c9" stroke-width="2"/>
<polygon points="436,301 444,274 429,297" fill="#ffb6c1"/>
<!-- Visor -->
<ellipse cx="400" cy="330" rx="34" ry="26" fill="#cceeff" opacity="0.92"/>
<ellipse cx="392" cy="320" rx="7" ry="4" fill="#ffffff" opacity="0.7"/>
<!-- Face -->
<circle cx="391" cy="324" r="2.5" fill="#ffb6c1"/>
<circle cx="389" cy="321" r="2" fill="#333"/>
<circle cx="411" cy="321" r="2" fill="#333"/>
<path d="M 388,328 Q 395,332 402,328" fill="none" stroke="#333" stroke-width="1.8" stroke-linecap="round"/>
<line x1="382" y1="321" x2="371" y2="321" stroke="#333" stroke-width="1"/>
<line x1="418" y1="321" x2="429" y2="321" stroke="#333" stroke-width="1"/>
</g>
<!-- Motion lines under board -->
<g stroke="#ffffff" stroke-width="2" opacity="0.35" stroke-linecap="round">
<line x1="320" y1="504" x2="340" y2="508"/>
<line x1="350" y1="506" x2="370" y2="510"/>
<line x1="460" y1="504" x2="480" y2="508"/>
<line x1="490" y1="506" x2="510" y2="510"/>
</g>
</svg>
</body>
</html>
```