Skateboarding astronaut catOne-line

GPT-6.1 Terra

by OpenAIReasoningClean

Open in new window

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

How it went

Total time: 1 min 3 s
Cost: $0.025
Output tokens: 4,839
Spent thinking: 0 tokens
Speed: 78.1 tok/s
Console errors: 0

First token after: 1.1 s
First visible text after: 1.1 s
Prompt tokens: 347
Code size: 11.4 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: {"effort":"none"}
Max output: 128,000 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 · 190 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800" role="img" aria-labelledby="title desc">
  <title id="title">Moonwalk, but make it a kickflip</title>
  <desc id="desc">A fluffy astronaut cat rides a skateboard across the moon beneath a starry sky and a distant Earth.</desc>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0.85" y2="1">
      <stop stop-color="#101129"/>
      <stop offset=".55" stop-color="#26204b"/>
      <stop offset="1" stop-color="#554476"/>
    </linearGradient>
    <radialGradient id="glow">
      <stop stop-color="#b9a7f4" stop-opacity=".35"/>
      <stop offset="1" stop-color="#b9a7f4" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#b5acc7"/>
      <stop offset="1" stop-color="#716e8f"/>
    </linearGradient>
    <linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#fff8ec"/>
      <stop offset=".55" stop-color="#e9e4e9"/>
      <stop offset="1" stop-color="#b8b8d0"/>
    </linearGradient>
    <linearGradient id="helmet" x1="0" y1="0" x2="1" y2="1">
      <stop stop-color="#d9f5fa" stop-opacity=".42"/>
      <stop offset=".5" stop-color="#b6dcf2" stop-opacity=".1"/>
      <stop offset="1" stop-color="#7294c5" stop-opacity=".33"/>
    </linearGradient>
    <linearGradient id="board" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="#ffb984"/>
      <stop offset="1" stop-color="#e77779"/>
    </linearGradient>
    <radialGradient id="earth" cx=".35" cy=".28">
      <stop stop-color="#a4e8e4"/>
      <stop offset=".6" stop-color="#5daac8"/>
      <stop offset="1" stop-color="#3f699c"/>
    </radialGradient>
    <filter id="blur"><feGaussianBlur stdDeviation="10"/></filter>
    <filter id="shadow" x="-30%" y="-30%" width="160%" height="160%">
      <feDropShadow dx="0" dy="9" stdDeviation="7" flood-color="#17152c" flood-opacity=".22"/>
    </filter>
    <clipPath id="earthClip"><circle cx="1025" cy="165" r="58"/></clipPath>
  </defs>

  <rect width="1280" height="800" fill="url(#sky)"/>
  <circle cx="620" cy="330" r="390" fill="url(#glow)"/>

  <!-- stars -->
  <g fill="#fff9e7">
    <circle cx="93" cy="92" r="2"/><circle cx="166" cy="189" r="1.5"/><circle cx="255" cy="73" r="2"/>
    <circle cx="342" cy="152" r="1.6"/><circle cx="426" cy="59" r="1.4"/><circle cx="521" cy="113" r="2"/>
    <circle cx="613" cy="51" r="1.5"/><circle cx="696" cy="135" r="1.7"/><circle cx="789" cy="70" r="2"/>
    <circle cx="880" cy="169" r="1.4"/><circle cx="1131" cy="85" r="1.8"/><circle cx="1202" cy="196" r="2"/>
    <circle cx="1153" cy="305" r="1.4"/><circle cx="1065" cy="345" r="1.5"/><circle cx="941" cy="288" r="2"/>
    <circle cx="840" cy="345" r="1.5"/><circle cx="292" cy="296" r="1.5"/><circle cx="111" cy="355" r="1.6"/>
    <circle cx="202" cy="427" r="1.3"/><circle cx="385" cy="252" r="1.4"/><circle cx="1221" cy="408" r="1.5"/>
  </g>
  <g fill="none" stroke="#fbeacc" stroke-width="2" stroke-linecap="round">
    <path d="M186 105v18m-9-9h18"/>
    <path d="M761 219v18m-9-9h18"/>
    <path d="M1136 227v14m-7-7h14"/>
    <path d="M316 398v14m-7-7h14"/>
  </g>

  <!-- Earth -->
  <circle cx="1025" cy="165" r="77" fill="#9acbe2" opacity=".09"/>
  <circle cx="1025" cy="165" r="58" fill="url(#earth)"/>
  <g clip-path="url(#earthClip)" fill="#b7d9b5" opacity=".9">
    <path d="M975 145l13-12 14 2 6 8-5 7 9 6-4 9-14 1-4 9-9-5-8-13z"/>
    <path d="M1017 181l13-8 12 4 4 10-7 8-2 14-9 5-5-11-9-6z"/>
    <path d="M1037 120l15 3 11 9 11 2 8 10-7 8-14-4-6 6-11-5-12-13z"/>
  </g>
  <path d="M990 135c15-12 27-15 43-13" fill="none" stroke="#fff" stroke-opacity=".38" stroke-width="4" stroke-linecap="round"/>

  <!-- distant lunar horizon -->
  <path d="M0 576Q93 545 180 561T361 553T550 564T738 550T940 562T1109 548T1280 559V800H0Z" fill="#817b9e"/>
  <path d="M0 620Q130 587 269 607T507 600T758 605T1021 595T1280 614V800H0Z" fill="url(#ground)"/>
  <path d="M0 670Q155 635 291 655T562 646T862 659T1104 647T1280 660V800H0Z" fill="#a49db6" opacity=".55"/>
  <g fill="#78758f" opacity=".45">
    <ellipse cx="170" cy="694" rx="71" ry="13"/><ellipse cx="1018" cy="699" rx="92" ry="14"/>
    <ellipse cx="343" cy="755" rx="43" ry="8"/><ellipse cx="1170" cy="765" rx="44" ry="8"/>
    <ellipse cx="80" cy="615" rx="31" ry="5"/><ellipse cx="914" cy="623" rx="24" ry="5"/>
  </g>
  <g fill="none" stroke="#d5ccda" stroke-width="3" opacity=".55">
    <path d="M111 691q59-15 118 0"/><path d="M946 696q70-17 140 0"/>
    <path d="M310 752q31-8 63 0"/>
  </g>

  <!-- action lines and moon dust -->
  <g fill="none" stroke="#e5d9e8" stroke-linecap="round" opacity=".65">
    <path d="M288 514h90m-125 20h82m-49 20h57" stroke-width="4"/>
    <path d="M329 583q22-20 45 0m-65 6q12-13 25-2" stroke-width="3"/>
  </g>
  <g fill="#e8dee8" opacity=".75">
    <circle cx="363" cy="604" r="5"/><circle cx="343" cy="596" r="3"/><circle cx="321" cy="605" r="4"/>
    <circle cx="390" cy="590" r="3"/>
  </g>
  <ellipse cx="620" cy="635" rx="228" ry="19" fill="#554f70" opacity=".25" filter="url(#blur)"/>

  <g filter="url(#shadow)">
    <!-- backpack -->
    <g stroke="#57566e" stroke-width="6" stroke-linejoin="round">
      <path d="M512 333l-48 9q-15 3-15 19l7 105q2 15 18 15l49-8z" fill="#d3cbd8"/>
      <path d="M456 379l-21 5 3 57 21-3" fill="#ed9b8f"/>
      <path d="M464 350l37-5" fill="none" stroke="#f9f0e9" stroke-width="7"/>
    </g>

    <!-- tail -->
    <path d="M539 466q-72 28-71 76 0 23 26 21 26-1 30-31" fill="none" stroke="#59566d" stroke-width="31" stroke-linecap="round"/>
    <path d="M539 466q-72 28-71 76 0 23 26 21 26-1 30-31" fill="none" stroke="#e8a87c" stroke-width="21" stroke-linecap="round"/>
    <path d="M475 534q8 8 20 7m-15-30q9 8 20 8" fill="none" stroke="#c67f65" stroke-width="7"/>

    <!-- back arm -->
    <path d="M529 348q-23 3-39 24l-36 33-22-11" fill="none" stroke="#57566e" stroke-width="38" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M529 348q-23 3-39 24l-36 33-22-11" fill="none" stroke="url(#suit)" stroke-width="27" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M437 389l-12-11q-8-7-15-2-6 5-2 12-10 0-11 9-1 8 9 11l22 7" fill="#f1eceb" stroke="#57566e" stroke-width="5" stroke-linejoin="round"/>
    <path d="M454 393l8 13" stroke="#eea19a" stroke-width="8"/>

    <!-- legs -->
    <path d="M550 462q-4 35 8 61l-39 43" fill="none" stroke="#57566e" stroke-width="49" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M550 462q-4 35 8 61l-39 43" fill="none" stroke="url(#suit)" stroke-width="37" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M632 459q16 31 45 54l23 43" fill="none" stroke="#57566e" stroke-width="49" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M632 459q16 31 45 54l23 43" fill="none" stroke="url(#suit)" stroke-width="37" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M500 553q13-8 25 3l12 14q4 9-7 12l-58 2q-10-1-9-10 1-8 13-10z" fill="#f3ece9" stroke="#57566e" stroke-width="6"/>
    <path d="M680 550q16-6 27 5l15 12q6 9-5 13l-56 1q-11-2-8-11 3-8 13-12z" fill="#f3ece9" stroke="#57566e" stroke-width="6"/>
    <path d="M470 577h61m128-2h56" stroke="#ec9c91" stroke-width="6" stroke-linecap="round"/>

    <!-- body -->
    <path d="M535 330q34-19 91-9 35 6 44 39l13 78q3 26-19 35-51 20-112 7-24-5-28-30l-11-74q-4-28 22-46z" fill="url(#suit)" stroke="#57566e" stroke-width="7"/>
    <path d="M543 445q55 15 126-1" fill="none" stroke="#c4b9cb" stroke-width="5"/>
    <rect x="562" y="365" width="67" height="48" rx="10" fill="#c8c8d9" stroke="#77758b" stroke-width="4"/>
    <rect x="571" y="374" width="26" height="13" rx="3" fill="#83bdc8"/>
    <circle cx="611" cy="379" r="4" fill="#ef9d91"/>
    <circle cx="611" cy="395" r="4" fill="#e9c875"/>
    <path d="M574 398h18" stroke="#8c8a9e" stroke-width="4" stroke-linecap="round"/>

    <!-- raised front arm -->
    <path d="M649 354q25 6 45 29l35 25 28-28" fill="none" stroke="#57566e" stroke-width="38" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M649 354q25 6 45 29l35 25 28-28" fill="none" stroke="url(#suit)" stroke-width="27" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M747 382l8 8" stroke="#ed9d96" stroke-width="9"/>
    <path d="M751 375l7-19q3-7 9-5 5 2 4 9l-2 6 10-9q6-5 11 0 4 4-1 10l-8 8 12-5q7-2 9 4 2 5-4 8l-18 9q-10 5-20 1z" fill="#f7efeb" stroke="#57566e" stroke-width="5" stroke-linejoin="round"/>

    <!-- helmet ring -->
    <ellipse cx="591" cy="335" rx="83" ry="21" fill="#acb1c5" stroke="#57566e" stroke-width="7"/>
    <ellipse cx="591" cy="331" rx="73" ry="13" fill="#f3e8e6" stroke="#77768b" stroke-width="4"/>

    <!-- helmet glass -->
    <circle cx="591" cy="241" r="111" fill="url(#helmet)" stroke="#d9e3ef" stroke-width="8"/>
    <circle cx="591" cy="241" r="103" fill="none" stroke="#879bb9" stroke-width="2" opacity=".7"/>

    <!-- cat ears -->
    <path d="M525 231l5-72q1-10 10-5l41 31M653 231l-4-72q-1-10-10-5l-42 31" fill="#e8aa7d" stroke="#57566e" stroke-width="6" stroke-linejoin="round"/>
    <path d="M539 170l-2 38 27-21zm100 0 3 38-28-21z" fill="#d88484"/>

    <!-- cat face -->
    <path d="M526 229q5-46 64-49 60 2 66 49 6 39-17 60-18 17-48 17-31 0-49-17-22-21-16-60z" fill="#efb889" stroke="#57566e" stroke-width="6"/>
    <path d="M559 188l8 23m23-29v26m22-20-8 23" fill="none" stroke="#cf8c70" stroke-width="7" stroke-linecap="round"/>
    <path d="M531 252l24 5m-26 7 24 3m98-15-24 5m26 7-24 3" fill="none" stroke="#a96e62" stroke-width="4" stroke-linecap="round"/>
    <path d="M556 235q9-9 18 0m34 0q9-9 18 0" fill="none" stroke="#514b5c" stroke-width="5" stroke-linecap="round"/>
    <ellipse cx="591" cy="255" rx="9" ry="6" fill="#be7777"/>
    <path d="M591 261v5q-8 9-16 1m16-1q8 9 16 1" fill="none" stroke="#6a5359" stroke-width="3.5" stroke-linecap="round"/>
    <ellipse cx="553" cy="254" rx="9" ry="5" fill="#e99a93" opacity=".65"/>
    <ellipse cx="629" cy="254" rx="9" ry="5" fill="#e99a93" opacity=".65"/>
    <path d="M506 218q4-35 26-56" fill="none" stroke="#fff" stroke-opacity=".7" stroke-width="7" stroke-linecap="round"/>
    <path d="M509 238v8" stroke="#fff" stroke-opacity=".7" stroke-width="7" stroke-linecap="round"/>
    <path d="M651 285q13-16 17-36" fill="none" stroke="#fff" stroke-opacity=".35" stroke-width="5" stroke-linecap="round"/>

    <!-- skateboard -->
    <path d="M435 581q11 14 31 14h263q23 0 37-17 7-8 14-3 4 4-2 12-13 23-45 25H466q-31-1-44-19-7-9-1-13 6-5 14 1z" fill="url(#board)" stroke="#57566e" stroke-width="6" stroke-linejoin="round"/>
    <path d="M463 592h269" stroke="#ffe3c1" stroke-width="4" stroke-linecap="round"/>
    <g fill="#716c82" stroke="#57566e" stroke-width="4">
      <path d="M493 611h32l-5 10h-22z"/><path d="M683 611h32l-5 10h-22z"/>
    </g>
    <g fill="#f5d0a9" stroke="#57566e" stroke-width="5">
      <circle cx="494" cy="626" r="13"/><circle cx="530" cy="626" r="13"/>
      <circle cx="680" cy="626" r="13"/><circle cx="716" cy="626" r="13"/>
    </g>
    <g fill="#aa8f93"><circle cx="494" cy="626" r="4"/><circle cx="530" cy="626" r="4"/><circle cx="680" cy="626" r="4"/><circle cx="716" cy="626" r="4"/></g>
  </g>

  <!-- small decorative sparkles -->
  <g fill="#f8d99e">
    <path d="M815 433l4 10 10 4-10 4-4 10-4-10-10-4 10-4z"/>
    <path d="M390 285l3 7 7 3-7 3-3 7-3-7-7-3 7-3z"/>
  </g>

  <g font-family="Verdana, sans-serif" text-anchor="middle">
    <text x="640" y="721" fill="#f7edf0" font-size="20" font-weight="700" letter-spacing="5">COSMIC KICKFLIP</text>
    <text x="640" y="748" fill="#e4d9e5" font-size="12" letter-spacing="3">ONE SMALL RIDE FOR CATKIND</text>
  </g>
</svg>