Skateboarding astronaut catOne-line

DeepSeek V4 Flash 0423

by DeepSeekreasoning defaultClean

Open in new window

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

How it went

Total time: 18.2 s
Cost: $0.0006
Output tokens: 3,309
Spent thinking: 0 tokens
Speed: 188.4 tok/s
Console errors: 0

First token after: 644 ms
First visible text after: 644 ms
Prompt tokens: 348
Code size: 7.9 KB
Finish reason: stop
Served by: Wafer
Model id: deepseek/deepseek-v4-flash
Reasoning sent: model default
Max output: 393,216 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 · 167 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <!-- Background - space -->
  <rect width="800" height="600" fill="#0a0a2e"/>
  
  <!-- Stars -->
  <circle cx="50" cy="30" r="2" fill="white" opacity="0.8"/>
  <circle cx="150" cy="80" r="1.5" fill="white" opacity="0.6"/>
  <circle cx="250" cy="20" r="2" fill="white" opacity="0.9"/>
  <circle cx="350" cy="60" r="1" fill="white" opacity="0.5"/>
  <circle cx="450" cy="25" r="2.5" fill="white" opacity="0.8"/>
  <circle cx="550" cy="70" r="1.5" fill="white" opacity="0.7"/>
  <circle cx="650" cy="35" r="2" fill="white" opacity="0.9"/>
  <circle cx="750" cy="50" r="1" fill="white" opacity="0.6"/>
  <circle cx="100" cy="120" r="1.5" fill="white" opacity="0.7"/>
  <circle cx="300" cy="100" r="1" fill="white" opacity="0.5"/>
  <circle cx="500" cy="110" r="2" fill="white" opacity="0.8"/>
  <circle cx="700" cy="90" r="1.5" fill="white" opacity="0.6"/>
  <circle cx="30" cy="200" r="1" fill="white" opacity="0.4"/>
  <circle cx="770" cy="180" r="1.5" fill="white" opacity="0.5"/>
  <circle cx="200" cy="150" r="1.5" fill="white" opacity="0.6"/>
  <circle cx="600" cy="140" r="1" fill="white" opacity="0.7"/>
  
  <!-- Earth in the sky -->
  <circle cx="650" cy="120" r="45" fill="#1a6bb0"/>
  <path d="M620 100 Q640 90 650 105 Q660 120 640 130 Q620 140 615 120Z" fill="#2d8a4e" opacity="0.7"/>
  <path d="M650 90 Q670 95 675 110 Q680 125 660 120 Q645 115 650 100Z" fill="#2d8a4e" opacity="0.5"/>
  <path d="M625 130 Q640 135 645 150 Q650 160 630 155 Q615 148 625 135Z" fill="#2d8a4e" opacity="0.6"/>
  
  <!-- Moon surface -->
  <ellipse cx="400" cy="580" rx="500" ry="120" fill="#c8c0b0"/>
  <ellipse cx="400" cy="580" rx="500" ry="115" fill="#d4cdbc"/>
  
  <!-- Moon craters -->
  <ellipse cx="150" cy="550" rx="30" ry="10" fill="#b8b0a0" opacity="0.6"/>
  <ellipse cx="300" cy="570" rx="20" ry="7" fill="#b8b0a0" opacity="0.5"/>
  <ellipse cx="550" cy="560" rx="25" ry="8" fill="#b8b0a0" opacity="0.6"/>
  <ellipse cx="680" cy="540" rx="15" ry="5" fill="#b8b0a0" opacity="0.4"/>
  <ellipse cx="100" cy="530" rx="12" ry="4" fill="#b8b0a0" opacity="0.4"/>
  <ellipse cx="450" cy="540" rx="18" ry="6" fill="#b8b0a0" opacity="0.5"/>
  
  <!-- Small moon surface bumps -->
  <ellipse cx="200" cy="510" rx="8" ry="3" fill="#c8c0b0" opacity="0.3"/>
  <ellipse cx="500" cy="520" rx="10" ry="4" fill="#c8c0b0" opacity="0.3"/>
  
  <!-- Shadow under skateboard -->
  <ellipse cx="380" cy="475" rx="55" ry="8" fill="rgba(0,0,0,0.3)"/>
  
  <!-- Skateboard -->
  <rect x="325" y="460" width="110" height="8" rx="4" fill="#ff6b35"/>
  <rect x="325" y="460" width="110" height="8" rx="4" fill="url(#boardGrad)" opacity="0.5"/>
  <defs>
    <linearGradient id="boardGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ff6b35"/>
      <stop offset="50%" stop-color="#ff9a56"/>
      <stop offset="100%" stop-color="#ff6b35"/>
    </linearGradient>
  </defs>
  
  <!-- Skateboard trucks -->
  <rect x="340" y="468" width="25" height="5" rx="2" fill="#888"/>
  <rect x="395" y="468" width="25" height="5" rx="2" fill="#888"/>
  
  <!-- Skateboard wheels -->
  <circle cx="352" cy="476" r="8" fill="#333"/>
  <circle cx="352" cy="476" r="4" fill="#555"/>
  <circle cx="408" cy="476" r="8" fill="#333"/>
  <circle cx="408" cy="476" r="4" fill="#555"/>
  
  <!-- Cat body - spacesuit -->
  <ellipse cx="380" cy="405" rx="40" ry="35" fill="#e0e0e0" stroke="#aaa" stroke-width="1.5"/>
  
  <!-- Spacesuit details -->
  <ellipse cx="380" cy="405" rx="35" ry="30" fill="#f0f0f0" opacity="0.5"/>
  
  <!-- Belt/pack -->
  <rect x="340" y="410" width="80" height="10" rx="3" fill="#888" opacity="0.5"/>
  
  <!-- Jetpack -->
  <rect x="390" y="380" width="15" height="30" rx="5" fill="#cc4444"/>
  <rect x="393" y="385" width="9" height="8" rx="3" fill="#ff6666"/>
  <rect x="393" y="398" width="9" height="8" rx="3" fill="#ff6666"/>
  
  <!-- Left leg -->
  <rect x="350" y="435" width="15" height="28" rx="5" fill="#e0e0e0" transform="rotate(10, 357, 450)"/>
  <rect x="348" y="458" width="18" height="8" rx="3" fill="#ccc"/>
  
  <!-- Right leg -->
  <rect x="395" y="435" width="15" height="28" rx="5" fill="#e0e0e0" transform="rotate(-5, 402, 450)"/>
  <rect x="393" y="458" width="18" height="8" rx="3" fill="#ccc"/>
  
  <!-- Left arm reaching forward -->
  <rect x="340" y="390" width="30" height="12" rx="5" fill="#e0e0e0" transform="rotate(-30, 355, 396)"/>
  
  <!-- Right arm reaching back -->
  <rect x="410" y="395" width="25" height="12" rx="5" fill="#e0e0e0" transform="rotate(20, 422, 401)"/>
  
  <!-- Cat head -->
  <ellipse cx="375" cy="370" rx="28" ry="25" fill="#f0a030"/>
  
  <!-- Cat ears -->
  <polygon points="350,355 340,330 358,348" fill="#f0a030"/>
  <polygon points="345,348 340,332 355,346" fill="#f0a030" opacity="0.5"/>
  <polygon points="398,355 410,330 395,348" fill="#f0a030"/>
  <polygon points="403,348 410,332 397,346" fill="#f0a030" opacity="0.5"/>
  
  <!-- Inner ears -->
  <polygon points="350,352 343,335 356,349" fill="#e88888"/>
  <polygon points="398,352 407,335 396,349" fill="#e88888"/>
  
  <!-- Cat helmet dome -->
  <ellipse cx="375" cy="368" rx="30" ry="27" fill="none" stroke="#aaddff" stroke-width="2.5" opacity="0.6"/>
  <ellipse cx="375" cy="368" rx="30" ry="27" fill="#aaddff" opacity="0.15"/>
  
  <!-- Helmet visor -->
  <ellipse cx="375" cy="365" rx="22" ry="18" fill="none" stroke="#88ccff" stroke-width="1.5" opacity="0.4"/>
  
  <!-- Cat eyes -->
  <ellipse cx="362" cy="365" rx="6" ry="7" fill="white"/>
  <ellipse cx="388" cy="365" rx="6" ry="7" fill="white"/>
  <ellipse cx="362" cy="365" rx="3" ry="6" fill="#44aa44"/>
  <ellipse cx="388" cy="365" rx="3" ry="6" fill="#44aa44"/>
  <ellipse cx="362" cy="363" rx="1.5" ry="3" fill="#116611"/>
  <ellipse cx="388" cy="363" rx="1.5" ry="3" fill="#116611"/>
  
  <!-- Cat nose -->
  <polygon points="375,372 372,376 378,376" fill="#e88888"/>
  
  <!-- Cat mouth -->
  <path d="M372 376 Q375 380 378 376" fill="none" stroke="#cc6666" stroke-width="1.2"/>
  
  <!-- Cat whiskers -->
  <line x1="355" y1="373" x2="340" y2="370" stroke="#ddd" stroke-width="1"/>
  <line x1="355" y1="376" x2="338" y2="378" stroke="#ddd" stroke-width="1"/>
  <line x1="395" y1="373" x2="410" y2="370" stroke="#ddd" stroke-width="1"/>
  <line x1="395" y1="376" x2="412" y2="378" stroke="#ddd" stroke-width="1"/>
  
  <!-- Cat tail -->
  <path d="M420 410 Q440 400 445 380 Q448 365 440 355" fill="none" stroke="#f0a030" stroke-width="6" stroke-linecap="round"/>
  <path d="M420 410 Q440 400 445 380 Q448 365 440 355" fill="none" stroke="#e89020" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
  
  <!-- Tail tip -->
  <ellipse cx="440" cy="355" rx="5" ry="4" fill="#f0a030"/>
  
  <!-- Cat stripes on body -->
  <path d="M365 385 Q375 380 385 385" fill="none" stroke="#e89020" stroke-width="2" opacity="0.4"/>
  <path d="M362 395 Q375 390 388 395" fill="none" stroke="#e89020" stroke-width="2" opacity="0.4"/>
  
  <!-- Motion lines -->
  <line x1="260" y1="440" x2="290" y2="440" stroke="white" stroke-width="1.5" opacity="0.3"/>
  <line x1="255" y1="455" x2="295" y2="455" stroke="white" stroke-width="1.5" opacity="0.3"/>
  <line x1="265" y1="470" x2="300" y2="470" stroke="white" stroke-width="1.5" opacity="0.3"/>
  <line x1="260" y1="485" x2="285" y2="485" stroke="white" stroke-width="1.5" opacity="0.3"/>
  
  <!-- Small dust particles -->
  <circle cx="310" cy="470" r="2" fill="#d4cdbc" opacity="0.5"/>
  <circle cx="295" cy="465" r="1.5" fill="#d4cdbc" opacity="0.4"/>
  <circle cx="305" cy="480" r="1" fill="#d4cdbc" opacity="0.3"/>
  <circle cx="320" cy="475" r="1.5" fill="#d4cdbc" opacity="0.4"/>
  
  <!-- Flag in the background -->
  <line x1="550" y1="350" x2="550" y2="500" stroke="#ccc" stroke-width="3"/>
  <rect x="555" y="350" width="50" height="30" fill="#cc3333"/>
  <text x="565" y="370" font-family="monospace" font-size="10" fill="white">CAT</text>
  
  <!-- Helmet reflection -->
  <ellipse cx="358" cy="355" rx="6" ry="4" fill="white" opacity="0.2" transform="rotate(-20, 358, 355)"/>
</svg>