Skateboarding astronaut catOne-line

Dots3-Note Preview (free)

by Dots StudioReasoningClean

Open in new window

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

How it went

Total time: 23.3 s
Cost: $0
Output tokens: 2,392
Spent thinking: 0 tokens
Speed: 105.1 tok/s
Console errors: 0

First token after: 559 ms
First visible text after: 559 ms
Prompt tokens: 350
Code size: 5.2 KB
Finish reason: stop
Served by: AtlasCloud
Model id: dots-studio/dots-3-note-preview:free
Reasoning sent: {"effort":"none"}
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 · 121 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="1280" height="800" style="background:#1a1a2e;font-family:sans-serif">
  <!-- Moon surface -->
  <defs>
    <radialGradient id="moonGrad" cx="50%" cy="40%" r="70%">
      <stop offset="0%" stop-color="#c9c9c9"/>
      <stop offset="100%" stop-color="#6b6b6b"/>
    </radialGradient>
    <filter id="crater" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.4"/>
    </filter>
  </defs>

  <!-- Starfield -->
  <g fill="#fff">
    <circle cx="100" cy="80" r="1.5"/>
    <circle cx="250" cy="150" r="1"/>
    <circle cx="400" cy="60" r="2"/>
    <circle cx="600" cy="120" r="1.2"/>
    <circle cx="800" cy="90" r="1.8"/>
    <circle cx="1000" cy="160" r="1"/>
    <circle cx="1150" cy="70" r="1.5"/>
    <circle cx="150" cy="300" r="1"/>
    <circle cx="350" cy="400" r="2"/>
    <circle cx="550" cy="350" r="1.2"/>
    <circle cx="750" cy="420" r="1.8"/>
    <circle cx="950" cy="380" r="1"/>
    <circle cx="1100" cy="450" r="1.5"/>
    <circle cx="200" cy="600" r="1"/>
    <circle cx="500" cy="650" r="2"/>
    <circle cx="800" cy="600" r="1.2"/>
    <circle cx="1050" cy="680" r="1.8"/>
  </g>

  <!-- Moon -->
  <circle cx="640" cy="400" r="300" fill="url(#moonGrad)"/>
  <!-- Craters -->
  <g filter="url(#crater)" fill="#5a5a5a">
    <ellipse cx="520" cy="320" rx="40" ry="25"/>
    <ellipse cx="700" cy="350" rx="35" ry="20"/>
    <ellipse cx="600" cy="480" rx="50" ry="30"/>
    <ellipse cx="750" cy="520" rx="30" ry="18"/>
    <ellipse cx="480" cy="500" rx="25" ry="15"/>
  </g>

  <!-- Skateboard -->
  <g transform="translate(640,580) rotate(-15)">
    <!-- Board -->
    <rect x="-80" y="-15" width="160" height="30" rx="15" fill="#3e2723" stroke="#1d1d1d" stroke-width="2"/>
    <!-- Wheels -->
    <circle cx="-60" cy="20" r="12" fill="#e53935"/>
    <circle cx="60" cy="20" r="12" fill="#e53935"/>
    <circle cx="-60" cy="-20" r="12" fill="#1e88e5"/>
    <circle cx="60" cy="-20" r="12" fill="#1e88e5"/>
    <!-- Grip tape pattern -->
    <rect x="-70" y="-10" width="140" height="20" fill="url(#grip)" opacity="0.3"/>
    <defs>
      <pattern id="grip" width="10" height="10" patternUnits="userSpaceOnUse">
        <circle cx="5" cy="5" r="1" fill="#000" opacity="0.5"/>
      </pattern>
    </defs>
  </g>

  <!-- Astronaut Cat -->
  <g transform="translate(640,420) rotate(-15)">
    <!-- Helmet -->
    <circle cx="0" cy="-40" r="55" fill="rgba(255,255,255,0.2)" stroke="#fff" stroke-width="3"/>
    <circle cx="0" cy="-40" r="50" fill="rgba(255,255,255,0.1)"/>
    <!-- Visor -->
    <path d="M -40 -60 Q 0 -90 40 -60 Q 0 -40 -40 -60" fill="#1a237e" stroke="#0d47a1" stroke-width="2"/>
    <!-- Cat face inside helmet -->
    <circle cx="-15" cy="-45" r="4" fill="#000"/>
    <circle cx="15" cy="-45" r="4" fill="#000"/>
    <path d="M -10 -35 Q 0 -25 10 -35" stroke="#000" stroke-width="3" fill="none"/>
    <!-- Whiskers -->
    <line x1="-35" y1="-40" x2="-60" y2="-45" stroke="#000" stroke-width="2"/>
    <line x1="-35" y1="-35" x2="-60" y2="-35" stroke="#000" stroke-width="2"/>
    <line x1="35" y1="-40" x2="60" y2="-45" stroke="#000" stroke-width="2"/>
    <line x1="35" y1="-35" x2="60" y2="-35" stroke="#000" stroke-width="2"/>
    <!-- Ears -->
    <path d="M -45 -90 L -35 -110 L -25 -90" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <path d="M 45 -90 L 35 -110 L 25 -90" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <!-- Body -->
    <ellipse cx="0" cy="20" rx="40" ry="50" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <!-- Arms -->
    <ellipse cx="-35" cy="10" rx="12" ry="25" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <ellipse cx="35" cy="10" rx="12" ry="25" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <!-- Legs -->
    <ellipse cx="-25" cy="60" rx="10" ry="20" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <ellipse cx="25" cy="60" rx="10" ry="20" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <!-- Tail -->
    <path d="M 0 70 Q 20 90 0 100 Q -20 90 0 70" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <!-- Paws -->
    <circle cx="-35" cy="35" r="8" fill="#ffccbc"/>
    <circle cx="35" cy="35" r="8" fill="#ffccbc"/>
    <circle cx="-25" cy="80" r="8" fill="#ffccbc"/>
    <circle cx="25" cy="80" r="8" fill="#ffccbc"/>
  </g>

  <!-- Motion lines -->
  <g stroke="#fff" stroke-width="3" opacity="0.7" stroke-linecap="round">
    <line x1="500" y1="580" x2="450" y2="580"/>
    <line x1="520" y1="600" x2="470" y2="600"/>
    <line x1="540" y1="620" x2="490" y2="620"/>
    <line x1="800" y1="580" x2="850" y2="580"/>
    <line x1="780" y1="600" x2="830" y2="600"/>
    <line x1="760" y1="620" x2="810" y2="620"/>
  </g>

  <!-- Earth in background -->
  <circle cx="1100" cy="150" r="40" fill="#1e88e5" opacity="0.8">
    <animate attributeName="opacity" values="0.8;0.6;0.8" dur="4s" repeatCount="indefinite"/>
  </circle>
  <circle cx="1100" cy="150" r="15" fill="#4caf50" opacity="0.6"/>
  <circle cx="1090" cy="140" r="8" fill="#4caf50" opacity="0.6"/>
  <circle cx="1110" cy="160" r="10" fill="#4caf50" opacity="0.6"/>

  <!-- Title -->
  <text x="640" y="60" text-anchor="middle" fill="#fff" font-size="36" font-weight="bold" font-family="Arial, sans-serif">
    🐱‍🚀 Skateboarding on the Moon 🛹
  </text>
</svg>

Raw response

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" width="1280" height="800" style="background:#1a1a2e;font-family:sans-serif">
  <!-- Moon surface -->
  <defs>
    <radialGradient id="moonGrad" cx="50%" cy="40%" r="70%">
      <stop offset="0%" stop-color="#c9c9c9"/>
      <stop offset="100%" stop-color="#6b6b6b"/>
    </radialGradient>
    <filter id="crater" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.4"/>
    </filter>
  </defs>

  <!-- Starfield -->
  <g fill="#fff">
    <circle cx="100" cy="80" r="1.5"/>
    <circle cx="250" cy="150" r="1"/>
    <circle cx="400" cy="60" r="2"/>
    <circle cx="600" cy="120" r="1.2"/>
    <circle cx="800" cy="90" r="1.8"/>
    <circle cx="1000" cy="160" r="1"/>
    <circle cx="1150" cy="70" r="1.5"/>
    <circle cx="150" cy="300" r="1"/>
    <circle cx="350" cy="400" r="2"/>
    <circle cx="550" cy="350" r="1.2"/>
    <circle cx="750" cy="420" r="1.8"/>
    <circle cx="950" cy="380" r="1"/>
    <circle cx="1100" cy="450" r="1.5"/>
    <circle cx="200" cy="600" r="1"/>
    <circle cx="500" cy="650" r="2"/>
    <circle cx="800" cy="600" r="1.2"/>
    <circle cx="1050" cy="680" r="1.8"/>
  </g>

  <!-- Moon -->
  <circle cx="640" cy="400" r="300" fill="url(#moonGrad)"/>
  <!-- Craters -->
  <g filter="url(#crater)" fill="#5a5a5a">
    <ellipse cx="520" cy="320" rx="40" ry="25"/>
    <ellipse cx="700" cy="350" rx="35" ry="20"/>
    <ellipse cx="600" cy="480" rx="50" ry="30"/>
    <ellipse cx="750" cy="520" rx="30" ry="18"/>
    <ellipse cx="480" cy="500" rx="25" ry="15"/>
  </g>

  <!-- Skateboard -->
  <g transform="translate(640,580) rotate(-15)">
    <!-- Board -->
    <rect x="-80" y="-15" width="160" height="30" rx="15" fill="#3e2723" stroke="#1d1d1d" stroke-width="2"/>
    <!-- Wheels -->
    <circle cx="-60" cy="20" r="12" fill="#e53935"/>
    <circle cx="60" cy="20" r="12" fill="#e53935"/>
    <circle cx="-60" cy="-20" r="12" fill="#1e88e5"/>
    <circle cx="60" cy="-20" r="12" fill="#1e88e5"/>
    <!-- Grip tape pattern -->
    <rect x="-70" y="-10" width="140" height="20" fill="url(#grip)" opacity="0.3"/>
    <defs>
      <pattern id="grip" width="10" height="10" patternUnits="userSpaceOnUse">
        <circle cx="5" cy="5" r="1" fill="#000" opacity="0.5"/>
      </pattern>
    </defs>
  </g>

  <!-- Astronaut Cat -->
  <g transform="translate(640,420) rotate(-15)">
    <!-- Helmet -->
    <circle cx="0" cy="-40" r="55" fill="rgba(255,255,255,0.2)" stroke="#fff" stroke-width="3"/>
    <circle cx="0" cy="-40" r="50" fill="rgba(255,255,255,0.1)"/>
    <!-- Visor -->
    <path d="M -40 -60 Q 0 -90 40 -60 Q 0 -40 -40 -60" fill="#1a237e" stroke="#0d47a1" stroke-width="2"/>
    <!-- Cat face inside helmet -->
    <circle cx="-15" cy="-45" r="4" fill="#000"/>
    <circle cx="15" cy="-45" r="4" fill="#000"/>
    <path d="M -10 -35 Q 0 -25 10 -35" stroke="#000" stroke-width="3" fill="none"/>
    <!-- Whiskers -->
    <line x1="-35" y1="-40" x2="-60" y2="-45" stroke="#000" stroke-width="2"/>
    <line x1="-35" y1="-35" x2="-60" y2="-35" stroke="#000" stroke-width="2"/>
    <line x1="35" y1="-40" x2="60" y2="-45" stroke="#000" stroke-width="2"/>
    <line x1="35" y1="-35" x2="60" y2="-35" stroke="#000" stroke-width="2"/>
    <!-- Ears -->
    <path d="M -45 -90 L -35 -110 L -25 -90" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <path d="M 45 -90 L 35 -110 L 25 -90" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <!-- Body -->
    <ellipse cx="0" cy="20" rx="40" ry="50" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <!-- Arms -->
    <ellipse cx="-35" cy="10" rx="12" ry="25" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <ellipse cx="35" cy="10" rx="12" ry="25" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <!-- Legs -->
    <ellipse cx="-25" cy="60" rx="10" ry="20" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <ellipse cx="25" cy="60" rx="10" ry="20" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <!-- Tail -->
    <path d="M 0 70 Q 20 90 0 100 Q -20 90 0 70" fill="#fff" stroke="#ccc" stroke-width="2"/>
    <!-- Paws -->
    <circle cx="-35" cy="35" r="8" fill="#ffccbc"/>
    <circle cx="35" cy="35" r="8" fill="#ffccbc"/>
    <circle cx="-25" cy="80" r="8" fill="#ffccbc"/>
    <circle cx="25" cy="80" r="8" fill="#ffccbc"/>
  </g>

  <!-- Motion lines -->
  <g stroke="#fff" stroke-width="3" opacity="0.7" stroke-linecap="round">
    <line x1="500" y1="580" x2="450" y2="580"/>
    <line x1="520" y1="600" x2="470" y2="600"/>
    <line x1="540" y1="620" x2="490" y2="620"/>
    <line x1="800" y1="580" x2="850" y2="580"/>
    <line x1="780" y1="600" x2="830" y2="600"/>
    <line x1="760" y1="620" x2="810" y2="620"/>
  </g>

  <!-- Earth in background -->
  <circle cx="1100" cy="150" r="40" fill="#1e88e5" opacity="0.8">
    <animate attributeName="opacity" values="0.8;0.6;0.8" dur="4s" repeatCount="indefinite"/>
  </circle>
  <circle cx="1100" cy="150" r="15" fill="#4caf50" opacity="0.6"/>
  <circle cx="1090" cy="140" r="8" fill="#4caf50" opacity="0.6"/>
  <circle cx="1110" cy="160" r="10" fill="#4caf50" opacity="0.6"/>

  <!-- Title -->
  <text x="640" y="60" text-anchor="middle" fill="#fff" font-size="36" font-weight="bold" font-family="Arial, sans-serif">
    🐱‍🚀 Skateboarding on the Moon 🛹
  </text>
</svg>
```