MiniMax M3.1 Flash

by MiniMaxReasoningClean

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

How it went

Total time: 18.8 s
Cost: $0.0033
Output tokens: 5,433
Spent thinking: 334 tokens
Speed: 297.1 tok/s
Console errors: 0

First token after: 466 ms
First visible text after: 2.3 s
Prompt tokens: 692
Code size: 13.5 KB
Finish reason: stop
Served by: DigitalOcean
Model id: minimax/minimax-m3.1-flash
Reasoning sent: {"effort":"low"}
Max output: 64,000 tokens
Generated: Nov 11, 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 · 316 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">A fox watching the moon</title>
  <desc id="desc">A warm orange fox with a white-tipped bushy tail sits on a hill beneath a glowing moon and a star-filled night sky, with distant hills, pine trees, twinkling stars, and a shooting star.</desc>

  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#080d2a"/>
      <stop offset="55%" stop-color="#152449"/>
      <stop offset="100%" stop-color="#29405a"/>
    </linearGradient>

    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff9d6" stop-opacity="0.95"/>
      <stop offset="22%" stop-color="#fff3bd" stop-opacity="0.55"/>
      <stop offset="52%" stop-color="#e8d89a" stop-opacity="0.16"/>
      <stop offset="100%" stop-color="#e8d89a" stop-opacity="0"/>
    </radialGradient>

    <radialGradient id="moonBody" cx="38%" cy="32%" r="70%">
      <stop offset="0%" stop-color="#fffef0"/>
      <stop offset="72%" stop-color="#f8edbd"/>
      <stop offset="100%" stop-color="#e7d599"/>
    </radialGradient>

    <linearGradient id="hill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#244b4b"/>
      <stop offset="100%" stop-color="#102b32"/>
    </linearGradient>

    <linearGradient id="frontHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#183c3d"/>
      <stop offset="100%" stop-color="#0a2029"/>
    </linearGradient>

    <linearGradient id="foxCoat" x1="0" y1="0" x2="0.8" y2="1">
      <stop offset="0%" stop-color="#f58a3c"/>
      <stop offset="60%" stop-color="#df6328"/>
      <stop offset="100%" stop-color="#b84420"/>
    </linearGradient>

    <linearGradient id="tailCoat" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#a83c20"/>
      <stop offset="60%" stop-color="#e06a2d"/>
      <stop offset="100%" stop-color="#f39545"/>
    </linearGradient>

    <filter id="softGlow" x="-70%" y="-70%" width="240%" height="240%">
      <feGaussianBlur stdDeviation="7" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <filter id="blurCloud" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="9"/>
    </filter>

    <style>
      .star { animation: twinkle 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
      .star.s2 { animation-duration: 4.8s; animation-delay: -1.1s; }
      .star.s3 { animation-duration: 3.1s; animation-delay: -2s; }
      .star.s4 { animation-duration: 5.2s; animation-delay: -0.7s; }
      .star.s5 { animation-duration: 4.2s; animation-delay: -3s; }

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

      .tail {
        transform-box: fill-box;
        transform-origin: 86% 78%;
        animation: tailSway 4.2s ease-in-out infinite;
      }
      @keyframes tailSway {
        0%, 100% { transform: rotate(-1.5deg); }
        50% { transform: rotate(4deg); }
      }

      .breath {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: breathe 4.6s ease-in-out infinite;
      }
      @keyframes breathe {
        0%, 100% { transform: scaleY(1); }
        50% { transform: scaleY(1.012); }
      }

      .shooting {
        animation: shoot 4s linear infinite;
        opacity: 0;
      }
      @keyframes shoot {
        0% { opacity: 0; transform: translate(175px, -90px); }
        4% { opacity: 1; }
        20% { opacity: 0; transform: translate(-175px, 235px); }
        100% { opacity: 0; transform: translate(-175px, 235px); }
      }

      .moon-halo { animation: halo 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
      @keyframes halo {
        0%, 100% { opacity: 0.78; transform: scale(0.97); }
        50% { opacity: 1; transform: scale(1.04); }
      }

      .grass { animation: grassSway 5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
      .grass.g2 { animation-delay: -2.4s; }
      .grass.g3 { animation-delay: -1.2s; }
      @keyframes grassSway {
        0%, 100% { transform: rotate(-1deg); }
        50% { transform: rotate(1.5deg); }
      }
    </style>
  </defs>

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

  <!-- Subtle atmospheric wash -->
  <ellipse cx="630" cy="170" rx="250" ry="190" fill="#39517a" opacity="0.12"/>
  <ellipse cx="190" cy="310" rx="300" ry="150" fill="#273d68" opacity="0.10"/>

  <!-- Stars -->
  <g fill="#fffbe1">
    <circle class="star" cx="38" cy="42" r="1.7"/>
    <circle class="star s2" cx="82" cy="101" r="1.3"/>
    <circle class="star s3" cx="124" cy="53" r="2"/>
    <circle class="star s4" cx="169" cy="129" r="1.2"/>
    <circle class="star" cx="216" cy="74" r="1.6"/>
    <circle class="star s5" cx="260" cy="38" r="1.4"/>
    <circle class="star s2" cx="303" cy="112" r="1.8"/>
    <circle class="star s3" cx="349" cy="66" r="1.1"/>
    <circle class="star s4" cx="392" cy="26" r="1.5"/>
    <circle class="star" cx="442" cy="96" r="1.2"/>
    <circle class="star s2" cx="486" cy="48" r="1.9"/>
    <circle class="star s5" cx="527" cy="149" r="1.2"/>
    <circle class="star s3" cx="572" cy="35" r="1.5"/>
    <circle class="star s4" cx="719" cy="43" r="1.8"/>
    <circle class="star s2" cx="759" cy="105" r="1.3"/>
    <circle class="star" cx="695" cy="211" r="1.2"/>
    <circle class="star s5" cx="755" cy="267" r="1.6"/>
    <circle class="star s3" cx="68" cy="207" r="1.5"/>
    <circle class="star s2" cx="148" cy="257" r="1.1"/>
    <circle class="star s4" cx="247" cy="181" r="1.4"/>
    <circle class="star" cx="334" cy="237" r="1.2"/>
    <circle class="star s5" cx="21" cy="286" r="1.4"/>
    <circle class="star s3" cx="535" cy="248" r="1.1"/>
    <circle class="star s4" cx="786" cy="167" r="1.1"/>
  </g>

  <!-- Brighter four-point stars -->
  <g fill="#fff8c9">
    <path class="star" d="M104 154 L106 161 L113 163 L106 165 L104 172 L102 165 L95 163 L102 161 Z"/>
    <path class="star s3" d="M280 158 L282 164 L288 166 L282 168 L280 174 L278 168 L272 166 L278 164 Z"/>
    <path class="star s4" d="M470 201 L472 207 L478 209 L472 211 L470 217 L468 211 L462 209 L468 207 Z"/>
    <path class="star s2" d="M740 159 L742 165 L748 167 L742 169 L740 175 L738 169 L732 167 L738 165 Z"/>
    <path class="star s5" d="M360 21 L361.5 26 L366.5 27.5 L361.5 29 L360 34 L358.5 29 L353.5 27.5 L358.5 26 Z"/>
  </g>

  <!-- Shooting star: appears immediately, then repeats every four seconds -->
  <g class="shooting">
    <path d="M0 0 L-66 31" stroke="#fff8d0" stroke-width="2.4" stroke-linecap="round"/>
    <path d="M0 0 L-33 16" stroke="#ffd98a" stroke-width="1.2" stroke-linecap="round" opacity="0.8"/>
    <circle cx="0" cy="0" r="2.2" fill="#fffef1"/>
  </g>

  <!-- Moon and soft glow -->
  <g class="moon-halo">
    <circle cx="640" cy="120" r="104" fill="url(#moonGlow)"/>
    <circle cx="640" cy="120" r="37" fill="url(#moonBody)" filter="url(#softGlow)"/>
    <g fill="#d9c98f" opacity="0.28">
      <circle cx="628" cy="106" r="7"/>
      <circle cx="653" cy="131" r="9"/>
      <circle cx="630" cy="139" r="4.5"/>
      <circle cx="657" cy="101" r="3.5"/>
      <circle cx="617" cy="128" r="3"/>
    </g>
  </g>

  <!-- Wispy clouds -->
  <g fill="#a7bad0" opacity="0.10" filter="url(#blurCloud)">
    <ellipse cx="180" cy="160" rx="78" ry="10"/>
    <ellipse cx="210" cy="153" rx="48" ry="8"/>
    <ellipse cx="545" cy="254" rx="96" ry="10"/>
    <ellipse cx="505" cy="247" rx="45" ry="7"/>
  </g>

  <!-- Distant layered hills -->
  <path d="M0 365 C78 320 125 340 195 374 C275 413 320 326 402 344 C490 363 535 405 615 363 C687 326 742 330 800 356 L800 600 L0 600 Z"
        fill="#1b3651"/>
  <path d="M0 410 C95 360 148 388 225 421 C310 458 372 371 452 390 C533 410 592 451 681 400 C731 373 766 374 800 390 L800 600 L0 600 Z"
        fill="#23485a"/>

  <!-- Distant pine trees -->
  <g fill="#122f3b" opacity="0.92">
    <path d="M73 408 L93 353 L113 408 Z M85 377 L93 353 L101 377 Z"/>
    <path d="M110 419 L133 350 L156 419 Z M122 382 L133 350 L144 382 Z"/>
    <path d="M657 409 L677 348 L697 409 Z M669 375 L677 348 L685 375 Z"/>
    <path d="M699 421 L724 339 L749 421 Z M712 377 L724 339 L736 377 Z"/>
    <path d="M752 414 L770 362 L788 414 Z"/>
  </g>

  <!-- Main hill -->
  <path d="M0 465 C105 424 205 430 295 458 C405 493 501 441 610 433 C690 427 748 440 800 460 L800 600 L0 600 Z"
        fill="url(#hill)"/>

  <!-- Foreground slope -->
  <path d="M0 523 C116 474 235 478 348 512 C468 548 584 475 682 477 C729 478 767 486 800 497 L800 600 L0 600 Z"
        fill="url(#frontHill)"/>

  <!-- Small ground details -->
  <g fill="#3d6a5c" opacity="0.55">
    <ellipse cx="135" cy="501" rx="31" ry="5"/>
    <ellipse cx="584" cy="488" rx="38" ry="6"/>
    <ellipse cx="705" cy="535" rx="46" ry="7"/>
    <ellipse cx="241" cy="555" rx="27" ry="5"/>
  </g>

  <!-- Fox shadow -->
  <ellipse cx="371" cy="509" rx="116" ry="17" fill="#07171f" opacity="0.55"/>

  <!-- Fox -->
  <g class="breath">
    <!-- Tail behind body -->
    <g class="tail">
      <path d="M320 474
               C279 481 240 463 216 436
               C200 418 177 411 158 418
               C174 424 178 438 173 451
               C193 440 210 449 221 462
               C245 492 283 506 323 493 Z"
            fill="url(#tailCoat)" stroke="#8d351f" stroke-width="2.5" stroke-linejoin="round"/>
      <!-- White tail tip -->
      <path d="M216 436 C200 418 177 411 158 418 C169 422 175 429 176 437 C163 433 152 436 146 442 C164 442 175 449 181 459 C191 447 203 440 216 436 Z"
            fill="#f5eee0"/>
      <path d="M179 458 C185 462 191 469 194 478" fill="none" stroke="#d9d3c8" stroke-width="3" stroke-linecap="round" opacity="0.65"/>
    </g>

    <!-- Haunch -->
    <path d="M290 493 C289 453 302 420 329 404 C357 387 391 398 407 430 C419 453 418 481 412 500 C378 512 324 511 290 493 Z"
          fill="url(#foxCoat)" stroke="#96371f" stroke-width="3"/>

    <!-- Chest -->
    <path d="M367 418 C392 414 415 430 423 454 C428 470 426 486 419 501 L371 501 C380 471 378 442 367 418 Z"
          fill="#f3eee2"/>

    <!-- Front legs -->
    <path d="M370 493 C365 468 368 443 377 427 C386 436 389 462 386 496 Z"
          fill="url(#foxCoat)" stroke="#96371f" stroke-width="2.5"/>
    <path d="M394 499 C390 470 395 449 404 436 C412 451 412 475 408 500 Z"
          fill="#e97831" stroke="#96371f" stroke-width="2.5"/>
    <ellipse cx="379" cy="497" rx="11" ry="5" fill="#63342a"/>
    <ellipse cx="404" cy="499" rx="11" ry="5" fill="#63342a"/>

    <!-- Back paw -->
    <ellipse cx="300" cy="495" rx="27" ry="11" fill="#9f3a20" stroke="#7c2d1c" stroke-width="2"/>
    <ellipse cx="295" cy="499" rx="7" ry="4" fill="#573029"/>

    <!-- Neck and head, facing up toward the moon -->
    <path d="M366 427 C363 404 373 381 395 368 C421 351 456 357 476 377 C490 391 496 408 493 422 C489 441 464 450 438 448 C409 446 384 441 366 427 Z"
          fill="url(#foxCoat)" stroke="#96371f" stroke-width="3" stroke-linejoin="round"/>

    <!-- Left ear -->
    <path d="M386 377 L376 329 L410 361 Z" fill="#df6328" stroke="#96371f" stroke-width="3" stroke-linejoin="round"/>
    <path d="M386 367 L381 342 L400 362 Z" fill="#f3d5bd"/>

    <!-- Right ear -->
    <path d="M443 365 L458 322 L476 377 Z" fill="#df6328" stroke="#96371f" stroke-width="3" stroke-linejoin="round"/>
    <path d="M451 364 L458 338 L466 368 Z" fill="#f3d5bd"/>

    <!-- Face markings -->
    <path d="M449 378 C471 374 489 383 500 398 C492 405 478 409 461 407 C454 400 450 390 449 378 Z"
          fill="#f7f0e3"/>
    <path d="M478 389 C489 391 496 397 500 404 C494 410 486 412 478 410 Z" fill="#fbf6ea"/>

    <!-- Snout -->
    <path d="M474 400 C487 397 500 400 508 407 C500 416 486 420 473 416 C470 411 470 405 474 400 Z"
          fill="#f5eee2" stroke="#b24b26" stroke-width="1.5"/>
    <path d="M501 404 C508 403 513 407 512 412 C509 417 503 416 499 412 Z" fill="#34272a"/>

    <!-- Eye looking toward moon -->
    <path d="M454 384 Q465 377 475 384 Q466 392 455 389 Z" fill="#34262a"/>
    <circle cx="469" cy="383" r="2.2" fill="#fff8dc"/>
    <circle cx="469.5" cy="382.5" r="1" fill="#1c1720"/>

    <!-- Brow -->
    <path d="M451 378 Q462 372 474 377" fill="none" stroke="#a94020" stroke-width="3" stroke-linecap="round"/>

    <!-- Cheek ruff -->
    <path d="M433 398 L447 412 L440 425 L451 437 L436 443 L428 430 L416 437 L414 421 Z"
          fill="#f08b3d" stroke="#b44a23" stroke-width="1.5" stroke-linejoin="round"/>

    <!-- Collar-like shadow -->
    <path d="M374 414 C385 424 397 429 410 430" fill="none" stroke="#b44822" stroke-width="3" opacity="0.7"/>
  </g>

  <!-- Foreground grasses -->
  <g class="grass" fill="none" stroke="#4e7964" stroke-width="3" stroke-linecap="round" opacity="0.8">
    <path d="M103 512 Q98 496 89 488 M103 512 Q104 493 111 483 M103 512 Q110 499 120 495"/>
  </g>
  <g class="grass g2" fill="none" stroke="#527f69" stroke-width="2.5" stroke-linecap="round" opacity="0.7">
    <path d="M587 506 Q582 491 574 485 M587 506 Q589 488 596 480 M587 506 Q596 496 606 494"/>
  </g>
  <g class="grass g3" fill="none" stroke="#416c5c" stroke-width="3" stroke-linecap="round" opacity="0.75">
    <path d="M729 528 Q724 509 714 501 M729 528 Q730 505 739 493 M729 528 Q739 514 750 510"/>
  </g>

  <!-- A couple of tiny night insects near the fox -->
  <g fill="#dff5c9" opacity="0.6">
    <circle cx="487" cy="450" r="1.2"/>
    <circle cx="500" cy="443" r="1"/>
    <circle cx="514" cy="449" r="0.9"/>
  </g>
</svg>

Reasoning trace (334 tokens)

We need craft SVG only code block. Need animations. viewBox 0 0 800 600. Composition. Use CSS keyframes inside SVG. Shooting star every 4s first within 2s: animation 4s infinite with keyframes visible early. Tail sway via transform-origin rotate. Stars twinkle staggered.

Let's write detailed SVG. Ensure recognizable fox. Hill foreground, distant hills, trees silhouettes. Moon glow gradient/filter radial gradient. Colors deep navy, teal, orange.

Shooting star: line/path animated translate from offscreen to across over 4s cycle. Use group with opacity animation keyframes: 0% opacity 0, 5% 1, 18% 0, 100% 0; path motion translate maybe. First visible within 2s: at 0-2s. Let's make meteor at top-right moving down-left: initial translate(140,-60) to (-180,220) during first 20% (0.8s). Use animateTransform? CSS with transform translate. keyframes shooting: 0% opacity0 transform translate(160,-70); 4% opacity1; 20% opacity0 transform translate(-140,220); 100% same. duration 4s infinite. Good.

Stars many with classes twinkle and delays.

Fox sitting on hill facing right/moon upper right. Fox body around x 320, head 420, snout 465 pointing up-right? Moon at 640,120. Fox looks right. Pointy ears, white snout, bushy tail with white tip on left.

Let's produce.