Skateboarding astronaut catOne-line

Gemini 3.8 Flash

by GoogleReasoningClean

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 1 min 39 s
Cost: $0.060
Output tokens: 15,833
Spent thinking: 1,099 tokens
Speed: 163.3 tok/s
Console errors: 0

First token after: 2.2 s
First visible text after: 13.2 s
Prompt tokens: 353
Code size: 32.7 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.8-flash
Reasoning sent: model default
Max output: 65,536 tokens
Generated: Nov 12, 2026

What it was asked

The prompt

“draw me an SVG of an astronaut cat skateboarding on the moon”

System prompt, sent with every prompt

You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.svg · 640 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="100%" height="100%">
  <defs>
    <!-- Background Gradients -->
    <radialGradient id="spaceBg" cx="50%" cy="40%" r="80%">
      <stop offset="0%" stop-color="#120b38" />
      <stop offset="45%" stop-color="#08041a" />
      <stop offset="100%" stop-color="#020108" />
    </radialGradient>

    <radialGradient id="nebulaPurple" cx="30%" cy="25%" r="50%">
      <stop offset="0%" stop-color="#b5179e" stop-opacity="0.35" />
      <stop offset="50%" stop-color="#7209b7" stop-opacity="0.15" />
      <stop offset="100%" stop-color="#3f37c9" stop-opacity="0" />
    </radialGradient>

    <radialGradient id="nebulaCyan" cx="75%" cy="35%" r="45%">
      <stop offset="0%" stop-color="#4cc9f0" stop-opacity="0.25" />
      <stop offset="60%" stop-color="#4361ee" stop-opacity="0.08" />
      <stop offset="100%" stop-color="#3a0ca3" stop-opacity="0" />
    </radialGradient>

    <radialGradient id="earthAtmosphere" cx="40%" cy="40%" r="60%">
      <stop offset="70%" stop-color="#00b4d8" stop-opacity="0" />
      <stop offset="95%" stop-color="#48cae4" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#90e0ef" stop-opacity="0.9" />
    </radialGradient>

    <!-- Moon Shading -->
    <radialGradient id="moonGrad" cx="50%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#e2e8f0" />
      <stop offset="40%" stop-color="#cbd5e1" />
      <stop offset="75%" stop-color="#94a3b8" />
      <stop offset="100%" stop-color="#475569" />
    </radialGradient>

    <linearGradient id="moonHorizon" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#64748b" />
      <stop offset="25%" stop-color="#334155" />
      <stop offset="100%" stop-color="#0f172a" />
    </linearGradient>

    <!-- Suit & Gear Gradients -->
    <linearGradient id="suitWhite" x1="20%" y1="0%" x2="80%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="50%" stop-color="#f1f5f9" />
      <stop offset="85%" stop-color="#cbd5e1" />
      <stop offset="100%" stop-color="#94a3b8" />
    </linearGradient>

    <linearGradient id="suitShadow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#94a3b8" />
      <stop offset="100%" stop-color="#475569" />
    </linearGradient>

    <linearGradient id="visorGold" x1="20%" y1="10%" x2="90%" y2="90%">
      <stop offset="0%" stop-color="#fffbeb" />
      <stop offset="20%" stop-color="#fde047" />
      <stop offset="50%" stop-color="#f59e0b" />
      <stop offset="80%" stop-color="#d97706" />
      <stop offset="100%" stop-color="#78350f" />
    </linearGradient>

    <linearGradient id="visorGlass" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.7" />
      <stop offset="35%" stop-color="#818cf8" stop-opacity="0.3" />
      <stop offset="70%" stop-color="#c084fc" stop-opacity="0.2" />
      <stop offset="100%" stop-color="#1e1b4b" stop-opacity="0.75" />
    </linearGradient>

    <!-- Skateboard Gradients -->
    <linearGradient id="deckGrip" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#1e1e24" />
      <stop offset="50%" stop-color="#2b2d42" />
      <stop offset="100%" stop-color="#111116" />
    </linearGradient>

    <linearGradient id="deckUnderside" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff007f" />
      <stop offset="40%" stop-color="#7928ca" />
      <stop offset="70%" stop-color="#00f2fe" />
      <stop offset="100%" stop-color="#4facfe" />
    </linearGradient>

    <radialGradient id="thrusterGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#00ffff" />
      <stop offset="40%" stop-color="#0077ff" stop-opacity="0.8" />
      <stop offset="80%" stop-color="#7928ca" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0" />
    </radialGradient>

    <linearGradient id="flameGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="25%" stop-color="#00ffff" />
      <stop offset="60%" stop-color="#3a86ff" />
      <stop offset="100%" stop-color="#ff006e" stop-opacity="0" />
    </linearGradient>

    <!-- Filters -->
    <filter id="neonGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="6" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <filter id="softGlow">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <filter id="earthShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="-15" dy="10" stdDeviation="12" flood-color="#000" flood-opacity="0.8" />
    </filter>
  </defs>

  <style>
    /* Subtle Floating & Twinkle Animations */
    @keyframes twinkle {
      0%, 100% { opacity: 0.3; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.2); }
    }
    @keyframes floatSkater {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-14px) rotate(-1.5deg); }
    }
    @keyframes flamePulse {
      0%, 100% { transform: scale(1) skewX(0deg); opacity: 0.9; }
      50% { transform: scale(1.18, 0.92) skewX(-2deg); opacity: 1; filter: drop-shadow(0 0 10px #00ffff); }
    }
    @keyframes dustFloat {
      0% { transform: translateY(0) scale(1); opacity: 0.7; }
      100% { transform: translateY(-30px) scale(0.4); opacity: 0; }
    }

    .star-twinkle-1 { animation: twinkle 3s ease-in-out infinite; }
    .star-twinkle-2 { animation: twinkle 4.5s ease-in-out infinite 1s; }
    .star-twinkle-3 { animation: twinkle 2.2s ease-in-out infinite 0.5s; }
    
    .skater-group { animation: floatSkater 6s ease-in-out infinite; transform-origin: 500px 500px; }
    .thruster-flame { animation: flamePulse 0.15s ease-in-out infinite alternate; transform-origin: 290px 620px; }
    .dust-p1 { animation: dustFloat 2.5s infinite linear; }
    .dust-p2 { animation: dustFloat 3.2s infinite linear 0.8s; }
    .dust-p3 { animation: dustFloat 2s infinite linear 1.4s; }
  </style>

  <!-- ================= BACKGROUND SPACE ================= -->
  <rect width="1000" height="1000" fill="url(#spaceBg)" />
  <rect width="1000" height="1000" fill="url(#nebulaPurple)" />
  <rect width="1000" height="1000" fill="url(#nebulaCyan)" />

  <!-- Stars Field (Coordinates carefully placed) -->
  <g id="stars" fill="#fff">
    <!-- Tiny Stars -->
    <circle cx="85" cy="120" r="1.5" opacity="0.6" />
    <circle cx="140" cy="320" r="1" opacity="0.4" />
    <circle cx="230" cy="80" r="1.5" opacity="0.8" />
    <circle cx="310" cy="190" r="1" opacity="0.5" />
    <circle cx="450" cy="70" r="2" opacity="0.9" />
    <circle cx="580" cy="160" r="1" opacity="0.4" />
    <circle cx="670" cy="90" r="1.5" opacity="0.7" />
    <circle cx="920" cy="280" r="1" opacity="0.6" />
    <circle cx="80" cy="450" r="1.5" opacity="0.5" />
    <circle cx="940" cy="480" r="2" opacity="0.7" />
    <circle cx="210" cy="520" r="1" opacity="0.4" />
    <circle cx="880" cy="110" r="1.5" opacity="0.8" />
    <circle cx="520" cy="270" r="1.2" opacity="0.3" />

    <!-- Animated Twinkling Cross Stars -->
    <g class="star-twinkle-1" transform="translate(180, 220)">
      <path d="M0,-8 Q0,0 8,0 Q0,0 0,8 Q0,0 -8,0 Q0,0 0,-8 Z" fill="#ffffff" />
      <circle cx="0" cy="0" r="2" fill="#a5f3fc" />
    </g>
    <g class="star-twinkle-2" transform="translate(740, 120)">
      <path d="M0,-12 Q0,0 12,0 Q0,0 0,12 Q0,0 -12,0 Q0,0 0,-12 Z" fill="#ffffff" />
      <circle cx="0" cy="0" r="3" fill="#fbcfe8" />
    </g>
    <g class="star-twinkle-3" transform="translate(110, 80)">
      <path d="M0,-10 Q0,0 10,0 Q0,0 0,10 Q0,0 -10,0 Q0,0 0,-10 Z" fill="#ffffff" />
      <circle cx="0" cy="0" r="2" fill="#c7d2fe" />
    </g>
    <g class="star-twinkle-2" transform="translate(420, 180)">
      <path d="M0,-7 Q0,0 7,0 Q0,0 0,7 Q0,0 -7,0 Q0,0 0,-7 Z" fill="#ffffff" opacity="0.85" />
    </g>
    <g class="star-twinkle-1" transform="translate(890, 390)">
      <path d="M0,-9 Q0,0 9,0 Q0,0 0,9 Q0,0 -9,0 Q0,0 0,-9 Z" fill="#67e8f9" />
    </g>
  </g>

  <!-- Distant Earth -->
  <g id="earth" transform="translate(820, 180)">
    <!-- Atmosphere Glow Behind -->
    <circle cx="0" cy="0" r="76" fill="#00f2fe" opacity="0.2" filter="url(#neonGlow)" />
    <!-- Planet Base -->
    <circle cx="0" cy="0" r="70" fill="#03045e" />
    <!-- Oceans / Landmasses (Clipped) -->
    <g clip-path="url(#earthClip)">
      <clipPath id="earthClip">
        <circle cx="0" cy="0" r="70" />
      </clipPath>
      <circle cx="0" cy="0" r="70" fill="#0077b6" />
      <!-- Continents -->
      <path d="M-40,-30 Q-20,-50 10,-40 Q30,-30 40,-10 Q50,20 20,40 Q-10,30 -20,10 Q-30,20 -50,0 Z" fill="#2a9d8f" opacity="0.9" />
      <path d="M-10,-60 Q20,-60 25,-45 Q10,-35 -15,-40 Z" fill="#2a9d8f" opacity="0.9" />
      <path d="M10,20 Q40,10 50,35 Q30,60 5,50 Z" fill="#2a9d8f" opacity="0.8" />
      <!-- Cloud swirls -->
      <path d="M-60,-20 Q-20,-10 0,-30 T50,-10" stroke="#ffffff" stroke-width="6" fill="none" opacity="0.65" stroke-linecap="round" />
      <path d="M-40,25 Q0,10 30,30 T70,10" stroke="#ffffff" stroke-width="7" fill="none" opacity="0.6" stroke-linecap="round" />
      <!-- Planet Night Shadow Overlay -->
      <path d="M-70,-70 A70,70 0 0,1 70,70 A70,70 0 1,1 -70,-70" fill="#020314" opacity="0.55" />
    </g>
    <!-- Outer Atmospheric Rim -->
    <circle cx="0" cy="0" r="70" fill="url(#earthAtmosphere)" />
  </g>

  <!-- Distant Constellation: Cat Paw in the Stars -->
  <g id="constellation" stroke="#a5b4fc" stroke-width="1" opacity="0.35" stroke-dasharray="3 3" fill="none">
    <path d="M140,280 L160,250 L195,260 L210,290 L175,310 Z" />
    <circle cx="140" cy="280" r="2.5" fill="#c7d2fe" />
    <circle cx="160" cy="250" r="2.5" fill="#c7d2fe" />
    <circle cx="195" cy="260" r="2.5" fill="#c7d2fe" />
    <circle cx="210" cy="290" r="2.5" fill="#c7d2fe" />
    <circle cx="175" cy="310" r="2.5" fill="#c7d2fe" />
    <!-- Toe beans -->
    <circle cx="130" cy="245" r="2" fill="#f472b6" />
    <circle cx="160" cy="225" r="2" fill="#f472b6" />
    <circle cx="195" cy="230" r="2" fill="#f472b6" />
    <circle cx="225" cy="260" r="2" fill="#f472b6" />
  </g>

  <!-- ================= MOON SURFACE & CRATERS ================= -->
  <g id="moonSurface">
    <!-- Distant Lunar Hills -->
    <path d="M-50,780 Q150,710 400,740 T900,710 Q1000,720 1050,750 L1050,1000 L-50,1000 Z" fill="#1e293b" opacity="0.7" />
    <path d="M-50,810 Q200,760 550,790 T1050,760 L1050,1000 L-50,1000 Z" fill="#334155" opacity="0.85" />

    <!-- Main Moon Horizon (Curved Launch Ramp Crater) -->
    <path d="M-20,830 Q180,820 380,800 Q540,780 720,825 Q880,860 1020,830 L1020,1020 L-20,1020 Z" fill="url(#moonHorizon)" />

    <!-- Foreground Lunar Terrain with Texture -->
    <path d="M-10,860 Q120,840 280,845 T620,840 Q820,880 1010,850 L1010,1010 L-10,1010 Z" fill="url(#moonGrad)" />

    <!-- Big Skate-Lip Crater (The ramp the cat launched from!) -->
    <g id="launchCrater" transform="translate(260, 850)">
      <!-- Crater Rim Outer Glow/Light -->
      <ellipse cx="0" cy="0" rx="140" ry="42" fill="#475569" stroke="#94a3b8" stroke-width="3" />
      <!-- Crater Shadow Inside -->
      <ellipse cx="-5" cy="5" rx="125" ry="34" fill="#0f172a" />
      <!-- Crater Inner Floor -->
      <ellipse cx="-15" cy="10" rx="95" ry="22" fill="#1e293b" />
      <path d="M-110, -5 Q-30, -25 80, -8 Q130, 2 138, 5 Q80, -12 -20, -10 Q-80, -5 -110, -5 Z" fill="#f1f5f9" opacity="0.6" />
    </g>

    <!-- Additional Craters -->
    <g id="crater1" transform="translate(780, 890) rotate(-5)">
      <ellipse cx="0" cy="0" rx="90" ry="28" fill="#334155" stroke="#64748b" stroke-width="2" />
      <ellipse cx="-4" cy="4" rx="78" ry="21" fill="#0f172a" />
      <ellipse cx="-10" cy="7" rx="55" ry="14" fill="#1e293b" />
      <path d="M-70,-3 Q0,-16 65,-4" stroke="#cbd5e1" stroke-width="2" fill="none" opacity="0.5" />
    </g>

    <g id="craterSmall" transform="translate(110, 910)">
      <ellipse cx="0" cy="0" rx="45" ry="14" fill="#334155" stroke="#64748b" stroke-width="1.5" />
      <ellipse cx="-2" cy="2" rx="38" ry="10" fill="#0f172a" />
    </g>

    <g id="craterTiny" transform="translate(540, 930)">
      <ellipse cx="0" cy="0" rx="28" ry="8" fill="#1e293b" stroke="#475569" stroke-width="1" />
      <ellipse cx="-2" cy="1" rx="22" ry="5" fill="#090d16" />
    </g>

    <!-- Apollo Style Flagpole with Cat Paw Mission Flag -->
    <g id="moonFlag" transform="translate(130, 770)">
      <!-- Pole -->
      <line x1="0" y1="0" x2="0" y2="75" stroke="#e2e8f0" stroke-width="2.5" />
      <line x1="0" y1="0" x2="42" y2="0" stroke="#cbd5e1" stroke-width="1.5" />
      <!-- Flag Banner -->
      <path d="M0,0 Q20,-4 42,0 L42,28 Q20,24 0,28 Z" fill="#ec4899" />
      <!-- Paw icon on flag -->
      <circle cx="20" cy="14" r="4.5" fill="#ffffff" />
      <circle cx="14" cy="8" r="1.8" fill="#ffffff" />
      <circle cx="19" cy="6" r="1.8" fill="#ffffff" />
      <circle cx="25" cy="7" r="1.8" fill="#ffffff" />
      <circle cx="28" cy="11" r="1.6" fill="#ffffff" />
      <!-- Base rocks -->
      <ellipse cx="0" cy="75" rx="7" ry="2.5" fill="#334155" />
    </g>

    <!-- Moon Footprints (Pawprints in regolith!) -->
    <g id="pawprints" fill="#1e293b" opacity="0.6">
      <ellipse cx="220" cy="815" rx="5" ry="3.5" />
      <circle cx="215" cy="810" r="1.2" />
      <circle cx="219" cy="808" r="1.2" />
      <circle cx="224" cy="809" r="1.2" />

      <ellipse cx="245" cy="810" rx="5" ry="3.5" transform="rotate(10 245 810)" />
      <circle cx="241" cy="805" r="1.2" />
      <circle cx="246" cy="803" r="1.2" />
      <circle cx="251" cy="805" r="1.2" />
    </g>
  </g>

  <!-- ================= LOW GRAVITY DUST PARTICLES ================= -->
  <g id="moonDust" fill="#e2e8f0">
    <circle class="dust-p1" cx="320" cy="780" r="3" opacity="0.7" />
    <circle class="dust-p2" cx="300" cy="765" r="2" opacity="0.6" />
    <circle class="dust-p3" cx="345" cy="790" r="2.5" opacity="0.8" />
    <circle class="dust-p1" cx="280" cy="795" r="1.5" opacity="0.5" />
    <circle class="dust-p2" cx="370" cy="770" r="3.5" opacity="0.4" />
    <circle class="dust-p3" cx="390" cy="740" r="2" opacity="0.6" />
  </g>

  <!-- ================= THE ASTRONAUT CAT & SKATEBOARD ================= -->
  <!-- Animated container for floating low-G suspension -->
  <g class="skater-group">

    <!-- Speed / Action Lines in Space -->
    <g stroke="url(#flameGrad)" stroke-width="2.5" stroke-linecap="round" opacity="0.5" fill="none">
      <path d="M220,680 Q290,620 340,600" />
      <path d="M190,640 Q260,590 310,580" stroke-width="1.5" />
      <path d="M260,720 Q330,680 390,660" stroke-width="2" />
    </g>

    <!-- ====== SKATEBOARD ====== -->
    <!-- Board Group tilted up in mid-air melon-grab / kickflip air trick (angle ~ -20 deg) -->
    <g id="skateboard" transform="translate(480, 610) rotate(-18)">

      <!-- Dual Rocket Thrusters Underneath Deck -->
      <g id="thrusters" transform="translate(-130, 22)">
        <!-- Thruster Bracket / Engine Mount -->
        <rect x="0" y="-8" width="22" height="16" rx="3" fill="#475569" stroke="#334155" stroke-width="1.5" />
        <path d="M12,-10 L32,-14 L32,14 L12,10 Z" fill="#64748b" />
        <ellipse cx="32" cy="0" rx="4" ry="14" fill="#1e293b" stroke="#00f2fe" stroke-width="1.5" />

        <!-- Thruster Plasma Glow & Flame (Animated) -->
        <ellipse cx="50" cy="0" rx="35" ry="18" fill="url(#thrusterGlow)" opacity="0.7" />
        <path class="thruster-flame" d="M32,-11 Q85,-8 115,0 Q85,8 32,11 Q55,0 32,-11 Z" fill="url(#flameGrad)" filter="url(#softGlow)" />
        <path class="thruster-flame" d="M32,-5 Q65,-3 85,0 Q65,3 32,5 Z" fill="#ffffff" />
      </g>

      <!-- Front and Back Skateboard Trucks -->
      <!-- Back Truck -->
      <g id="backTruck" transform="translate(-110, 18)">
        <path d="M-8,-4 L12,-4 L7,12 L-3,12 Z" fill="#94a3b8" stroke="#475569" stroke-width="1" />
        <rect x="-16" y="10" width="36" height="6" rx="2" fill="#cbd5e1" />
        <!-- Wheels (Translucent Cyberpunk Cyan) -->
        <circle cx="-16" cy="13" r="14" fill="#00f2fe" opacity="0.85" stroke="#ffffff" stroke-width="2" />
        <circle cx="-16" cy="13" r="6" fill="#0f172a" />
        <circle cx="-16" cy="13" r="2.5" fill="#38bdf8" />
      </g>

      <!-- Front Truck -->
      <g id="frontTruck" transform="translate(110, 18)">
        <path d="M-8,-4 L12,-4 L7,12 L-3,12 Z" fill="#94a3b8" stroke="#475569" stroke-width="1" />
        <rect x="-16" y="10" width="36" height="6" rx="2" fill="#cbd5e1" />
        <!-- Wheels -->
        <circle cx="18" cy="13" r="14" fill="#ff007f" opacity="0.85" stroke="#ffffff" stroke-width="2" />
        <circle cx="18" cy="13" r="6" fill="#0f172a" />
        <circle cx="18" cy="13" r="2.5" fill="#f43f5e" />
      </g>

      <!-- Skateboard Deck Core / Underside Graphics -->
      <path d="M-190,-4 Q-210,-12 -180,-14 L180,-14 Q210,-12 190,-4 Q170,8 -170,8 Z" fill="url(#deckUnderside)" />
      <!-- Neon Deck Edge Stripe -->
      <path d="M-195,-6 Q0,2 195,-6 L195,-2 Q0,6 -195,-2 Z" fill="#00ffff" filter="url(#softGlow)" />

      <!-- Skateboard Top Layer (Grip Tape) -->
      <path d="M-185,-11 C-210,-19 -180,-21 -150,-19 L150,-19 C180,-21 210,-19 185,-11 C160,-5 -160,-5 -185,-11 Z" fill="url(#deckGrip)" stroke="#475569" stroke-width="1" />

      <!-- Deck Grip Tape Art: Radical Cosmic Fish Bone & Stripes -->
      <g id="deckArt" opacity="0.85" transform="translate(-10, -12)">
        <!-- Center Fish Skeleton Decal -->
        <path d="M-25,-1 L25,-1" stroke="#f43f5e" stroke-width="2" stroke-linecap="round" />
        <path d="M25,-1 L32,-5 L32,3 Z" fill="#f43f5e" /> <!-- Head -->
        <line x1="-15" y1="-5" x2="-12" y2="3" stroke="#f43f5e" stroke-width="1.5" />
        <line x1="-5" y1="-6" x2="-2" y2="4" stroke="#f43f5e" stroke-width="1.5" />
        <line x1="5" y1="-6" x2="8" y2="4" stroke="#f43f5e" stroke-width="1.5" />
        <line x1="15" y1="-5" x2="18" y2="3" stroke="#f43f5e" stroke-width="1.5" />
        <path d="M-25,-1 L-32,-6 L-29,-1 L-32,4 Z" fill="#f43f5e" /> <!-- Tail -->
        <!-- Grip Tape Cutout Lines -->
        <line x1="-90" y1="-2" x2="-70" y2="-2" stroke="#00f2fe" stroke-width="2.5" />
        <line x1="70" y1="-2" x2="90" y2="-2" stroke="#00f2fe" stroke-width="2.5" />
      </g>
    </g> <!-- End Skateboard -->

    <!-- ====== ASTRONAUT SUIT: BACKPACK (PLSS - Portable Life Support System) ====== -->
    <g id="lifeSupportPack" transform="translate(365, 380) rotate(-12)">
      <!-- Main Tank Body -->
      <rect x="0" y="0" width="75" height="135" rx="18" fill="url(#suitShadow)" stroke="#64748b" stroke-width="2" />
      <rect x="5" y="6" width="65" height="123" rx="14" fill="url(#suitWhite)" />
      <!-- Vent Grills -->
      <rect x="15" y="18" width="45" height="6" rx="2" fill="#334155" />
      <rect x="15" y="28" width="45" height="6" rx="2" fill="#334155" />
      <rect x="15" y="38" width="45" height="6" rx="2" fill="#334155" />
      <!-- Status Lights -->
      <circle cx="20" cy="112" r="4" fill="#22c55e" filter="url(#softGlow)" />
      <circle cx="34" cy="112" r="4" fill="#38bdf8" />
      <circle cx="48" cy="112" r="4" fill="#f43f5e" />
      <!-- Oxygen Pressure Dial -->
      <circle cx="38" cy="75" r="16" fill="#0f172a" stroke="#94a3b8" stroke-width="2" />
      <circle cx="38" cy="75" r="13" fill="#ffffff" />
      <!-- Gauge Needle -->
      <line x1="38" y1="75" x2="45" y2="68" stroke="#ef4444" stroke-width="2" stroke-linecap="round" />
      <circle cx="38" cy="75" r="2.5" fill="#0f172a" />
      <!-- Top Thruster Jet / Antenna -->
      <path d="M12,0 L18,-18 L28,-18 L24,0 Z" fill="#475569" />
      <line x1="55" y1="0" x2="62" y2="-28" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round" />
      <circle cx="62" cy="-28" r="4" fill="#f43f5e" />
      <!-- Nitrogen gas puff from RCS valve (Animated style) -->
      <path d="M14,-22 Q12,-35 -5,-40 Q10,-32 23,-28 Z" fill="#ffffff" opacity="0.6" />
    </g>

    <!-- ====== CAT'S PRESSURIZED SUIT TAIL ====== -->
    <!-- Curled articulated tail balancing in low gravity -->
    <g id="suitTail">
      <!-- Tail Segments (Ribbed space suit joints) -->
      <path d="M390,490 C340,495 280,470 250,420 C230,385 240,340 275,325 C305,310 330,335 320,365 C310,390 280,400 265,390" 
            stroke="#1e293b" stroke-width="26" fill="none" stroke-linecap="round" />
      <path d="M390,490 C340,495 280,470 250,420 C230,385 240,340 275,325 C305,310 330,335 320,365 C310,390 280,400 265,390" 
            stroke="url(#suitWhite)" stroke-width="20" fill="none" stroke-linecap="round" />
      <!-- Tail Joint Rings / Blue Stripes -->
      <path d="M350,488 C340,485 330,480 325,475" stroke="#0284c7" stroke-width="5" fill="none" />
      <path d="M285,450 C275,440 270,430 265,420" stroke="#0284c7" stroke-width="5" fill="none" />
      <path d="M250,380 C252,368 258,358 268,350" stroke="#0284c7" stroke-width="5" fill="none" />
      <path d="M290,332 C300,335 308,342 308,352" stroke="#0284c7" stroke-width="5" fill="none" />
      <!-- Golden Ring on Tail Tip -->
      <circle cx="265" cy="390" r="11" fill="#f59e0b" stroke="#b45309" stroke-width="2" />
      <circle cx="265" cy="390" r="6" fill="#fef3c7" />
    </g>

    <!-- ====== CAT SPACESUIT BODY ====== -->
    <g id="suitTorso">
      <!-- Shadow Underlayer -->
      <ellipse cx="480" cy="460" rx="72" ry="82" fill="url(#suitShadow)" transform="rotate(-15 480 460)" />
      <!-- Main White Puffy Suit Body -->
      <ellipse cx="475" cy="455" rx="68" ry="78" fill="url(#suitWhite)" transform="rotate(-15 475 455)" />

      <!-- Mission Chest Harness / Pack -->
      <rect x="445" y="420" width="58" height="64" rx="10" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" transform="rotate(-15 470 450)" />
      
      <!-- Cyan/Orange NASA-style Chest Insignia & Mission Patch -->
      <g transform="translate(452, 430) rotate(-15)">
        <!-- Chest Control Panel Buttons -->
        <rect x="5" y="5" width="40" height="20" rx="4" fill="#1e293b" />
        <circle cx="12" cy="15" r="3.5" fill="#38bdf8" />
        <circle cx="22" cy="15" r="3.5" fill="#f59e0b" />
        <circle cx="32" cy="15" r="3.5" fill="#10b981" />

        <!-- Mission Logo: Cat Face inside Star Triangle -->
        <path d="M20,30 L34,50 L6,50 Z" fill="#2563eb" />
        <circle cx="20" cy="43" r="5" fill="#f8fafc" />
        <polygon points="17,39 19,43 15,42" fill="#f8fafc" />
        <polygon points="23,39 25,42 21,43" fill="#f8fafc" />
      </g>

      <!-- Life Support Ribbed Hoses -->
      <path d="M430,480 C410,510 420,545 445,540 C460,535 450,510 445,490" stroke="#38bdf8" stroke-width="8" fill="none" stroke-linecap="round" />
      <path d="M430,480 C410,510 420,545 445,540 C460,535 450,510 445,490" stroke="#0284c7" stroke-width="4" stroke-dasharray="3 3" fill="none" stroke-linecap="round" />
    </g>

    <!-- ====== LEGS & BOOTS (Gripping Skateboard) ====== -->
    <!-- Back Leg (Bents towards kicktail) -->
    <g id="backLeg">
      <!-- Upper Thigh & Joint -->
      <path d="M430,490 Q400,530 380,560 Q405,575 425,550 Q450,520 445,490 Z" fill="url(#suitShadow)" />
      <!-- Lower Leg -->
      <path d="M380,560 L360,600 L385,615 L415,570 Z" fill="url(#suitWhite)" />
      <!-- Knee Joint Ring -->
      <ellipse cx="395" cy="565" rx="14" ry="7" fill="#0284c7" transform="rotate(-30 395 565)" />

      <!-- Back Space Boot (On Deck Kicktail) -->
      <g id="backBoot" transform="translate(330, 580) rotate(12)">
        <path d="M10,15 L35,22 C42,24 45,32 40,40 L12,40 C5,40 0,35 2,28 L6,15 Z" fill="#334155" />
        <path d="M12,18 L32,24 C38,26 40,32 36,36 L12,36 C8,36 5,32 6,26 Z" fill="#f1f5f9" />
        <!-- Heavy Lunar Tread / Sole -->
        <rect x="2" y="38" width="42" height="8" rx="3" fill="#f59e0b" stroke="#b45309" stroke-width="1" />
        <line x1="12" y1="42" x2="12" y2="46" stroke="#000" stroke-width="2" />
        <line x1="22" y1="42" x2="22" y2="46" stroke="#000" stroke-width="2" />
        <line x1="32" y1="42" x2="32" y2="46" stroke="#000" stroke-width="2" />
      </g>
    </g>

    <!-- Front Leg (Extended forward in stylish skate pose) -->
    <g id="frontLeg">
      <!-- Thigh -->
      <path d="M510,480 Q555,515 580,550 Q565,568 535,550 Q500,525 490,485 Z" fill="url(#suitShadow)" />
      <!-- Calf -->
      <path d="M570,545 L605,585 L580,605 L540,560 Z" fill="url(#suitWhite)" />
      <!-- Knee Joint Ring -->
      <ellipse cx="560" cy="555" rx="14" ry="7" fill="#0284c7" transform="rotate(35 560 555)" />

      <!-- Front Space Boot (Gripping near nose bolts) -->
      <g id="frontBoot" transform="translate(565, 570) rotate(-15)">
        <path d="M10,15 L38,20 C45,22 48,30 44,38 L14,38 C6,38 2,34 4,26 L8,15 Z" fill="#334155" />
        <path d="M12,18 L34,22 C40,24 42,30 38,34 L14,34 C9,34 6,30 7,24 Z" fill="#f1f5f9" />
        <!-- Sole -->
        <rect x="4" y="36" width="44" height="8" rx="3" fill="#f59e0b" stroke="#b45309" stroke-width="1" />
        <line x1="14" y1="40" x2="14" y2="44" stroke="#000" stroke-width="2" />
        <line x1="24" y1="40" x2="24" y2="44" stroke="#000" stroke-width="2" />
        <line x1="34" y1="40" x2="34" y2="44" stroke="#000" stroke-width="2" />
      </g>
    </g>

    <!-- ====== ARMS & PAWS ====== -->
    <!-- Left Arm: Reaching Down for Board Grab (The "Melon / Indy" Grab!) -->
    <g id="leftArmGrab">
      <!-- Shoulder -->
      <circle cx="430" cy="425" r="18" fill="#cbd5e1" />
      <!-- Upper & Lower Arm reaching down to skateboard edge -->
      <path d="M430,430 Q445,490 465,540 Q450,548 432,535 Q418,485 415,430 Z" fill="url(#suitWhite)" />
      <ellipse cx="445" cy="505" rx="11" ry="6" fill="#0284c7" transform="rotate(25 445 505)" />
      <!-- Pressurized Glove/Paw Grabbing the Deck -->
      <g id="grabPaw" transform="translate(450, 532) rotate(15)">
        <ellipse cx="12" cy="12" rx="14" ry="12" fill="#334155" />
        <ellipse cx="12" cy="12" rx="11" ry="9" fill="#f1f5f9" />
        <!-- Padded Glove Fingers wrapped on board edge -->
        <rect x="2" y="16" width="6" height="10" rx="3" fill="#cbd5e1" stroke="#475569" stroke-width="1" />
        <rect x="9" y="17" width="6" height="11" rx="3" fill="#cbd5e1" stroke="#475569" stroke-width="1" />
        <rect x="16" y="16" width="6" height="10" rx="3" fill="#cbd5e1" stroke="#475569" stroke-width="1" />
      </g>
    </g>

    <!-- Right Arm: Raised Out for High-Flying Balance -->
    <g id="rightArmBalance">
      <!-- Shoulder Joint -->
      <circle cx="530" cy="420" r="18" fill="#94a3b8" />
      <!-- Arm extending up/right -->
      <path d="M535,415 Q590,390 635,360 Q645,372 630,388 Q580,415 530,435 Z" fill="url(#suitWhite)" />
      <!-- Arm Joint Ring -->
      <ellipse cx="585" cy="395" rx="7" ry="13" fill="#0284c7" transform="rotate(30 585 395)" />
      <!-- Open Glove/Paw with Cute Claws/Finger Pads Floating -->
      <g id="balancePaw" transform="translate(628, 345) rotate(-20)">
        <ellipse cx="12" cy="12" rx="13" ry="11" fill="#334155" />
        <ellipse cx="12" cy="12" rx="10" ry="8" fill="#f8fafc" />
        <!-- Glove Paw Pads (Pink space-grade rubber grip) -->
        <ellipse cx="11" cy="12" rx="5" ry="4" fill="#f43f5e" />
        <circle cx="6" cy="5" r="2.2" fill="#f43f5e" />
        <circle cx="11" cy="4" r="2.2" fill="#f43f5e" />
        <circle cx="16" cy="5" r="2.2" fill="#f43f5e" />
        <circle cx="19" cy="9" r="1.8" fill="#f43f5e" />
      </g>
    </g>

    <!-- ====== ASTRONAUT HELMET & CAT HEAD ====== -->
    <g id="helmetAndHead" transform="translate(485, 330)">

      <!-- Helmet Neck Ring / Collar -->
      <ellipse cx="0" cy="55" rx="54" ry="18" fill="#475569" stroke="#334155" stroke-width="2" />
      <ellipse cx="0" cy="53" rx="48" ry="14" fill="#94a3b8" />
      <rect x="-42" y="47" width="84" height="8" rx="4" fill="#cbd5e1" stroke="#64748b" stroke-width="1.5" />

      <!-- Helmet Outer Glass Bubble with Custom Ear Enclosures! -->
      <!-- Left Ear Helmet Bubble Dome -->
      <path d="M-62,-25 C-85,-75 -45,-105 -25,-60 Z" fill="url(#visorGlass)" stroke="#e2e8f0" stroke-width="3" />
      <!-- Right Ear Helmet Bubble Dome -->
      <path d="M25,-60 C45,-105 85,-75 62,-25 Z" fill="url(#visorGlass)" stroke="#e2e8f0" stroke-width="3" />

      <!-- Main Spherical Helmet Glass Bubble -->
      <circle cx="0" cy="0" r="82" fill="url(#visorGlass)" stroke="#e2e8f0" stroke-width="3.5" />

      <!-- ====== CAT FACE (INSIDE THE TRANSPARENT VISOR) ====== -->
      <g id="catInsideHelmet">
        <!-- Cat Cheeks & Head Base (Cute Ginger & White Tabby) -->
        <ellipse cx="0" cy="8" rx="56" ry="48" fill="#f97316" /> <!-- Ginger Fur Base -->
        <path d="M-42,15 Q0,45 42,15 Q0,55 -42,15 Z" fill="#ffffff" /> <!-- White Muzzle/Cheeks -->

        <!-- Cat Ears (Erect and joyful inside the ear bubbles) -->
        <!-- Left Ear -->
        <polygon points="-48,-15 -62,-75 -22,-45" fill="#ea580c" stroke="#c2410c" stroke-width="1" />
        <polygon points="-44,-22 -55,-68 -27,-46" fill="#fbcfe8" /> <!-- Pink Inner Ear -->
        <path d="M-46,-35 Q-40,-50 -32,-45" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none" />
        
        <!-- Right Ear -->
        <polygon points="22,-45 62,-75 48,-15" fill="#ea580c" stroke="#c2410c" stroke-width="1" />
        <polygon points="27,-46 55,-68 44,-22" fill="#fbcfe8" /> <!-- Pink Inner Ear -->
        <path d="M32,-45 Q40,-50 46,-35" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none" />

        <!-- Tabby Forehead Stripes -->
        <path d="M0,-28 L0,-12 M-10,-24 L-6,-12 M10,-24 L6,-12" stroke="#c2410c" stroke-width="3.5" stroke-linecap="round" />

        <!-- Cat Eyes: Big, Wonder-Filled Glowing Emerald Eyes with Star Highlight -->
        <!-- Left Eye -->
        <ellipse cx="-22" cy="-2" rx="14" ry="17" fill="#0f172a" />
        <ellipse cx="-21" cy="-2" rx="12" ry="15" fill="#10b981" />
        <ellipse cx="-21" cy="-2" rx="6" ry="12" fill="#064e3b" /> <!-- Slit/Oval Pupil -->
        <circle cx="-25" cy="-7" r="4.5" fill="#ffffff" /> <!-- Big Cute Highlight -->
        <circle cx="-17" cy="4" r="2" fill="#ffffff" />

        <!-- Right Eye -->
        <ellipse cx="22" cy="-2" rx="14" ry="17" fill="#0f172a" />
        <ellipse cx="21" cy="-2" rx="12" ry="15" fill="#10b981" />
        <ellipse cx="21" cy="-2" rx="6" ry="12" fill="#064e3b" />
        <circle cx="17" cy="-7" r="4.5" fill="#ffffff" />
        <circle cx="25" cy="4" r="2" fill="#ffffff" />

        <!-- Cute Pink Nose -->
        <polygon points="-5,12 5,12 0,18" fill="#f43f5e" />

        <!-- W-Shaped Cat Mouth (Happy Grin) -->
        <path d="M-12,20 Q-6,26 0,20 Q6,26 12,20" stroke="#7c2d12" stroke-width="2.5" stroke-linecap="round" fill="none" />
        <!-- Little pink tongue peeking out in playful concentration! -->
        <path d="M-3,22 Q0,30 4,22 Z" fill="#fb7185" stroke="#e11d48" stroke-width="1" />

        <!-- Cat Whiskers (Crisp white space whiskers!) -->
        <!-- Left Whiskers -->
        <line x1="-16" y1="16" x2="-48" y2="12" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9" />
        <line x1="-18" y1="20" x2="-52" y2="22" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9" />
        <line x1="-16" y1="24" x2="-46" y2="31" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9" />

        <!-- Right Whiskers -->
        <line x1="16" y1="16" x2="48" y2="12" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9" />
        <line x1="18" y1="20" x2="52" y2="22" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9" />
        <line x1="16" y1="24" x2="46" y2="31" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9" />

        <!-- Microphone Boom for Radio Comms -->
        <path d="M-35,38 Q-25,48 -8,32" stroke="#475569" stroke-width="3" fill="none" stroke-linecap="round" />
        <circle cx="-6" cy="31" r="4.5" fill="#38bdf8" />
      </g> <!-- End Cat Face -->

      <!-- Visor Spherical Specular Highlights & Cosmic Reflections -->
      <!-- Curving Primary Glare Arch -->
      <path d="M-52,-52 A72,72 0 0,1 52,-52 A62,62 0 0,0 -52,-52" fill="#ffffff" opacity="0.45" />
      <!-- Secondary Side Rim Reflection -->
      <path d="M-68,-20 A72,72 0 0,1 -40,-65" stroke="#ffffff" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.4" />
      <!-- Reflection of Distant Crescent Earth in Helmet Glass -->
      <ellipse cx="44" cy="-35" rx="8" ry="12" fill="#38bdf8" opacity="0.4" transform="rotate(-30 44 -35)" />
    </g> <!-- End Helmet and Head -->

  </g> <!-- End Animated Skater Group -->

  <!-- ================= FOREGROUND DUST & STARDUST GLOW ================= -->
  <g id="foregroundGlow" pointer-events="none">
    <!-- Glowing neon rim reflection on crater edge -->
    <path d="M220,835 Q300,815 420,810" stroke="#00f2fe" stroke-width="1.5" fill="none" opacity="0.4" filter="url(#softGlow)" />
  </g>
</svg>

Reasoning trace (1,099 tokens)

**Generating Futuristic Feline**

I'm currently focused on crafting a self-contained SVG depicting an astronaut cat confidently skateboarding across the lunar surface. The goal is a single, clean code block containing the entire SVG, with absolutely no preceding or succeeding text.

**Conceptualizing Space-Faring Feline**

I'm deep in thought about the intricacies of our astronaut cat. My current focus is on the helmet’s reflective visor, aiming to capture a dynamic cosmic vista with subtle cat features peeking through. I'm also refining the retro-futuristic skateboard, envisioning glowing thrusters and vibrant neon trails.

**Refining Lunar Cat's Pose**

I'm now concentrating on the astronaut cat's dynamic mid-air pose, specifically a stylish melon grab over a lunar crater. I'm also considering the pressurized suit's tail sleeve for low-gravity balance and detailing the glowing thrusters and neon trails on the retro-futuristic skateboard.

**Sketching Lunar Cat's Environment**

I'm currently detailing the lunar landscape, focusing on the curvature of the horizon, crater formations, and adding distant elements like a flag and lander for scale. I'm also refining the astronaut cat's dynamic pose and the vibrant, glowing details of its futuristic skateboard.