Muse Ember

by MetaReasoningClean

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

How it went

Total time: 25.4 s
Cost: $0.0069
Output tokens: 13,714
Spent thinking: 8,657 tokens
Speed: 579.8 tok/s
Console errors: 0

First token after: 1.8 s
First visible text after: 20.2 s
Prompt tokens: 540
Code size: 11.9 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"max"}
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 · 180 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 stylized orange fox with pointy ears and a bushy white-tipped tail sits on a dark hill under a glowing moon and twinkling stars. A shooting star crosses the sky.</desc>
<defs>
  <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#070c22"/>
    <stop offset="52%" stop-color="#122354"/>
    <stop offset="100%" stop-color="#2d4470"/>
  </linearGradient>
  <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#1c315a"/>
    <stop offset="100%" stop-color="#0e1f3a"/>
  </linearGradient>
  <linearGradient id="foxGrad" x1="0" y1="0" x2="1" y2="1">
    <stop offset="0%" stop-color="#f08a3c"/>
    <stop offset="100%" stop-color="#d95f26"/>
  </linearGradient>
  <radialGradient id="moonGrad" cx="38%" cy="35%" r="75%">
    <stop offset="0%" stop-color="#fffbe6"/>
    <stop offset="70%" stop-color="#f7eac0"/>
    <stop offset="100%" stop-color="#e9d48f"/>
  </radialGradient>
  <radialGradient id="glowGrad" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="#fff3b0" stop-opacity="0.55"/>
    <stop offset="42%" stop-color="#f7eac0" stop-opacity="0.22"/>
    <stop offset="100%" stop-color="#f7eac0" stop-opacity="0"/>
  </radialGradient>
  <linearGradient id="shootGrad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="95" y2="-42">
    <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
    <stop offset="35%" stop-color="#ffffff" stop-opacity="0.55"/>
    <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
  </linearGradient>
  <filter id="soft" x="-60%" y="-60%" width="220%" height="220%">
    <feGaussianBlur stdDeviation="7"/>
  </filter>
  <path id="spark" d="M0 -7 L1.7 -1.7 L7 0 L1.7 1.7 L0 7 L-1.7 1.7 L-7 0 L-1.7 -1.7 Z" fill="#ffffff"/>
  <g id="pine">
    <path d="M0 -82 L21 -44 L10 -44 L26 -15 L13 -15 L30 17 L-30 17 L-13 -15 L-26 -15 L-10 -44 L-21 -44 Z" fill="#0e1e36"/>
    <rect x="-4" y="17" width="8" height="15" rx="2" fill="#0a1629"/>
  </g>
  <path id="grass" d="M0 0 L4 -13 L8 0 L12 -15 L16 0 L20 -11 L24 0 Z" fill="#2a4a6b"/>
</defs>

<style>
  .tw1{animation:twinkle 2.2s ease-in-out infinite}
  .tw2{animation:twinkle 3.1s ease-in-out infinite .6s}
  .tw3{animation:twinkle 2.7s ease-in-out infinite 1.1s}
  .tw4{animation:twinkle 3.8s ease-in-out infinite .3s}
  @keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
  .tail{transform-box:view-box;transform-origin:312px 442px;animation:sway 4.8s ease-in-out infinite}
  @keyframes sway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(4.6deg)}}
  .shoot{opacity:0;animation:shoot 4s linear infinite}
  @keyframes shoot{
    0%{transform:translate(705px,42px);opacity:0}
    4%{opacity:1}
    20%{transform:translate(250px,238px);opacity:0}
    100%{transform:translate(250px,238px);opacity:0}
  }
  .glow{transform-box:view-box;transform-origin:640px 124px;animation:glowPulse 6s ease-in-out infinite}
  @keyframes glowPulse{0%,100%{opacity:.68;transform:scale(1)}50%{opacity:.94;transform:scale(1.055)}}
  .head{transform-box:view-box;transform-origin:398px 340px;animation:look 7s ease-in-out infinite}
  @keyframes look{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(2.1deg)}}
  .breath{transform-box:view-box;transform-origin:360px 462px;animation:breath 4.2s ease-in-out infinite}
  @keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
</style>

<!-- Sky -->
<rect x="0" y="0" width="800" height="600" fill="url(#skyGrad)"/>

<!-- Stars -->
<g fill="#ffffff">
  <circle class="tw1" cx="40" cy="40" r="1.8"/><circle class="tw2" cx="92" cy="24" r="1.3"/><circle class="tw3" cx="150" cy="60" r="2"/><circle class="tw4" cx="210" cy="30" r="1.4"/><circle class="tw1" cx="262" cy="72" r="1.6"/><circle class="tw2" cx="320" cy="40" r="1.3"/><circle class="tw3" cx="372" cy="76" r="1.9"/><circle class="tw4" cx="432" cy="30" r="1.4"/><circle class="tw1" cx="482" cy="66" r="1.7"/><circle class="tw2" cx="542" cy="34" r="1.3"/><circle class="tw3" cx="592" cy="72" r="1.6"/><circle class="tw4" cx="688" cy="42" r="1.5"/><circle class="tw1" cx="732" cy="78" r="1.8"/><circle class="tw2" cx="772" cy="34" r="1.3"/>
  <circle class="tw2" cx="58" cy="112" r="1.5"/><circle class="tw3" cx="122" cy="96" r="1.8"/><circle class="tw4" cx="182" cy="132" r="1.3"/><circle class="tw1" cx="242" cy="102" r="1.7"/><circle class="tw2" cx="292" cy="136" r="1.4"/><circle class="tw3" cx="342" cy="106" r="1.9"/><circle class="tw4" cx="402" cy="132" r="1.3"/><circle class="tw1" cx="462" cy="102" r="1.6"/><circle class="tw2" cx="522" cy="122" r="1.4"/><circle class="tw3" cx="572" cy="96" r="1.7"/>
  <circle class="tw3" cx="34" cy="182" r="1.6"/><circle class="tw4" cx="100" cy="206" r="1.3"/><circle class="tw1" cx="166" cy="170" r="1.8"/><circle class="tw2" cx="226" cy="206" r="1.4"/><circle class="tw3" cx="286" cy="176" r="1.7"/><circle class="tw4" cx="350" cy="212" r="1.3"/><circle class="tw1" cx="412" cy="182" r="1.6"/><circle class="tw2" cx="472" cy="206" r="1.4"/><circle class="tw3" cx="532" cy="172" r="1.8"/><circle class="tw4" cx="576" cy="212" r="1.3"/><circle class="tw1" cx="712" cy="188" r="1.6"/><circle class="tw2" cx="762" cy="162" r="1.4"/><circle class="tw3" cx="787" cy="212" r="1.7"/>
  <circle class="tw4" cx="46" cy="262" r="1.4"/><circle class="tw1" cx="112" cy="286" r="1.7"/><circle class="tw2" cx="176" cy="246" r="1.3"/><circle class="tw3" cx="252" cy="282" r="1.6"/><circle class="tw4" cx="316" cy="252" r="1.4"/><circle class="tw1" cx="376" cy="286" r="1.8"/><circle class="tw2" cx="442" cy="252" r="1.3"/><circle class="tw3" cx="498" cy="286" r="1.6"/><circle class="tw4" cx="556" cy="252" r="1.4"/><circle class="tw1" cx="722" cy="262" r="1.6"/><circle class="tw2" cx="772" cy="288" r="1.4"/><circle class="tw3" cx="742" cy="322" r="1.5"/><circle class="tw4" cx="682" cy="302" r="1.3"/>
  <circle class="tw1" cx="70" cy="330" r="1.4"/><circle class="tw2" cx="205" cy="322" r="1.5"/><circle class="tw3" cx="445" cy="322" r="1.4"/><circle class="tw4" cx="615" cy="328" r="1.5"/>
</g>
<g>
  <use href="#spark" class="tw2" transform="translate(155,86) scale(1)"/>
  <use href="#spark" class="tw3" transform="translate(366,56) scale(1.25)"/>
  <use href="#spark" class="tw1" transform="translate(508,146) scale(0.9)"/>
  <use href="#spark" class="tw4" transform="translate(706,222) scale(1.1)"/>
  <use href="#spark" class="tw2" transform="translate(86,232) scale(0.85)"/>
  <use href="#spark" class="tw3" transform="translate(446,216) scale(0.8)"/>
  <use href="#spark" class="tw1" transform="translate(248,152) scale(0.75)"/>
</g>

<!-- Moon with soft glow -->
<g>
  <circle class="glow" cx="640" cy="124" r="92" fill="url(#glowGrad)"/>
  <circle cx="640" cy="124" r="72" fill="#f7eac0" opacity="0.10" filter="url(#soft)"/>
  <circle cx="640" cy="124" r="50" fill="url(#moonGrad)"/>
  <circle cx="624" cy="110" r="8" fill="#dcc98f" opacity="0.45"/>
  <circle cx="656" cy="134" r="6" fill="#dcc98f" opacity="0.4"/>
  <circle cx="630" cy="140" r="4.2" fill="#dcc98f" opacity="0.38"/>
  <circle cx="650" cy="108" r="3.4" fill="#dcc98f" opacity="0.35"/>
  <ellipse cx="560" cy="92" rx="72" ry="13" fill="#a8bde0" opacity="0.12" filter="url(#soft)"/>
  <ellipse cx="686" cy="192" rx="92" ry="12" fill="#a8bde0" opacity="0.10" filter="url(#soft)"/>
</g>

<!-- Shooting star: crosses every 4s, first within 2s -->
<g class="shoot">
  <path d="M0 0 L94 -41 L11 6 Z" fill="url(#shootGrad)"/>
  <line x1="0" y1="0" x2="94" y2="-41" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" opacity="0.9"/>
  <circle cx="0" cy="0" r="4.2" fill="#ffffff"/>
  <circle cx="0" cy="0" r="8" fill="#ffffff" opacity="0.25"/>
</g>

<!-- Distant hills -->
<path d="M0 362 C120 322 262 340 382 360 C502 380 650 332 800 352 L800 600 L0 600 Z" fill="#1b2c4f" opacity="0.92"/>
<path d="M0 402 C150 372 302 392 452 412 C602 432 700 396 800 412 L800 600 L0 600 Z" fill="#16213d"/>

<!-- Distant trees -->
<use href="#pine" transform="translate(64,440) scale(1.15)"/>
<use href="#pine" transform="translate(120,432) scale(0.86)"/>
<use href="#pine" transform="translate(690,428) scale(1)"/>
<use href="#pine" transform="translate(742,434) scale(1.28)"/>
<use href="#pine" transform="translate(590,420) scale(0.62)"/>

<!-- Main hill -->
<path d="M0 502 C148 462 282 440 402 452 C522 464 662 452 800 486 L800 600 L0 600 Z" fill="url(#hillGrad)"/>

<!-- Ground details -->
<ellipse cx="205" cy="518" rx="26" ry="7" fill="#0c1a30" opacity="0.55"/>
<ellipse cx="540" cy="522" rx="32" ry="8" fill="#0c1a30" opacity="0.5"/>
<ellipse cx="620" cy="498" rx="16" ry="5" fill="#223a5f"/>
<g fill="#dbe8ff" opacity="0.85">
  <circle cx="180" cy="492" r="2.2"/><circle cx="512" cy="496" r="2"/><circle cx="585" cy="510" r="2.3"/><circle cx="248" cy="512" r="1.8"/><circle cx="460" cy="520" r="1.9"/>
</g>
<g fill="#ffedb0">
  <circle class="tw2" cx="222" cy="472" r="2.5"/><circle class="tw3" cx="546" cy="482" r="2.2"/><circle class="tw1" cx="590" cy="452" r="2.4"/><circle class="tw4" cx="186" cy="486" r="2"/><circle class="tw2" cx="506" cy="506" r="2"/>
</g>
<use href="#grass" transform="translate(128,512) scale(1.1)"/>
<use href="#grass" transform="translate(485,512) scale(1.25)"/>
<use href="#grass" transform="translate(560,528) scale(0.95)"/>
<use href="#grass" transform="translate(210,536) scale(1.35)"/>
<use href="#grass" transform="translate(655,520) scale(1.1)"/>

<!-- ============ FOX ============ -->
<!-- Tail (swaying) -->
<g class="tail">
  <path d="M322 452 C260 470 190 462 168 415 C152 382 168 340 205 332 C245 324 295 365 318 420 C323 433 325 443 322 452 Z" fill="url(#foxGrad)"/>
  <path d="M205 332 C245 324 295 365 318 420 C286 392 242 364 205 332 Z" fill="#c15322" opacity="0.38"/>
  <path d="M168 415 C152 382 168 340 205 332 C192 350 188 376 195 398 C198 410 198 422 195 432 C182 430 172 424 168 415 Z" fill="#f7ead6"/>
</g>

<!-- Body -->
<g class="breath">
  <path d="M292 462 C282 410 300 350 350 332 C382 321 414 338 422 376 C428 408 426 440 418 462 Z" fill="url(#foxGrad)"/>
  <path d="M292 462 C282 410 300 350 350 332 C330 366 322 412 328 462 Z" fill="#c15322" opacity="0.32"/>
  <path d="M362 358 C386 350 406 364 410 392 C413 418 410 445 402 462 L368 462 C358 428 356 387 362 358 Z" fill="#f7ead6"/>
  <ellipse cx="338" cy="428" rx="44" ry="34" fill="#d96a2e"/>
  <path d="M386 405 L410 405 L412 462 L388 462 Z" fill="#e07a35"/>
  <path d="M388 448 L412 448 L412 462 L388 462 Z" fill="#4a2c1c"/>
  <path d="M352 446 C375 438 410 444 424 452 C430 457 428 464 418 466 L372 466 C356 464 346 454 352 446 Z" fill="#c85a26"/>
  <path d="M398 452 L398 462 M410 453 L410 463" stroke="#7a3d22" stroke-width="1.6" stroke-linecap="round"/>
</g>

<!-- Head -->
<g class="head">
  <path d="M376 304 L380 248 L408 286 Z" fill="#c85a26"/>
  <path d="M384 286 L387 262 L400 282 Z" fill="#5e3420"/>
  <path d="M402 288 L420 236 L444 282 Z" fill="#e67e33"/>
  <path d="M414 274 L422 253 L434 274 Z" fill="#7a3d22"/>
  <circle cx="402" cy="318" r="37" fill="url(#foxGrad)"/>
  <path d="M368 330 L356 348 L372 345 L363 360 L382 355 C375 345 370 337 368 330 Z" fill="#f7ead6"/>
  <path d="M428 302 C448 300 468 310 476 324 C484 336 472 346 452 346 C436 346 424 338 424 322 C424 312 426 305 428 302 Z" fill="#f7ead6"/>
  <ellipse cx="470" cy="324" rx="7" ry="5.5" fill="#1f1a18"/>
  <circle cx="468" cy="321" r="1.7" fill="#ffffff" opacity="0.85"/>
  <path d="M420 318 Q431 310 440 317" stroke="#201712" stroke-width="3.2" stroke-linecap="round" fill="none"/>
  <path d="M418 306 Q430 300 442 306" stroke="#8a4a26" stroke-width="2.4" stroke-linecap="round" fill="none" opacity="0.8"/>
  <path d="M365 345 L355 365 L370 362 L362 378 L385 368 L390 350 Z" fill="#f7ead6"/>
</g>

<!-- Foreground framing trees -->
<use href="#pine" transform="translate(30,524) scale(1.75)"/>
<use href="#pine" transform="translate(778,528) scale(1.95)"/>
<use href="#pine" transform="translate(152,492) scale(0.58)"/>
<use href="#pine" transform="translate(668,494) scale(0.62)"/>
</svg>

Reasoning trace (8,657 tokens)

Generating an SVG with hand-drawn shapes, gradients, and SMIL/CSS animations for stars, tail sway, and looping shooting star.Adding SMIL and CSS animation timing for the shooting star and moon glow filter.Extending the scene with palette, fox geometry, and tail animation transform origin.Adding SVG gradients, filters, and CSS keyframes for stars, tail sway, and shooting star animation.Refining fox geometry and layering with absolute coordinates, tail path, and color contrast.Adding ear shapes, cheek fluff, and subtle CSS animations for head tilt, breathing, and moon glow.Adding layered hills, pine silhouettes, grass tufts, rocks, clouds, stars, and accessibility metadata to the SVG.Extending filtering to add soft blur for glow and clouds and adjusting SVG layering and transform origins.Adding fox anatomy paths, pine tree group, and decorative stars and fireflies with SVG layering.Defining a userSpaceOnUse gradient and tapered polygon for the shooting star and setting CSS transform origins with viewBox units.