Muse Ember

by MetaReasoningClean

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

How it went

Total time: 26.9 s
Cost: $0.0071
Output tokens: 14,140
Spent thinking: 8,133 tokens
Speed: 563.5 tok/s
Console errors: 0

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

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" preserveAspectRatio="xMidYMid meet" role="img" aria-labelledby="title desc" style="display:block;max-width:100%;height:auto;background:#0A0F27">
<title id="title">Fox sitting on a hill looking at the moon</title>
<desc id="desc">A hand-drawn orange fox with pointy ears and a bushy white-tipped tail sits on a grassy hill under a glowing full moon, surrounded by twinkling stars, pine trees and distant hills on a starry night.</desc>
<defs>
  <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#070B22"/>
    <stop offset="0.45" stop-color="#14244A"/>
    <stop offset="0.78" stop-color="#243767"/>
    <stop offset="1" stop-color="#374879"/>
  </linearGradient>
  <radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
    <stop offset="0" stop-color="#FFEFAD" stop-opacity="0.65"/>
    <stop offset="0.38" stop-color="#F7D67C" stop-opacity="0.28"/>
    <stop offset="0.72" stop-color="#E8B85A" stop-opacity="0.10"/>
    <stop offset="1" stop-color="#E8B85A" stop-opacity="0"/>
  </radialGradient>
  <radialGradient id="moonGrad" cx="0.38" cy="0.35" r="0.75">
    <stop offset="0" stop-color="#FFFBDC"/>
    <stop offset="0.55" stop-color="#F9E79A"/>
    <stop offset="1" stop-color="#EBC36A"/>
  </radialGradient>
  <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#1D4A3C"/>
    <stop offset="0.5" stop-color="#143A31"/>
    <stop offset="1" stop-color="#0C2924"/>
  </linearGradient>
  <radialGradient id="foxGrad" cx="0.42" cy="0.3" r="0.85">
    <stop offset="0" stop-color="#F08A3C"/>
    <stop offset="0.6" stop-color="#DB7126"/>
    <stop offset="1" stop-color="#B85A1B"/>
  </radialGradient>
  <radialGradient id="tailGrad" cx="0.4" cy="0.35" r="0.9">
    <stop offset="0" stop-color="#F08A3C"/>
    <stop offset="0.65" stop-color="#D96D22"/>
    <stop offset="1" stop-color="#A94F16"/>
  </radialGradient>
  <linearGradient id="shootGrad" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0" stop-color="#FFFFFF" stop-opacity="0"/>
    <stop offset="0.75" stop-color="#DFF3FF" stop-opacity="0.75"/>
    <stop offset="1" stop-color="#FFFFFF" stop-opacity="1"/>
  </linearGradient>
  <radialGradient id="vignette" cx="0.5" cy="0.42" r="0.78">
    <stop offset="0.62" stop-color="#000000" stop-opacity="0"/>
    <stop offset="1" stop-color="#03071A" stop-opacity="0.42"/>
  </radialGradient>
  <g id="pine">
    <rect x="-4" y="16" width="8" height="20" fill="currentColor"/>
    <path d="M0 -74 L20 -40 L10 -40 L24 -10 L12 -10 L29 22 L-29 22 L-12 -10 L-24 -10 L-10 -40 L-20 -40 Z" fill="currentColor"/>
  </g>
</defs>
<style>
  .s1{transform-box:fill-box;transform-origin:center;animation:tw 2.9s ease-in-out infinite}
  .s2{transform-box:fill-box;transform-origin:center;animation:tw 2.3s ease-in-out infinite;animation-delay:.7s}
  .s3{transform-box:fill-box;transform-origin:center;animation:tw 3.7s ease-in-out infinite;animation-delay:1.2s}
  .s4{transform-box:fill-box;transform-origin:center;animation:tw 2.6s ease-in-out infinite;animation-delay:.3s}
  @keyframes tw{0%,100%{opacity:.25;transform:scale(.65)}50%{opacity:1;transform:scale(1.18)}}
  .cloud{animation:drift 38s ease-in-out infinite alternate}
  .cloud2{animation:drift 52s ease-in-out infinite alternate;animation-delay:-12s}
  @keyframes drift{from{transform:translateX(-16px)}to{transform:translateX(24px)}}
  .ff{transform-box:fill-box;transform-origin:center;animation:float 5.5s ease-in-out infinite alternate}
  .ff2{animation-delay:-2s;animation-duration:6.5s}
  .ff3{animation-delay:-4s;animation-duration:4.8s}
  @keyframes float{from{transform:translate(0,0);opacity:.45}50%{opacity:1}to{transform:translate(12px,-14px);opacity:.55}}
</style>

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

<!-- Stars -->
<g fill="#FFF9D8">
  <circle class="s1" cx="38" cy="48" r="2"/>
  <circle class="s2" cx="78" cy="28" r="1.5"/>
  <circle class="s3" cx="125" cy="62" r="2.2"/>
  <circle class="s1" cx="168" cy="35" r="1.6"/>
  <circle class="s2" cx="205" cy="78" r="2"/>
  <circle class="s3" cx="252" cy="42" r="1.8"/>
  <circle class="s1" cx="295" cy="68" r="2.4"/>
  <circle class="s2" cx="335" cy="32" r="1.5"/>
  <circle class="s3" cx="372" cy="84" r="2"/>
  <circle class="s1" cx="418" cy="48" r="1.7"/>
  <circle class="s2" cx="462" cy="78" r="2.2"/>
  <circle class="s3" cx="505" cy="38" r="1.6"/>
  <circle class="s1" cx="545" cy="72" r="2"/>
  <circle class="s2" cx="585" cy="42" r="1.5"/>
  <circle class="s3" cx="705" cy="38" r="2"/>
  <circle class="s1" cx="748" cy="66" r="1.8"/>
  <circle class="s2" cx="778" cy="105" r="2.2"/>
  <circle class="s3" cx="22" cy="96" r="1.8"/>
  <circle class="s1" cx="58" cy="138" r="2"/>
  <circle class="s2" cx="105" cy="105" r="1.6"/>
  <circle class="s3" cx="148" cy="155" r="2.3"/>
  <circle class="s1" cx="192" cy="118" r="1.7"/>
  <circle class="s2" cx="238" cy="148" r="2"/>
  <circle class="s3" cx="282" cy="110" r="1.5"/>
  <circle class="s1" cx="322" cy="145" r="2.2"/>
  <circle class="s2" cx="368" cy="118" r="1.8"/>
  <circle class="s3" cx="408" cy="158" r="2.4"/>
  <circle class="s1" cx="452" cy="122" r="1.6"/>
  <circle class="s2" cx="492" cy="168" r="2"/>
  <circle class="s3" cx="535" cy="132" r="1.7"/>
  <circle class="s1" cx="575" cy="175" r="1.5"/>
  <circle class="s2" cx="642" cy="180" r="1.8"/>
  <circle class="s3" cx="690" cy="148" r="2.1"/>
  <circle class="s1" cx="738" cy="185" r="1.6"/>
  <circle class="s2" cx="768" cy="242" r="1.9"/>
  <circle class="s3" cx="35" cy="205" r="2"/>
  <circle class="s1" cx="88" cy="235" r="1.6"/>
  <circle class="s2" cx="142" cy="208" r="2.2"/>
  <circle class="s3" cx="198" cy="248" r="1.8"/>
  <circle class="s1" cx="255" cy="218" r="2"/>
  <circle class="s2" cx="312" cy="258" r="1.6"/>
  <circle class="s3" cx="468" cy="215" r="1.8"/>
  <circle class="s1" cx="512" cy="248" r="2"/>
  <circle class="s2" cx="565" cy="228" r="1.6"/>
  <circle class="s3" cx="610" cy="260" r="1.9"/>
  <circle class="s4" cx="695" cy="268" r="1.6"/>
  <circle class="s2" cx="260" cy="285" r="1.7"/>
  <circle class="s1" cx="120" cy="285" r="1.8"/>
</g>
<g transform="translate(150,80)"><path class="s1" d="M0 -11 L2.5 -2.5 L11 0 L2.5 2.5 L0 11 L-2.5 2.5 L-11 0 L-2.5 -2.5 Z" fill="#FFF6C8"/></g>
<g transform="translate(520,102)"><path class="s2" d="M0 -9 L2 -2 L9 0 L2 2 L0 9 L-2 2 L-9 0 L-2 -2 Z" fill="#FFF6C8"/></g>
<g transform="translate(330,192)"><path class="s3" d="M0 -10 L2.2 -2.2 L10 0 L2.2 2.2 L0 10 L-2.2 2.2 L-10 0 L-2.2 -2.2 Z" fill="#FFF6C8"/></g>
<g transform="translate(70,192)"><path class="s4" d="M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z" fill="#FFF6C8"/></g>
<g transform="translate(702,226)"><path class="s2" d="M0 -8 L1.8 -1.8 L8 0 L1.8 1.8 L0 8 L-1.8 1.8 L-8 0 L-1.8 -1.8 Z" fill="#FFF6C8"/></g>

<!-- Moon with glow -->
<circle cx="625" cy="118" r="96" fill="url(#glow)">
  <animate attributeName="r" values="92;104;92" dur="7s" repeatCount="indefinite"/>
  <animate attributeName="opacity" values="0.7;0.45;0.7" dur="7s" repeatCount="indefinite"/>
</circle>
<circle cx="625" cy="118" r="66" fill="#F7D67C" opacity="0.16"/>
<circle cx="625" cy="118" r="50" fill="url(#moonGrad)"/>
<circle cx="608" cy="104" r="8" fill="#DDB95E" opacity="0.45"/>
<circle cx="640" cy="131" r="6" fill="#DDB95E" opacity="0.4"/>
<circle cx="601" cy="139" r="5" fill="#DDB95E" opacity="0.38"/>
<circle cx="632" cy="98" r="4" fill="#DDB95E" opacity="0.35"/>

<!-- Clouds -->
<g class="cloud" opacity="0.14" fill="#DCE8FF">
  <ellipse cx="190" cy="145" rx="72" ry="16"/>
  <ellipse cx="235" cy="132" rx="48" ry="13"/>
</g>
<g class="cloud2" opacity="0.11" fill="#DCE8FF">
  <ellipse cx="560" cy="205" rx="64" ry="13"/>
  <ellipse cx="600" cy="194" rx="42" ry="11"/>
</g>

<!-- Shooting star : every 4s, first at 0.4s -->
<g opacity="0">
  <line x1="0" y1="0" x2="118" y2="-47" stroke="url(#shootGrad)" stroke-width="3.5" stroke-linecap="round"/>
  <line x1="0" y1="0" x2="78" y2="-31" stroke="#FFFFFF" stroke-width="1.4" stroke-linecap="round" opacity="0.85"/>
  <circle cx="0" cy="0" r="7" fill="#FFFFFF" opacity="0.35"/>
  <circle cx="0" cy="0" r="3.2" fill="#FFFFFF"/>
  <animateTransform attributeName="transform" type="translate" values="735 52; 420 178; 420 178" keyTimes="0;0.22;1" dur="4s" begin="0.4s" repeatCount="indefinite"/>
  <animate attributeName="opacity" values="0;1;0;0" keyTimes="0;0.04;0.22;1" dur="4s" begin="0.4s" repeatCount="indefinite"/>
</g>

<!-- Distant hills -->
<path d="M0 398 Q160 355 320 380 Q480 404 640 376 Q730 360 800 376 L800 600 L0 600 Z" fill="#1E3358"/>
<path d="M0 442 Q200 398 400 424 Q620 450 800 420 L800 600 L0 600 Z" fill="#18304A"/>

<!-- Distant trees -->
<g transform="translate(72,416) scale(0.95)" color="#1B3055"><use href="#pine"/></g>
<g transform="translate(152,430) scale(0.68)" color="#1B3055"><use href="#pine"/></g>
<g transform="translate(682,424) scale(1.02)" color="#1B3055"><use href="#pine"/></g>
<g transform="translate(752,414) scale(0.78)" color="#1B3055"><use href="#pine"/></g>
<g transform="translate(590,432) scale(0.6)" color="#20365C"><use href="#pine"/></g>

<!-- Foreground hill -->
<path d="M0 508 Q180 450 380 460 Q580 470 800 444 L800 600 L0 600 Z" fill="url(#hillGrad)"/>
<path d="M0 540 Q240 505 470 520 Q640 530 800 512 L800 600 L0 600 Z" fill="#0E2D27" opacity="0.75"/>

<!-- Foreground trees -->
<g transform="translate(66,492) scale(1.55)" color="#0D281F"><use href="#pine"/></g>
<g transform="translate(124,502) scale(0.85)" color="#0D281F"><use href="#pine"/></g>
<g transform="translate(736,486) scale(1.35)" color="#0D281F"><use href="#pine"/></g>
<g transform="translate(668,498) scale(0.72)" color="#0D281F"><use href="#pine"/></g>
<!-- Bare tree left -->
<g stroke="#0D281F" stroke-linecap="round" fill="none">
  <path d="M38 500 C40 475 38 455 44 435" stroke-width="5"/>
  <path d="M42 458 C32 448 22 444 14 438 M43 448 C54 440 62 434 70 426 M41 470 C32 464 24 462 16 460" stroke-width="3.5"/>
</g>

<!-- Fox shadow -->
<ellipse cx="405" cy="488" rx="92" ry="13" fill="#03170F" opacity="0.45"/>

<!-- FOX -->
<g id="fox">
  <!-- Bushy tail, swaying -->
  <g>
    <path d="M368 478 C305 492 238 470 224 414 C212 366 238 318 288 312 C330 308 362 338 372 382 C378 410 376 448 368 478 Z" fill="url(#tailGrad)"/>
    <path d="M224 414 C212 366 238 318 288 312 C310 310 328 318 340 332 C310 348 272 362 250 380 C238 390 230 402 224 414 Z" fill="#FFF7E8"/>
    <path d="M250 382 C272 364 308 350 338 334 C330 352 306 368 282 380 C268 387 258 388 250 382 Z" fill="#F3D9A8" opacity="0.7"/>
    <path d="M286 438 C300 420 316 404 332 394" stroke="#A94F16" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.45"/>
    <path d="M262 452 C282 434 302 418 320 410" stroke="#A94F16" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.35"/>
    <animateTransform attributeName="transform" type="rotate" values="-4 368 470; 4 368 470; -4 368 470" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" dur="5.5s" repeatCount="indefinite"/>
  </g>

  <!-- Body -->
  <path d="M350 485 C348 430 355 385 380 360 C400 342 432 345 445 368 C458 390 458 435 452 485 Z" fill="url(#foxGrad)"/>
  <path d="M352 485 C346 448 352 410 368 384 C356 414 356 452 362 485 Z" fill="#A94F16" opacity="0.35"/>
  <!-- Chest -->
  <path d="M392 362 C408 360 422 370 428 390 C434 415 432 452 424 485 L402 485 C394 440 390 395 392 362 Z" fill="#FBEED3"/>
  <path d="M388 372 L398 362 L406 374 L416 363 L422 376 C410 382 396 382 388 372 Z" fill="#FBEED3"/>

  <!-- Legs and paws -->
  <path d="M400 420 L416 420 L416 485 L398 485 Z" fill="#C65F1F"/>
  <rect x="396" y="468" width="22" height="17" rx="7" fill="#3A2113"/>
  <path d="M424 410 L442 410 L444 485 L422 485 Z" fill="#D96E24"/>
  <rect x="419" y="468" width="28" height="17" rx="7" fill="#3A2113"/>
  <path d="M352 474 C372 464 404 467 416 478 C406 489 368 490 352 485 Z" fill="#B85A1B"/>
  <path d="M382 474 C388 472 394 473 398 476" stroke="#3A2113" stroke-width="2.5" stroke-linecap="round" fill="none"/>

  <!-- Head -->
  <path d="M382 308 L392 258 L414 298 Z" fill="#B85A1B"/>
  <path d="M390 300 L396 274 L406 298 Z" fill="#7C3F1D"/>
  <path d="M410 300 L432 250 L452 302 Z" fill="#DB7126"/>
  <path d="M420 292 L432 268 L442 294 Z" fill="#7C3F1D"/>
  <ellipse cx="412" cy="332" rx="40" ry="36" fill="url(#foxGrad)"/>
  <path d="M405 300 L415 285 L422 300 L432 286 L438 302 C425 295 415 295 405 300 Z" fill="#B85A1B"/>
  <path d="M432 345 C445 340 458 344 462 352 C455 365 440 368 432 360 C426 354 426 349 432 345 Z" fill="#FBEED3"/>
  <path d="M438 322 L482 336 L484 348 L446 358 C438 348 436 334 438 322 Z" fill="#FBEED3"/>
  <ellipse cx="482" cy="340" rx="8" ry="6" fill="#2B1A10"/>
  <path d="M462 350 C466 354 471 355 476 354" stroke="#8A4A1D" stroke-width="2" stroke-linecap="round" fill="none"/>
  <ellipse cx="430" cy="328" rx="4" ry="5" fill="#221410">
    <animate attributeName="ry" values="5;5;0.6;5;5" keyTimes="0;0.88;0.93;0.97;1" dur="5s" repeatCount="indefinite"/>
  </ellipse>
  <circle cx="431.5" cy="326" r="1.2" fill="#FFF3D6" opacity="0.9"/>
  <path d="M414 318 C420 315 426 315 431 317" stroke="#7C3F1D" stroke-width="2.2" stroke-linecap="round" fill="none"/>
  <circle cx="445" cy="318" r="7" fill="#F08A3C" opacity="0.45"/>
</g>

<!-- Grass tufts -->
<g stroke="#2A6B4F" stroke-width="3" stroke-linecap="round" fill="none">
  <path d="M132 528 Q136 512 141 528 M142 529 Q147 514 152 529"/>
  <path d="M545 532 Q550 518 555 532 M556 533 Q561 520 566 533"/>
  <path d="M620 520 Q624 508 629 520 M630 521 Q635 510 640 521"/>
  <path d="M210 548 Q215 534 220 548 M221 549 Q226 536 231 549"/>
  <path d="M305 552 Q310 538 315 552 M316 553 Q321 540 326 553"/>
</g>
<g fill="#FBEED3" opacity="0.85">
  <circle cx="180" cy="545" r="2.5"/><circle cx="500" cy="548" r="2.5"/><circle cx="590" cy="560" r="2.2"/><circle cx="260" cy="565" r="2.2"/>
</g>

<!-- Fireflies -->
<g transform="translate(200,505)"><circle class="ff" r="3.2" fill="#DFF07A"/></g>
<g transform="translate(585,512)"><circle class="ff ff2" r="2.8" fill="#DFF07A"/></g>
<g transform="translate(485,540)"><circle class="ff ff3" r="2.5" fill="#DFF07A"/></g>

<rect x="0" y="0" width="800" height="600" fill="url(#vignette)" pointer-events="none"/>
</svg>

Reasoning trace (8,133 tokens)

Generating a standalone SVG with hand-written shapes, gradients, and looping SMIL animations for fox, stars, and shooting star.Finalizing SVG layout with gradients, shapes, and SMIL animations within the single fenced code block constraint.Defining SVG gradients, SMIL and CSS animations, and fox geometry within the single code block constraint.Extending SVG paths for fox anatomy, tail, hills, and pine silhouettes while reusing symbols.Adding SMIL animations for tail sway and shooting star plus CSS twinkles and fireflies.Refining SMIL timing for tail sway, moon pulse, eye blink, and shooting star visibility.Adding star field generation, gradient definitions, and fox geometry details to the SVG.Extending SVG with fox head, ear, tail details and SMIL blink animation.Adding CSS animations for stars, clouds, and fireflies with wrapper groups to avoid transform conflicts.