Muse Ember

by MetaReasoningClean

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

How it went

Total time: 14.8 s
Cost: $0.0040
Output tokens: 7,866
Spent thinking: 2,789 tokens
Speed: 641.7 tok/s
Console errors: 0

First token after: 2.6 s
First visible text after: 7.9 s
Prompt tokens: 540
Code size: 12.5 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"low"}
Max output: 943,718 tokens
Generated: Nov 12, 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 · 269 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 sitting on a hill looking at the moon</title>
  <desc id="desc">A small orange fox with a bushy tail sits on a grassy hill at night, gazing up at a glowing moon in a starry sky with pine trees and distant hills.</desc>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#070b21"/>
      <stop offset="35%" stop-color="#121b3d"/>
      <stop offset="68%" stop-color="#1e345e"/>
      <stop offset="100%" stop-color="#2b5570"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff8d6" stop-opacity="0.95"/>
      <stop offset="28%" stop-color="#f9e79a" stop-opacity="0.55"/>
      <stop offset="62%" stop-color="#e8d27a" stop-opacity="0.18"/>
      <stop offset="100%" stop-color="#e8d27a" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moonFace" cx="38%" cy="34%" r="72%">
      <stop offset="0%" stop-color="#fffbe8"/>
      <stop offset="55%" stop-color="#f7e8a8"/>
      <stop offset="100%" stop-color="#e8cd77"/>
    </radialGradient>
    <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#2e5d4f"/>
      <stop offset="55%" stop-color="#1d4038"/>
      <stop offset="100%" stop-color="#0f2a2b"/>
    </linearGradient>
    <linearGradient id="distHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#25365f"/>
      <stop offset="100%" stop-color="#162445"/>
    </linearGradient>
    <linearGradient id="fur" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#f39136"/>
      <stop offset="58%" stop-color="#e06a1f"/>
      <stop offset="100%" stop-color="#c15114"/>
    </linearGradient>
    <linearGradient id="tailGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#f39a42"/>
      <stop offset="60%" stop-color="#dd6519"/>
      <stop offset="100%" stop-color="#b84a10"/>
    </linearGradient>
    <linearGradient id="shootGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="75%" stop-color="#ffffff" stop-opacity="0.9"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="1"/>
    </linearGradient>
    <linearGradient id="shootTrail" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#bfe8ff" stop-opacity="0"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.95"/>
    </linearGradient>
    <filter id="soft" x="-40%" y="-40%" width="180%" height="180%">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
  </defs>

  <style>
    .tw1 { animation: twinkle 2.4s ease-in-out infinite; }
    .tw2 { animation: twinkle 3.1s ease-in-out infinite; animation-delay: -0.9s; }
    .tw3 { animation: twinkle 1.9s ease-in-out infinite; animation-delay: -1.4s; }
    .tw4 { animation: twinkle 3.7s ease-in-out infinite; animation-delay: -2.1s; }
    @keyframes twinkle {
      0%, 100% { opacity: 0.25; }
      50% { opacity: 1; }
    }
    .tail {
      transform-box: view-box;
      transform-origin: 388px 462px;
      animation: sway 4.2s ease-in-out infinite;
    }
    @keyframes sway {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(5deg); }
    }
    .fox-body {
      transform-box: view-box;
      transform-origin: 425px 475px;
      animation: breathe 4.2s ease-in-out infinite;
    }
    @keyframes breathe {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-2px); }
    }
    .shooting {
      opacity: 0;
      animation: shoot 4s linear infinite;
      animation-delay: 1.5s;
    }
    @keyframes shoot {
      0% { transform: translate(0px, 0px); opacity: 0; }
      7% { opacity: 1; }
      28% { opacity: 0.95; }
      45% { transform: translate(-360px, 170px); opacity: 0; }
      100% { transform: translate(-360px, 170px); opacity: 0; }
    }
    .glow-pulse { animation: glow 5s ease-in-out infinite; }
    @keyframes glow {
      0%, 100% { opacity: 0.82; }
      50% { opacity: 1; }
    }
    .firefly { animation: drift 5s ease-in-out infinite; }
    .firefly2 { animation: drift 6.5s ease-in-out infinite; animation-delay: -2s; }
    @keyframes drift {
      0%, 100% { transform: translate(0px, 0px); opacity: 0.5; }
      50% { transform: translate(7px, -9px); opacity: 1; }
    }
  </style>

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

  <!-- STARS -->
  <g fill="#ffffff">
    <circle class="tw1" cx="48" cy="52" r="2.2"/>
    <circle class="tw2" cx="112" cy="98" r="1.6"/>
    <circle class="tw3" cx="178" cy="42" r="2"/>
    <circle class="tw4" cx="228" cy="126" r="1.4"/>
    <circle class="tw2" cx="292" cy="66" r="2.4"/>
    <circle class="tw1" cx="348" cy="118" r="1.5"/>
    <circle class="tw3" cx="410" cy="38" r="1.8"/>
    <circle class="tw4" cx="468" cy="86" r="1.3"/>
    <circle class="tw1" cx="512" cy="148" r="2"/>
    <circle class="tw2" cx="556" cy="42" r="1.6"/>
    <circle class="tw3" cx="588" cy="96" r="1.4"/>
    <circle class="tw4" cx="694" cy="48" r="2.2"/>
    <circle class="tw1" cx="742" cy="112" r="1.5"/>
    <circle class="tw2" cx="764" cy="204" r="1.8"/>
    <circle class="tw3" cx="706" cy="238" r="1.3"/>
    <circle class="tw4" cx="652" cy="272" r="1.6"/>
    <circle class="tw1" cx="566" cy="218" r="1.4"/>
    <circle class="tw2" cx="488" cy="192" r="1.7"/>
    <circle class="tw3" cx="378" cy="172" r="1.3"/>
    <circle class="tw4" cx="302" cy="214" r="1.9"/>
    <circle class="tw1" cx="206" cy="196" r="1.4"/>
    <circle class="tw2" cx="138" cy="258" r="1.7"/>
    <circle class="tw3" cx="74" cy="166" r="1.5"/>
    <circle class="tw4" cx="28" cy="268" r="1.8"/>
    <circle class="tw1" cx="92" cy="330" r="1.3"/>
    <circle class="tw2" cx="182" cy="288" r="1.2"/>
    <circle class="tw3" cx="262" cy="322" r="1.5"/>
    <circle class="tw4" cx="534" cy="312" r="1.2"/>
    <circle class="tw1" cx="622" cy="352" r="1.4"/>
    <circle class="tw2" cx="730" cy="322" r="1.2"/>
    <circle class="tw3" cx="42" cy="392" r="1.2"/>
    <circle class="tw4" cx="754" cy="414" r="1.3"/>
    <!-- tiny cross sparkles -->
    <path class="tw2" d="M160 86 l2 7 7 2 -7 2 -2 7 -2 -7 -7 -2 7 -2 Z" fill="#dbeeff"/>
    <path class="tw3" d="M442 132 l1.6 6 6 1.6 -6 1.6 -1.6 6 -1.6 -6 -6 -1.6 6 -1.6 Z" fill="#fff4c2"/>
    <path class="tw1" d="M676 178 l1.6 6 6 1.6 -6 1.6 -1.6 6 -1.6 -6 -6 -1.6 6 -1.6 Z" fill="#dbeeff"/>
    <path class="tw4" d="M84 226 l1.5 5.5 5.5 1.5 -5.5 1.5 -1.5 5.5 -1.5 -5.5 -5.5 -1.5 5.5 -1.5 Z" fill="#ffffff"/>
  </g>

  <!-- SHOOTING STAR -->
  <g class="shooting">
    <line x1="640" y1="52" x2="738" y2="10" stroke="url(#shootTrail)" stroke-width="3" stroke-linecap="round"/>
    <circle cx="640" cy="52" r="3.2" fill="#ffffff" filter="url(#soft)"/>
    <circle cx="640" cy="52" r="1.8" fill="#ffffff"/>
  </g>

  <!-- MOON -->
  <g>
    <circle class="glow-pulse" cx="628" cy="138" r="96" fill="url(#moonGlow)"/>
    <circle cx="628" cy="138" r="47" fill="url(#moonFace)"/>
    <circle cx="612" cy="124" r="9" fill="#e5c96e" opacity="0.55"/>
    <circle cx="642" cy="150" r="6.5" fill="#e5c96e" opacity="0.45"/>
    <circle cx="636" cy="122" r="4.5" fill="#e5c96e" opacity="0.4"/>
    <circle cx="618" cy="154" r="4" fill="#e5c96e" opacity="0.4"/>
    <path d="M 592 112 Q 602 96 628 94" fill="none" stroke="#fff9d8" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
  </g>

  <!-- DISTANT HILLS -->
  <path d="M0 372 Q 150 302 320 342 Q 470 376 620 330 Q 720 302 800 338 L800 600 L0 600 Z" fill="url(#distHill)"/>
  <path d="M0 410 Q 220 338 430 392 Q 620 438 800 386 L800 600 L0 600 Z" fill="#1b2f4e" opacity="0.9"/>

  <!-- PINE TREES - distant left -->
  <g fill="#0e213b">
    <path d="M38 402 L78 402 L58 330 Z"/>
    <path d="M28 424 L88 424 L58 356 Z"/>
    <rect x="52" y="418" width="12" height="22" fill="#0a1830"/>
    <path d="M96 414 L128 414 L112 356 Z"/>
    <path d="M88 430 L136 430 L112 376 Z"/>
    <rect x="107" y="424" width="10" height="18" fill="#0a1830"/>
  </g>
  <!-- PINE TREES - right -->
  <g fill="#0e213b">
    <path d="M700 406 L738 406 L719 338 Z"/>
    <path d="M690 430 L748 430 L719 360 Z"/>
    <rect x="713" y="424" width="12" height="22" fill="#0a1830"/>
    <path d="M752 420 L782 420 L767 368 Z"/>
    <path d="M744 434 L790 434 L767 384 Z"/>
  </g>

  <!-- FOREGROUND HILL -->
  <path d="M0 474 Q 240 398 430 436 Q 620 474 800 428 L800 600 L0 600 Z" fill="url(#hillGrad)"/>
  <path d="M0 492 Q 260 424 460 458 Q 640 488 800 452 L800 600 L0 600 Z" fill="#16322e" opacity="0.55"/>

  <!-- GRASS TUFTS & FLOWERS -->
  <g stroke="#3d7a5e" stroke-width="2.4" stroke-linecap="round" fill="none">
    <path d="M120 508 q4 -14 8 0 M128 508 q2 -18 7 -6"/>
    <path d="M196 532 q4 -14 8 0 M204 532 q2 -18 7 -6"/>
    <path d="M618 514 q4 -14 8 0 M626 514 q2 -18 7 -6"/>
    <path d="M682 538 q4 -14 8 0 M690 538 q2 -18 7 -6"/>
    <path d="M296 544 q4 -12 8 0"/>
    <path d="M540 548 q4 -12 8 0"/>
  </g>
  <g>
    <circle cx="152" cy="520" r="3" fill="#f7d774"/>
    <circle cx="580" cy="526" r="3" fill="#f2a7c3"/>
    <circle cx="238" cy="552" r="2.6" fill="#a8d8ff"/>
    <circle cx="660" cy="556" r="2.6" fill="#f7d774"/>
  </g>
  <circle class="firefly" cx="180" cy="472" r="3" fill="#ffe98a" filter="url(#soft)"/>
  <circle class="firefly2" cx="640" cy="482" r="2.6" fill="#ffe98a" filter="url(#soft)"/>

  <!-- ========== FOX ========== -->
  <g class="fox-body">
    <!-- shadow -->
    <ellipse cx="415" cy="478" rx="128" ry="16" fill="#0a1f1d" opacity="0.45"/>

    <!-- TAIL (swaying, behind body) -->
    <g class="tail">
      <path d="M392 466 C 340 476 286 458 264 420 C 246 388 258 352 294 346 C 336 339 378 376 394 422 C 400 440 400 454 392 466 Z" fill="url(#tailGrad)"/>
      <path d="M306 356 C 322 362 336 374 344 390 C 326 392 310 400 298 414 C 288 426 276 430 268 418 C 256 398 268 362 294 350 C 298 348 302 352 306 356 Z" fill="#fff3df"/>
      <path d="M330 380 C 352 396 368 418 376 442" fill="none" stroke="#b84a10" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
    </g>

    <!-- BODY -->
    <path d="M378 476 L384 410 C386 372 398 346 424 330 L452 338 C476 346 486 368 484 400 C482 428 474 454 470 476 Z" fill="url(#fur)"/>
    <!-- haunch -->
    <path d="M378 476 C 368 446 370 412 388 390 C 404 370 430 368 448 386 C 464 402 466 440 460 476 Z" fill="#d95f16"/>
    <!-- chest white -->
    <path d="M420 334 C 438 340 452 356 456 382 C 458 404 448 424 432 428 C 416 424 406 402 408 376 C 409 358 413 344 420 334 Z" fill="#fff3df"/>

    <!-- front leg -->
    <path d="M448 398 L466 402 L462 476 L444 476 Z" fill="#e87420"/>
    <path d="M443 462 L463 462 L464 478 L442 478 Z" fill="#fff3df"/>
    <!-- hind paw -->
    <path d="M382 462 L420 462 L424 478 L380 478 Z" fill="#fff3df"/>
    <path d="M396 466 L398 476 M408 466 L410 476" stroke="#c9b8a3" stroke-width="1.4" stroke-linecap="round"/>

    <!-- HEAD -->
    <g>
      <!-- ears -->
      <path d="M410 300 L412 238 L448 282 Z" fill="#e87420"/>
      <path d="M442 288 L470 232 L486 290 Z" fill="#e87420"/>
      <path d="M419 286 L421 252 L440 278 Z" fill="#5b2d12"/>
      <path d="M455 276 L470 246 L478 282 Z" fill="#5b2d12"/>
      <!-- skull -->
      <path d="M402 316 C402 282 422 262 448 262 C472 262 488 280 488 304 C488 326 474 342 452 348 C426 354 402 342 402 316 Z" fill="url(#fur)"/>
      <!-- cheek fluff -->
      <path d="M404 322 L388 330 L404 336 L390 344 L408 348 C404 338 402 330 404 322 Z" fill="#fff3df"/>
      <path d="M470 338 L486 344 L470 350 L484 356 L466 360 C472 352 474 345 470 338 Z" fill="#fff3df"/>
      <!-- snout pointing up-right toward moon -->
      <path d="M464 286 L522 302 L478 330 C466 318 460 302 464 286 Z" fill="#f08a2d"/>
      <path d="M464 302 L522 302 L484 326 C472 318 466 310 464 302 Z" fill="#fff3df"/>
      <!-- nose -->
      <ellipse cx="519" cy="302" rx="8" ry="6.5" fill="#22140c" transform="rotate(-18 519 302)"/>
      <circle cx="517" cy="299" r="2" fill="#ffffff" opacity="0.7"/>
      <!-- mouth -->
      <path d="M492 322 Q 502 328 512 323" fill="none" stroke="#22140c" stroke-width="2" stroke-linecap="round"/>
      <!-- eye looking up (happy closed arc + dot) -->
      <path d="M446 306 Q 456 298 466 306" fill="none" stroke="#22140c" stroke-width="3" stroke-linecap="round"/>
      <circle cx="457" cy="312" r="2.6" fill="#22140c"/>
      <!-- eyebrow -->
      <path d="M444 296 Q 456 290 468 295" fill="none" stroke="#8a3c0d" stroke-width="2.4" stroke-linecap="round" opacity="0.7"/>
    </g>
  </g>

  <!-- soft foreground vignette edge -->
  <rect width="800" height="600" fill="none" stroke="#05081a" stroke-width="2" opacity="0.25"/>
</svg>

Reasoning trace (2,789 tokens)

Balancing SVG format and animation requirements against no-JS and single-file constraints while structuring hand-drawn shapes and looping SMIL effects.Extending SVG styling with gradients and CSS animations for stars, tail sway, and timed shooting-star visibility.Adjusting the negative animation delay so the shooting star is visible at the 3-second screenshot point.Refining the keyframe timing and adding SVG tail sway with transform-box and twinkle animations.