Skateboarding astronaut catOne-line

Gemma 4 31B

by Googlereasoning defaultClean

Open in new window

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

How it went

Total time: 20.8 s
Cost: $0.0009
Output tokens: 2,462
Spent thinking: 0 tokens
Speed: 120.7 tok/s
Console errors: 0

First token after: 372 ms
First visible text after: 372 ms
Prompt tokens: 371
Code size: 7.2 KB
Finish reason: stop
Served by: CoreWeave
Model id: google/gemma-4-31b-it
Reasoning sent: model default
Max output: 16,384 tokens
Generated: Nov 13, 2026

What it was asked

The prompt

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

System prompt, sent with every prompt

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

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

Code run-1.svg · 180 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Cat Skater</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #0a0a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 600px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        svg {
            width: 100%;
            height: auto;
            filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
        }
        .title {
            color: #fff;
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 4px;
            text-shadow: 0 0 10px #4f4fef;
        }
        /* Animation for stars */
        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }
        .star {
            animation: twinkle var(--d) infinite ease-in-out;
        }
        /* Animation for the skater */
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(-2deg); }
        }
        #skater-group {
            animation: float 4s infinite ease-in-out;
        }
        /* Wheel rotation */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .wheel {
            transform-origin: center;
            animation: spin 1s linear infinite;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="title">Cosmic Shredder</div>
        <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
            <!-- Space Background -->
            <rect width="800" height="600" fill="#0a0a1a" />
            
            <!-- Stars -->
            <g id="stars">
                <!-- Random stars generated by script -->
            </g>

            <!-- Distant Planets -->
            <circle cx="700" cy="100" r="40" fill="#2c3e50" />
            <circle cx="700" cy="100" r="35" fill="#34495e" />
            <path d="M 670 100 Q 700 110 730 100" stroke="#bdc3c7" stroke-width="2" fill="none" opacity="0.4" />

            <!-- Moon Surface -->
            <path d="M 0 500 Q 200 480 400 520 T 800 480 V 600 H 0 Z" fill="#d1d1d1" />
            <path d="M 0 500 Q 200 480 400 520 T 800 480" stroke="#a0a0a0" stroke-width="4" fill="none" />
            
            <!-- Moon Craters -->
            <ellipse cx="150" cy="530" rx="30" ry="10" fill="#bcbcbc" />
            <ellipse cx="150" cy="530" rx="20" ry="5" fill="#b0b0b0" />
            <ellipse cx="450" cy="550" rx="50" ry="15" fill="#bcbcbc" />
            <ellipse cx="450" cy="550" rx="35" ry="10" fill="#b0b0b0" />
            <ellipse cx="650" cy="520" rx="20" ry="8" fill="#bcbcbc" />

            <!-- Skater Group -->
            <g id="skater-group" transform="translate(300, 350)">
                
                <!-- Skateboard -->
                <g transform="translate(0, 120)">
                    <!-- Board Deck -->
                    <path d="M -60 0 Q -60 15 0 15 T 60 0 L 60 -5 Q 0 -10 -60 -5 Z" fill="#ff4d4d" stroke="#333" stroke-width="2" />
                    <!-- Grip tape -->
                    <path d="M -55 -2 Q 0 -5 55 -2 L 55 2 Q 0 5 -55 2 Z" fill="#333" />
                    
                    <!-- Wheels -->
                    <g class="wheel" transform="translate(-35, 15)">
                        <circle r="8" fill="#fff" stroke="#999" stroke-width="1" />
                        <circle r="3" fill="#ccc" />
                    </g>
                    <g class="wheel" transform="translate(35, 15)">
                        <circle r="8" fill="#fff" stroke="#999" stroke-width="1" />
                        <circle r="3" fill="#ccc" />
                    </g>
                </g>

                <!-- Astronaut Cat -->
                <g transform="translate(0, 0)">
                    <!-- Suit Body -->
                    <path d="M -40 110 Q -50 60 0 60 T 40 110 Z" fill="#fdfdfd" stroke="#ccc" stroke-width="2" />
                    <rect x="-30" y="70" width="60" height="30" rx="10" fill="#fdfdfd" stroke="#ccc" stroke-width="2" />
                    
                    <!-- Arms/Paws -->
                    <path d="M -35 80 L -60 90 L -55 100" fill="none" stroke="#fdfdfd" stroke-width="12" stroke-linecap="round" />
                    <path d="M 35 80 L 60 90 L 55 100" fill="none" stroke="#fdfdfd" stroke-width="12" stroke-linecap="round" />

                    <!-- Helmet -->
                    <circle cx="0" cy="30" r="45" fill="#eefaff" stroke="#B0C4DE" stroke-width="3" />
                    <path d="M -30 30 A 30 30 0 0 1 30 30" fill="#B0C4DE" opacity="0.3" />
                    
                    <!-- The Cat Face (inside helmet) -->
                    <g transform="translate(0, 30)">
                        <!-- Ears -->
                        <path d="M -20 -20 L -30 -40 L -10 -25 Z" fill="#ffb347" stroke="#cc8e35" stroke-width="1" />
                        <path d="M 20 -20 L 30 -40 L 10 -25 Z" fill="#ffb347" stroke="#cc8e35" stroke-width="1" />
                        <!-- Head -->
                        <circle r="25" fill="#ffb347" />
                        <!-- Eyes -->
                        <circle cx="-8" cy="-5" r="3" fill="#000" />
                        <circle cx="8" cy="-5" r="3" fill="#000" />
                        <!-- Nose/Mouth -->
                        <path d="M -3 3 L 0 6 L 3 3" fill="none" stroke="#000" stroke-width="1" />
                        <path d="M -5 8 Q 0 12 5 8" fill="none" stroke="#000" stroke-width="1" />
                    </g>

                    <!-- Backpack / Oxygen Tank -->
                    <rect x="-50" y="70" width="20" height="40" rx="5" fill="#ddd" stroke="#bbb" stroke-width="2" />
                    <path d="M -40 80 L -30 80" stroke="#bbb" stroke-width="3" />
                </g>
            </g>
        </svg>
    </div>

    <script>
        // Generate random stars
        const starGroup = document.getElementById('stars');
        const starCount = 100;
        for (let i = 0; i < starCount; i++) {
            const star = document.createElementNS("http://www.w3.org/2000/svg", "circle");
            const x = Math.random() * 800;
            const y = Math.random() * 600;
            const r = Math.random() * 1.5;
            const duration = 2 + Math.random() * 3;
            const delay = Math.random() * 5;

            star.setAttribute("cx", x);
            star.setAttribute("cy", y);
            star.setAttribute("r", r);
            star.setAttribute("fill", "white");
            star.setAttribute("class", "star");
            star.style.setProperty("--d", `${duration}s`);
            star.style.animationDelay = `${delay}s`;
            
            starGroup.appendChild(star);
        }
    </script>
</body>
</html>

Raw response

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Cat Skater</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #0a0a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 600px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        svg {
            width: 100%;
            height: auto;
            filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
        }
        .title {
            color: #fff;
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 4px;
            text-shadow: 0 0 10px #4f4fef;
        }
        /* Animation for stars */
        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }
        .star {
            animation: twinkle var(--d) infinite ease-in-out;
        }
        /* Animation for the skater */
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(-2deg); }
        }
        #skater-group {
            animation: float 4s infinite ease-in-out;
        }
        /* Wheel rotation */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .wheel {
            transform-origin: center;
            animation: spin 1s linear infinite;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="title">Cosmic Shredder</div>
        <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
            <!-- Space Background -->
            <rect width="800" height="600" fill="#0a0a1a" />
            
            <!-- Stars -->
            <g id="stars">
                <!-- Random stars generated by script -->
            </g>

            <!-- Distant Planets -->
            <circle cx="700" cy="100" r="40" fill="#2c3e50" />
            <circle cx="700" cy="100" r="35" fill="#34495e" />
            <path d="M 670 100 Q 700 110 730 100" stroke="#bdc3c7" stroke-width="2" fill="none" opacity="0.4" />

            <!-- Moon Surface -->
            <path d="M 0 500 Q 200 480 400 520 T 800 480 V 600 H 0 Z" fill="#d1d1d1" />
            <path d="M 0 500 Q 200 480 400 520 T 800 480" stroke="#a0a0a0" stroke-width="4" fill="none" />
            
            <!-- Moon Craters -->
            <ellipse cx="150" cy="530" rx="30" ry="10" fill="#bcbcbc" />
            <ellipse cx="150" cy="530" rx="20" ry="5" fill="#b0b0b0" />
            <ellipse cx="450" cy="550" rx="50" ry="15" fill="#bcbcbc" />
            <ellipse cx="450" cy="550" rx="35" ry="10" fill="#b0b0b0" />
            <ellipse cx="650" cy="520" rx="20" ry="8" fill="#bcbcbc" />

            <!-- Skater Group -->
            <g id="skater-group" transform="translate(300, 350)">
                
                <!-- Skateboard -->
                <g transform="translate(0, 120)">
                    <!-- Board Deck -->
                    <path d="M -60 0 Q -60 15 0 15 T 60 0 L 60 -5 Q 0 -10 -60 -5 Z" fill="#ff4d4d" stroke="#333" stroke-width="2" />
                    <!-- Grip tape -->
                    <path d="M -55 -2 Q 0 -5 55 -2 L 55 2 Q 0 5 -55 2 Z" fill="#333" />
                    
                    <!-- Wheels -->
                    <g class="wheel" transform="translate(-35, 15)">
                        <circle r="8" fill="#fff" stroke="#999" stroke-width="1" />
                        <circle r="3" fill="#ccc" />
                    </g>
                    <g class="wheel" transform="translate(35, 15)">
                        <circle r="8" fill="#fff" stroke="#999" stroke-width="1" />
                        <circle r="3" fill="#ccc" />
                    </g>
                </g>

                <!-- Astronaut Cat -->
                <g transform="translate(0, 0)">
                    <!-- Suit Body -->
                    <path d="M -40 110 Q -50 60 0 60 T 40 110 Z" fill="#fdfdfd" stroke="#ccc" stroke-width="2" />
                    <rect x="-30" y="70" width="60" height="30" rx="10" fill="#fdfdfd" stroke="#ccc" stroke-width="2" />
                    
                    <!-- Arms/Paws -->
                    <path d="M -35 80 L -60 90 L -55 100" fill="none" stroke="#fdfdfd" stroke-width="12" stroke-linecap="round" />
                    <path d="M 35 80 L 60 90 L 55 100" fill="none" stroke="#fdfdfd" stroke-width="12" stroke-linecap="round" />

                    <!-- Helmet -->
                    <circle cx="0" cy="30" r="45" fill="#eefaff" stroke="#B0C4DE" stroke-width="3" />
                    <path d="M -30 30 A 30 30 0 0 1 30 30" fill="#B0C4DE" opacity="0.3" />
                    
                    <!-- The Cat Face (inside helmet) -->
                    <g transform="translate(0, 30)">
                        <!-- Ears -->
                        <path d="M -20 -20 L -30 -40 L -10 -25 Z" fill="#ffb347" stroke="#cc8e35" stroke-width="1" />
                        <path d="M 20 -20 L 30 -40 L 10 -25 Z" fill="#ffb347" stroke="#cc8e35" stroke-width="1" />
                        <!-- Head -->
                        <circle r="25" fill="#ffb347" />
                        <!-- Eyes -->
                        <circle cx="-8" cy="-5" r="3" fill="#000" />
                        <circle cx="8" cy="-5" r="3" fill="#000" />
                        <!-- Nose/Mouth -->
                        <path d="M -3 3 L 0 6 L 3 3" fill="none" stroke="#000" stroke-width="1" />
                        <path d="M -5 8 Q 0 12 5 8" fill="none" stroke="#000" stroke-width="1" />
                    </g>

                    <!-- Backpack / Oxygen Tank -->
                    <rect x="-50" y="70" width="20" height="40" rx="5" fill="#ddd" stroke="#bbb" stroke-width="2" />
                    <path d="M -40 80 L -30 80" stroke="#bbb" stroke-width="3" />
                </g>
            </g>
        </svg>
    </div>

    <script>
        // Generate random stars
        const starGroup = document.getElementById('stars');
        const starCount = 100;
        for (let i = 0; i < starCount; i++) {
            const star = document.createElementNS("http://www.w3.org/2000/svg", "circle");
            const x = Math.random() * 800;
            const y = Math.random() * 600;
            const r = Math.random() * 1.5;
            const duration = 2 + Math.random() * 3;
            const delay = Math.random() * 5;

            star.setAttribute("cx", x);
            star.setAttribute("cy", y);
            star.setAttribute("r", r);
            star.setAttribute("fill", "white");
            star.setAttribute("class", "star");
            star.style.setProperty("--d", `${duration}s`);
            star.style.animationDelay = `${delay}s`;
            
            starGroup.appendChild(star);
        }
    </script>
</body>
</html>
```