Muse Ember

by MetaReasoningClean

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

How it went

Total time: 16.4 s
Cost: $0.0044
Output tokens: 8,725
Spent thinking: 3,632 tokens
Speed: 595.6 tok/s
Console errors: 0

First token after: 1.8 s
First visible text after: 9.7 s
Prompt tokens: 540
Code size: 12.9 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"medium"}
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 · 211 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" role="img" aria-labelledby="title desc">
  <title id="title">Fox watching the moon on a starry night</title>
  <desc id="desc">A small orange fox with a bushy white-tipped tail sits on a grassy hill, looking up at a glowing full moon among twinkling stars. A shooting star crosses the sky.</desc>
  <style>
    .star { transform-box: fill-box; transform-origin: center; animation: twinkle 3s ease-in-out infinite alternate; }
    @keyframes twinkle { from { opacity:.3; transform:scale(.7); } to { opacity:1; transform:scale(1.2); } }
    .tail { transform-box: fill-box; transform-origin: 92% 92%; animation: sway 4.5s ease-in-out infinite alternate; }
    @keyframes sway { from { transform:rotate(-3.5deg); } to { transform:rotate(4deg); } }
    .head { transform-box: fill-box; transform-origin: 28% 72%; animation: headBob 6s ease-in-out infinite alternate; }
    @keyframes headBob { from { transform:rotate(0deg); } to { transform:rotate(-3deg); } }
    .ear { transform-box: fill-box; transform-origin: 50% 100%; animation: earTwitch 7s ease-in-out infinite; }
    @keyframes earTwitch { 0%,88%,100% { transform:rotate(0deg); } 92% { transform:rotate(-6deg); } 96% { transform:rotate(3deg); } }
    .glow { transform-box: fill-box; transform-origin: center; animation: glowPulse 6s ease-in-out infinite alternate; }
    @keyframes glowPulse { from { opacity:.75; transform:scale(1); } to { opacity:1; transform:scale(1.07); } }
    .shooting { opacity:0; animation: shoot 4s linear infinite; }
    @keyframes shoot {
      0% { transform:translate(735px,28px); opacity:0; }
      2% { opacity:1; }
      13% { transform:translate(425px,185px); opacity:1; }
      19% { transform:translate(335px,232px); opacity:0; }
      100% { transform:translate(335px,232px); opacity:0; }
    }
    .cloud { animation: drift 18s ease-in-out infinite alternate; }
    @keyframes drift { from { transform:translateX(0); } to { transform:translateX(26px); } }
    .firefly { animation: floaty 5s ease-in-out infinite alternate; }
    @keyframes floaty { from { transform:translate(0,0); opacity:.35; } to { transform:translate(10px,-14px); opacity:.95; } }
  </style>
  <defs>
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#060a1c"/>
      <stop offset="42%" stop-color="#12204a"/>
      <stop offset="74%" stop-color="#2b3f6e"/>
      <stop offset="100%" stop-color="#5a6ea3"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff8d6" stop-opacity=".95"/>
      <stop offset="38%" stop-color="#ffeaa8" stop-opacity=".48"/>
      <stop offset="72%" stop-color="#d9c27a" stop-opacity=".14"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moonGrad" cx="38%" cy="34%" r="72%">
      <stop offset="0%" stop-color="#fffef2"/>
      <stop offset="55%" stop-color="#fdf0bd"/>
      <stop offset="100%" stop-color="#e8c878"/>
    </radialGradient>
    <linearGradient id="distantGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#3b5385"/>
      <stop offset="100%" stop-color="#22325e"/>
    </linearGradient>
    <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#2a4d3c"/>
      <stop offset="100%" stop-color="#0d231d"/>
    </linearGradient>
    <linearGradient id="foxGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#f59a3d"/>
      <stop offset="100%" stop-color="#de6f1c"/>
    </linearGradient>
    <linearGradient id="trailGrad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="88" y2="-46">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
    </linearGradient>
  </defs>

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

  <!-- Stars -->
  <g fill="#ffffff">
    <circle class="star" cx="52" cy="58" r="2.2"/>
    <circle class="star" style="animation-delay:-.7s" cx="118" cy="118" r="1.6"/>
    <circle class="star" style="animation-delay:-1.4s" cx="182" cy="48" r="2"/>
    <circle class="star" style="animation-delay:-.3s" cx="238" cy="102" r="1.5"/>
    <circle class="star" style="animation-delay:-2s" cx="292" cy="38" r="2.4"/>
    <circle class="star" style="animation-delay:-1.1s" cx="352" cy="88" r="1.7"/>
    <circle class="star" style="animation-delay:-.5s" cx="415" cy="42" r="2"/>
    <circle class="star" style="animation-delay:-1.8s" cx="468" cy="128" r="1.5"/>
    <circle class="star" style="animation-delay:-.9s" cx="512" cy="58" r="2.1"/>
    <circle class="star" style="animation-delay:-2.3s" cx="565" cy="168" r="1.6"/>
    <circle class="star" style="animation-delay:-1.6s" cx="598" cy="38" r="1.8"/>
    <circle class="star" style="animation-delay:-.4s" cx="702" cy="52" r="2"/>
    <circle class="star" style="animation-delay:-1.2s" cx="755" cy="112" r="1.6"/>
    <circle class="star" style="animation-delay:-2.1s" cx="772" cy="188" r="2.2"/>
    <circle class="star" style="animation-delay:-.8s" cx="86" cy="178" r="1.7"/>
    <circle class="star" style="animation-delay:-1.9s" cx="152" cy="222" r="1.5"/>
    <circle class="star" style="animation-delay:-.2s" cx="318" cy="172" r="1.8"/>
    <circle class="star" style="animation-delay:-1s" cx="382" cy="208" r="1.4"/>
    <circle class="star" style="animation-delay:-2.4s" cx="528" cy="228" r="1.6"/>
    <circle class="star" style="animation-delay:-.6s" cx="648" cy="222" r="1.5"/>
    <circle class="star" style="animation-delay:-1.5s" cx="34" cy="268" r="1.6"/>
    <circle class="star" style="animation-delay:-.9s" cx="728" cy="282" r="1.7"/>
    <circle class="star" style="animation-delay:-2s" cx="448" cy="262" r="1.4"/>
    <circle class="star" style="animation-delay:-1.3s" cx="210" cy="152" r="1.4"/>
    <path class="star" style="animation-delay:-.5s" transform="translate(98,88)" d="M0-9 L2.2-2.2 L9 0 L2.2 2.2 L0 9 L-2.2 2.2 L-9 0 L-2.2-2.2 Z"/>
    <path class="star" style="animation-delay:-1.7s" transform="translate(270,68) scale(.8)" d="M0-9 L2.2-2.2 L9 0 L2.2 2.2 L0 9 L-2.2 2.2 L-9 0 L-2.2-2.2 Z"/>
    <path class="star" style="animation-delay:-1s" transform="translate(492,102) scale(.75)" d="M0-9 L2.2-2.2 L9 0 L2.2 2.2 L0 9 L-2.2 2.2 L-9 0 L-2.2-2.2 Z"/>
    <path class="star" style="animation-delay:-2.2s" transform="translate(688,148) scale(.9)" d="M0-9 L2.2-2.2 L9 0 L2.2 2.2 L0 9 L-2.2 2.2 L-9 0 L-2.2-2.2 Z"/>
    <path class="star" style="animation-delay:-.3s" transform="translate(58,318) scale(.7)" d="M0-9 L2.2-2.2 L9 0 L2.2 2.2 L0 9 L-2.2 2.2 L-9 0 L-2.2-2.2 Z"/>
    <path class="star" style="animation-delay:-1.4s" transform="translate(620,82) scale(.65)" d="M0-9 L2.2-2.2 L9 0 L2.2 2.2 L0 9 L-2.2 2.2 L-9 0 L-2.2-2.2 Z"/>
  </g>

  <!-- Shooting star: every 4s, first immediately -->
  <g class="shooting">
    <line x1="0" y1="0" x2="88" y2="-46" stroke="url(#trailGrad)" stroke-width="3" stroke-linecap="round"/>
    <circle cx="0" cy="0" r="3.2" fill="#ffffff"/>
    <circle cx="0" cy="0" r="7" fill="#ffffff" opacity=".35"/>
  </g>

  <!-- Moon with soft glow -->
  <g>
    <circle class="glow" cx="645" cy="112" r="105" fill="url(#moonGlow)"/>
    <circle cx="645" cy="112" r="52" fill="url(#moonGrad)"/>
    <circle cx="628" cy="96" r="10" fill="#e5c97e" opacity=".45"/>
    <circle cx="658" cy="122" r="13" fill="#e5c97e" opacity=".38"/>
    <circle cx="630" cy="130" r="7" fill="#e5c97e" opacity=".42"/>
    <circle cx="662" cy="92" r="6" fill="#e5c97e" opacity=".34"/>
  </g>

  <!-- Wispy clouds -->
  <g class="cloud" fill="#cbd6f2" opacity=".16">
    <ellipse cx="180" cy="238" rx="82" ry="16"/>
    <ellipse cx="230" cy="228" rx="54" ry="12"/>
    <ellipse cx="540" cy="268" rx="70" ry="13"/>
  </g>

  <!-- Distant hills -->
  <path d="M0,405 C120,350 250,380 380,415 C520,452 640,385 800,410 L800,600 L0,600 Z" fill="url(#distantGrad)" opacity=".85"/>
  <path d="M0,445 C150,405 310,430 470,458 C620,484 710,440 800,455 L800,600 L0,600 Z" fill="#1b2c52" opacity=".9"/>

  <!-- Distant pine trees -->
  <g fill="#122440">
    <path d="M92,430 L112,372 L132,430 Z M100,405 L112,368 L124,405 Z"/>
    <path d="M148,440 L164,398 L180,440 Z M155,420 L164,395 L173,420 Z"/>
    <path d="M612,430 L630,378 L648,430 Z M620,404 L630,376 L640,404 Z"/>
    <path d="M676,438 L692,400 L708,438 Z M683,419 L692,398 L701,419 Z"/>
    <path d="M720,425 L738,370 L756,425 Z M729,398 L738,368 L747,398 Z"/>
  </g>

  <!-- Foreground hill -->
  <path d="M0,478 C140,438 280,430 410,452 C540,474 660,458 800,482 L800,600 L0,600 Z" fill="url(#hillGrad)"/>
  <path d="M0,478 C140,438 280,430 410,452 C540,474 660,458 800,482" fill="none" stroke="#3f6b52" stroke-width="3" opacity=".55"/>

  <!-- Pine trees framing scene -->
  <g fill="#0b211d" stroke="#12332b" stroke-width="2" stroke-linejoin="round">
    <path d="M38,500 L72,398 L106,500 Z M52,456 L72,392 L92,456 Z M60,420 L72,382 L84,420 Z"/>
    <rect x="67" y="498" width="10" height="26" fill="#081a16"/>
    <path d="M694,508 L728,410 L762,508 Z M708,464 L728,404 L748,464 Z M716,428 L728,394 L740,428 Z"/>
    <rect x="723" y="506" width="10" height="24" fill="#081a16"/>
  </g>

  <!-- Grass tufts and rocks -->
  <g stroke="#2f5c44" stroke-width="3" stroke-linecap="round" fill="none">
    <path d="M268,478 q3-16 8-22 M276,480 q0-16-4-24 M284,480 q5-13 11-18"/>
    <path d="M510,486 q3-15 8-21 M518,488 q0-15-4-23 M526,488 q5-12 10-17"/>
    <path d="M592,502 q3-14 7-19 M600,504 q1-14-3-21"/>
    <path d="M158,500 q3-14 7-19 M166,502 q0-13-4-20"/>
  </g>
  <ellipse cx="300" cy="492" rx="18" ry="7" fill="#162e24"/>
  <ellipse cx="560" cy="506" rx="22" ry="8" fill="#162e24"/>

  <!-- FOX -->
  <g stroke="#7a3b12" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round">
    <!-- Bushy tail, swaying -->
    <g class="tail">
      <path d="M378,458 C305,458 225,426 200,360 C185,320 200,275 235,268 C265,262 285,285 282,315 C280,345 295,375 325,395 C350,411 372,418 382,420 Z" fill="url(#foxGrad)"/>
      <path d="M200,360 C185,320 200,275 235,268 C255,264 270,274 276,290 C260,295 246,310 241,330 C231,360 236,386 251,406 C230,394 212,380 200,360 Z" fill="#fff3e0"/>
      <path d="M292,330 C270,345 250,360 240,384" fill="none" stroke="#c75e16" stroke-width="3" opacity=".5"/>
    </g>

    <!-- Body -->
    <path d="M355,462 C340,410 345,350 375,325 C395,308 430,308 455,330 C475,348 482,385 478,420 C475,445 470,458 465,462 Z" fill="url(#foxGrad)"/>
    <!-- Cream chest -->
    <path d="M395,340 C415,334 440,344 450,365 C460,390 455,425 445,456 L410,456 C398,420 392,375 395,340 Z" fill="#fff3e0"/>
    <!-- Hind haunch / paw -->
    <path d="M355,462 C350,430 360,405 382,398 C405,392 420,410 418,432 C416,450 405,460 392,462 Z" fill="#d96a1b"/>
    <ellipse cx="384" cy="462" rx="30" ry="9" fill="#fff3e0"/>
    <!-- Front legs -->
    <path d="M422,386 L436,386 L438,462 L420,462 Z" fill="#e87f27"/>
    <path d="M442,386 L455,388 L458,462 L442,462 Z" fill="#d96a1b"/>
    <path d="M420,462 L438,462 L438,470 L418,470 Q415,465 420,462 Z" fill="#2b211c" stroke="none"/>
    <path d="M442,462 L458,462 L458,470 L440,470 Q439,465 442,462 Z" fill="#2b211c" stroke="none"/>

    <!-- Head, looking up toward moon -->
    <g class="head">
      <path class="ear" d="M404,278 L420,228 L442,268 Z" fill="#d96a1b"/>
      <path d="M412,268 L420,242 L433,266 Z" fill="#5b2d18" stroke="none"/>
      <path class="ear" d="M436,270 L458,226 L478,272 Z" fill="url(#foxGrad)"/>
      <path d="M448,262 L458,240 L468,264 Z" fill="#7a3b12" stroke="none"/>
      <ellipse cx="432" cy="304" rx="43" ry="37" fill="url(#foxGrad)"/>
      <!-- Cheek fur -->
      <path d="M398,318 L412,330 L424,318 L436,332 L450,319 L462,330 L458,344 C440,352 415,350 404,338 Z" fill="#fff3e0" stroke="none"/>
      <!-- Snout pointing up-right to moon -->
      <path d="M464,286 C487,284 503,294 510,307 C503,320 486,327 469,325 C460,313 458,298 464,286 Z" fill="#f7b36a"/>
      <path d="M469,325 C486,327 503,320 510,307 C503,314 490,317 477,315 C471,318 469,321 469,325 Z" fill="#fff3e0" stroke="none"/>
      <circle cx="508" cy="305" r="6.5" fill="#1f1713" stroke="none"/>
      <!-- Eye looking up -->
      <ellipse cx="456" cy="298" rx="5.5" ry="7.5" fill="#1f1713" stroke="none" transform="rotate(-18 456 298)"/>
      <circle cx="458" cy="295" r="1.8" fill="#ffffff" stroke="none"/>
      <path d="M445,284 Q456,279 467,285" fill="none" stroke="#8a4a16" stroke-width="3"/>
      <!-- Mouth -->
      <path d="M492,318 Q500,321 506,317" fill="none" stroke="#7a3b12" stroke-width="2"/>
    </g>
  </g>

  <!-- Fireflies -->
  <circle class="firefly" cx="250" cy="470" r="3" fill="#ffe98a"/>
  <circle class="firefly" style="animation-delay:-2s" cx="540" cy="462" r="2.6" fill="#ffe98a"/>
  <circle class="firefly" style="animation-delay:-3.5s" cx="620" cy="488" r="2.2" fill="#ffe98a"/>

  <!-- Soft vignette -->
  <rect width="800" height="600" fill="none" stroke="#060a1c" stroke-width="2" opacity=".25"/>
</svg>

Reasoning trace (3,632 tokens)

Generating standalone SVG with CSS animations for stars, tail sway, and timed shooting star within 800x600 composition.Adding fox silhouette with tail sway animation and shooting star timing to the SVG composition.Structuring the SVG with gradients, paths, and CSS animations for stars, tail sway, and shooting star.Refining the shooting star path and tail geometry while adding twinkle delays and responsive SVG attributes.Adding fox silhouette paths, ear and eye geometry, and star sparkle transforms with CSS animations.