MiMo-V2.6-Pro

by Xiaomireasoning defaultClean

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

How it went

Total time: 1 min 33 s
Cost: $0.0043
Output tokens: 6,310
Spent thinking: 0 tokens
Speed: 70.1 tok/s
Console errors: 0

First token after: 3.5 s
First visible text after: 3.5 s
Prompt tokens: 529
Code size: 12.0 KB
Finish reason: stop
Served by: GMICloud
Model id: xiaomi/mimo-v2.6-pro
Reasoning sent: model default
Max output: 131,072 tokens
Generated: Nov 13, 2026

What it was asked

The prompt

Create a standalone SVG illustration of a fox sitting on a hill, looking at the moon on a starry night, with a few subtle animations. Requirements: - Output a single valid .svg file (```svg code block) with a viewBox of 0 0 800 600. - Hand-written shapes and paths only: no embedded raster images, no external references, no JavaScript. - The fox must be clearly recognizable (pointy ears, snout, bushy tail with a white tip). - Include the moon with a soft glow, many stars, the hill and some background elements (trees, distant hills). - Use a coherent color palette and at least one gradient. - Animations (SMIL or CSS inside the SVG), all looping seamlessly: stars twinkling, the fox's tail swaying gently, and a shooting star crossing the sky every 4 seconds (the first one within 2 seconds).

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 · 293 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" role="img" aria-labelledby="title desc">
  <title id="title">Fox on a hill beneath a moonlit starry sky</title>
  <desc id="desc">A bushy-tailed fox sits on a dark hill, gazing at a glowing crescent moon among twinkling stars.</desc>

  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#090d2b"/>
      <stop offset="0.55" stop-color="#20204b"/>
      <stop offset="1" stop-color="#5a3a63"/>
    </linearGradient>

    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0" stop-color="#fff3c4" stop-opacity="0.55"/>
      <stop offset="0.35" stop-color="#f6d98b" stop-opacity="0.22"/>
      <stop offset="1" stop-color="#f6d98b" stop-opacity="0"/>
    </radialGradient>

    <radialGradient id="moonFill" cx="35%" cy="30%" r="75%">
      <stop offset="0" stop-color="#fff8dd"/>
      <stop offset="0.65" stop-color="#f8dfa1"/>
      <stop offset="1" stop-color="#e2bd76"/>
    </radialGradient>

    <linearGradient id="hill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#243c49"/>
      <stop offset="1" stop-color="#122631"/>
    </linearGradient>

    <linearGradient id="farHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2c3155"/>
      <stop offset="1" stop-color="#22294b"/>
    </linearGradient>

    <linearGradient id="foxBody" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#e2763e"/>
      <stop offset="1" stop-color="#a9442c"/>
    </linearGradient>

    <linearGradient id="tailGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#d76734"/>
      <stop offset="1" stop-color="#8e3326"/>
    </linearGradient>

    <filter id="softGlow" x="-60%" y="-60%" width="220%" height="220%">
      <feGaussianBlur stdDeviation="8"/>
    </filter>

    <style>
      .star { transform-box: fill-box; transform-origin: center; animation: twinkle 3.2s ease-in-out infinite; }
      .s2 { animation-duration: 4.4s; animation-delay: -1.2s; }
      .s3 { animation-duration: 2.8s; animation-delay: -0.7s; }
      .s4 { animation-duration: 5.2s; animation-delay: -2.4s; }

      @keyframes twinkle {
        0%, 100% { opacity: 0.38; transform: scale(0.82); }
        50% { opacity: 1; transform: scale(1.18); }
      }

      .tail {
        transform-box: fill-box;
        transform-origin: 78% 88%;
        animation: sway 5.5s ease-in-out infinite;
      }

      @keyframes sway {
        0%, 100% { transform: rotate(-2.2deg); }
        50% { transform: rotate(3.2deg); }
      }

      .ear {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: earTwitch 9s ease-in-out infinite;
      }

      @keyframes earTwitch {
        0%, 72%, 100% { transform: rotate(0deg); }
        76% { transform: rotate(-4deg); }
        82% { transform: rotate(2deg); }
      }

      .shooting {
        animation: shoot 4s linear infinite;
        opacity: 0;
      }

      .shooting.second { animation-delay: -2s; }

      @keyframes shoot {
        0% { opacity: 0; transform: translate(0, 0); }
        4% { opacity: 1; }
        18% { opacity: 1; }
        24%, 100% { opacity: 0; transform: translate(230px, 145px); }
      }

      .shooting { transform: translate(-230px, -145px); }

      @media (prefers-reduced-motion: reduce) {
        .star, .tail, .ear, .shooting { animation: none; }
        .shooting { opacity: 0.65; transform: translate(115px, 72px); }
      }
    </style>
  </defs>

  <!-- Night sky -->
  <rect width="800" height="600" fill="url(#sky)"/>

  <!-- Faint nebula bands -->
  <path d="M0 250 C150 190 260 300 400 245 C545 188 655 245 800 190 L800 300 C620 350 500 300 360 330 C210 365 110 320 0 370 Z"
        fill="#6d4e82" opacity="0.16"/>

  <!-- Moon glow and moon -->
  <circle cx="620" cy="142" r="118" fill="url(#moonGlow)"/>
  <circle cx="620" cy="142" r="52" fill="url(#moonFill)"/>
  <circle cx="603" cy="124" r="8" fill="#d9b678" opacity="0.34"/>
  <circle cx="638" cy="157" r="11" fill="#d9b678" opacity="0.28"/>
  <circle cx="627" cy="112" r="5" fill="#d9b678" opacity="0.25"/>
  <circle cx="598" cy="155" r="5" fill="#d9b678" opacity="0.22"/>

  <!-- Stars -->
  <g fill="#fff4cf">
    <circle class="star" cx="72" cy="82" r="2.2"/>
    <circle class="star s2" cx="128" cy="138" r="1.7"/>
    <circle class="star s3" cx="196" cy="74" r="2.5"/>
    <circle class="star s4" cx="256" cy="126" r="1.6"/>
    <circle class="star" cx="318" cy="64" r="2.1"/>
    <circle class="star s2" cx="372" cy="152" r="1.8"/>
    <circle class="star s3" cx="438" cy="88" r="2.6"/>
    <circle class="star s4" cx="505" cy="42" r="1.7"/>
    <circle class="star" cx="554" cy="104" r="2.2"/>
    <circle class="star s2" cx="700" cy="62" r="2.3"/>
    <circle class="star s3" cx="752" cy="128" r="1.8"/>
    <circle class="star s4" cx="672" cy="206" r="1.9"/>
    <circle class="star" cx="54" cy="214" r="1.8"/>
    <circle class="star s2" cx="164" cy="232" r="2.4"/>
    <circle class="star s3" cx="242" cy="198" r="1.5"/>
    <circle class="star s4" cx="338" cy="226" r="2.1"/>
    <circle class="star" cx="446" cy="194" r="1.7"/>
    <circle class="star s2" cx="520" cy="244" r="2.3"/>
    <circle class="star s3" cx="742" cy="262" r="1.6"/>
    <circle class="star s4" cx="92" cy="302" r="1.9"/>
    <circle class="star" cx="210" cy="292" r="1.6"/>
    <circle class="star s2" cx="356" cy="316" r="2"/>
    <circle class="star s3" cx="602" cy="286" r="1.8"/>
    <circle class="star s4" cx="690" cy="330" r="1.6"/>
    <circle class="star" cx="42" cy="368" r="1.5"/>
    <circle class="star s2" cx="286" cy="366" r="1.7"/>
    <circle class="star s3" cx="512" cy="344" r="1.5"/>
    <circle class="star s4" cx="756" cy="392" r="1.8"/>
    <circle class="star" cx="140" cy="412" r="1.6"/>
    <circle class="star s2" cx="392" cy="392" r="1.4"/>
  </g>

  <!-- A few four-point stars -->
  <g fill="#fff8dd" opacity="0.9">
    <path class="star s3" d="M112 176 L115 186 L125 189 L115 192 L112 202 L109 192 L99 189 L109 186 Z"/>
    <path class="star" d="M332 112 L335 122 L345 125 L335 128 L332 138 L329 128 L319 125 L329 122 Z"/>
    <path class="star s2" d="M736 182 L739 191 L748 194 L739 197 L736 206 L733 197 L724 194 L733 191 Z"/>
  </g>

  <!-- Shooting stars: each drifts across the sky in a 4s loop -->
  <g class="shooting">
    <path d="M60 250 L232 337" stroke="#fff2c2" stroke-width="2.5" stroke-linecap="round" opacity="0.75"/>
    <circle cx="232" cy="337" r="3.2" fill="#fff8dd"/>
    <circle cx="232" cy="337" r="7" fill="#fff2c2" opacity="0.25" filter="url(#softGlow)"/>
  </g>

  <g class="shooting second">
    <path d="M430 38 L575 113" stroke="#ffe9ac" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
    <circle cx="575" cy="113" r="2.8" fill="#fff8dd"/>
    <circle cx="575" cy="113" r="6" fill="#ffe9ac" opacity="0.22" filter="url(#softGlow)"/>
  </g>

  <!-- Distant hills -->
  <path d="M0 366 C92 316 170 330 242 360 C312 389 372 344 452 340 C548 335 612 382 690 368 C738 359 770 342 800 326 L800 470 L0 470 Z"
        fill="url(#farHill)" opacity="0.9"/>

  <!-- Pine tree line -->
  <g fill="#172d3c">
    <path d="M42 402 L58 350 L74 402 Z"/>
    <path d="M58 350 L62 330 L66 350 Z"/>
    <path d="M84 414 L102 344 L120 414 Z"/>
    <path d="M128 404 L142 358 L156 404 Z"/>
    <path d="M640 396 L660 326 L680 396 Z"/>
    <path d="M682 404 L698 350 L714 404 Z"/>
    <path d="M724 398 L746 318 L768 398 Z"/>
    <path d="M762 406 L778 352 L794 406 Z"/>
    <rect x="57" y="396" width="3" height="22"/>
    <rect x="659" y="390" width="3" height="26"/>
    <rect x="745" y="390" width="3" height="28"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0 430 C110 386 218 392 318 418 C420 444 512 438 610 410 C686 388 748 392 800 414 L800 600 L0 600 Z"
        fill="url(#hill)"/>

  <!-- Hill highlights -->
  <path d="M0 452 C130 404 242 416 342 440 C448 466 532 458 628 428 C690 408 752 410 800 430"
        fill="none" stroke="#3f6670" stroke-width="3" opacity="0.35"/>
  <path d="M84 486 C170 458 246 466 322 482" fill="none" stroke="#4b7478" stroke-width="2" opacity="0.22"/>
  <path d="M520 474 C600 452 680 450 752 462" fill="none" stroke="#4b7478" stroke-width="2" opacity="0.2"/>

  <!-- Grass tufts -->
  <g stroke="#4e7a72" stroke-width="2.2" stroke-linecap="round" opacity="0.65">
    <path d="M110 474 C108 458 112 448 118 438"/>
    <path d="M118 474 C118 456 122 448 128 442"/>
    <path d="M126 476 C128 462 133 454 139 448"/>
    <path d="M676 458 C674 444 679 434 686 428"/>
    <path d="M684 458 C686 444 691 438 698 432"/>
    <path d="M692 460 C697 448 703 442 710 438"/>
  </g>

  <!-- Fox: tail (behind body) -->
  <g class="tail">
    <path d="M292 514
             C332 520 372 506 392 474
             C414 440 400 410 372 397
             C396 388 424 404 431 432
             C441 473 410 516 360 538
             C330 551 300 548 282 536 Z"
          fill="url(#tailGrad)"/>
    <path d="M382 392
             C405 386 427 401 433 430
             C438 452 432 475 419 493
             C412 465 400 437 382 392 Z"
          fill="#f3e2c1"/>
    <path d="M310 512 C336 508 356 494 374 474"
          fill="none" stroke="#8e3c2b" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
  </g>

  <!-- Fox body -->
  <path d="M236 520
           C224 494 228 462 246 438
           C262 416 284 404 304 406
           C330 408 350 428 356 456
           C363 486 352 512 336 528
           C302 536 266 536 236 520 Z"
        fill="url(#foxBody)"/>

  <!-- Chest -->
  <path d="M252 506
           C242 486 246 462 258 444
           C272 424 288 414 302 414
           C316 420 322 438 318 458
           C313 482 298 506 276 520
           C264 520 256 514 252 506 Z"
        fill="#f0d5ac" opacity="0.92"/>

  <!-- Front legs / paws -->
  <path d="M258 520 C254 506 256 494 264 488 C273 482 281 488 283 500 L286 526 Z" fill="#c45c34"/>
  <path d="M288 522 C286 508 290 496 298 492 C307 488 315 494 316 506 L317 528 Z" fill="#b34d2f"/>
  <ellipse cx="270" cy="528" rx="15" ry="8" fill="#f1dfbd"/>
  <ellipse cx="304" cy="530" rx="15" ry="8" fill="#f1dfbd"/>

  <!-- Head -->
  <g>
    <path d="M244 396
             C242 374 252 352 270 342
             C288 332 310 332 328 342
             C346 352 356 374 352 398
             C348 420 332 438 310 446
             C288 454 264 446 252 428
             C246 420 243 408 244 396 Z"
          fill="url(#foxBody)"/>

    <!-- Ears -->
    <path class="ear" d="M246 384 C238 360 232 332 232 310 C252 318 274 334 288 352 Z" fill="#b94c2d"/>
    <path d="M246 372 C242 352 239 334 239 322 C252 330 265 341 275 354 Z" fill="#3c2230" opacity="0.72"/>
    <path class="ear" d="M312 350 C326 330 348 314 368 308 C368 332 362 360 354 382 Z" fill="#c4552e"/>
    <path d="M322 352 C333 339 347 327 358 322 C357 338 353 357 348 372 Z" fill="#3c2230" opacity="0.72"/>

    <!-- Cheeks and muzzle -->
    <path d="M248 404 C240 418 242 432 252 440 C264 450 278 446 286 436 C276 428 264 418 248 404 Z" fill="#f0d5ac"/>
    <path d="M348 404 C356 418 354 432 344 440 C332 450 318 446 310 436 C320 428 332 418 348 404 Z" fill="#f0d5ac"/>
    <path d="M284 420 C286 438 294 452 306 456 C318 452 326 438 328 420 C318 426 294 426 284 420 Z" fill="#f6e6c8"/>
    <path d="M302 446 C304 438 310 434 316 434 C322 436 326 440 326 446 C322 452 312 454 306 452 Z" fill="#231c28"/>

    <!-- Eyes -->
    <path d="M270 386 C276 382 283 383 288 388 C283 394 275 395 270 386 Z" fill="#fff1c8"/>
    <path d="M322 386 C327 382 334 383 339 388 C334 394 326 395 322 386 Z" fill="#fff1c8"/>
    <circle cx="280" cy="388" r="3.2" fill="#2a2130"/>
    <circle cx="331" cy="388" r="3.2" fill="#2a2130"/>
    <circle cx="278" cy="386" r="1" fill="#fff8dd"/>
    <circle cx="329" cy="386" r="1" fill="#fff8dd"/>
  </g>

  <!-- Fox outline accents -->
  <path d="M236 520 C224 494 228 462 246 438" fill="none" stroke="#7f2f25" stroke-width="3" stroke-linecap="round" opacity="0.55"/>
  <path d="M304 406 C330 408 350 428 356 456" fill="none" stroke="#7f2f25" stroke-width="3" stroke-linecap="round" opacity="0.45"/>

  <!-- Ground shadow -->
  <ellipse cx="300" cy="548" rx="112" ry="18" fill="#0a1a22" opacity="0.34"/>
</svg>