Muse Ember

by MetaReasoningClean

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

How it went

Total time: 30.3 s
Cost: $0.0073
Output tokens: 14,574
Spent thinking: 8,988 tokens
Speed: 516 tok/s
Console errors: 0

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

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" style="max-width:100%;height:auto;display:block" role="img" aria-labelledby="title desc">
  <title id="title">Fox sitting on a hill looking at the moon</title>
  <desc id="desc">A hand-drawn fox with pointy ears, a pointed snout and a bushy white-tipped tail sits on a grassy hill at night, looking up at a glowing full moon among 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="#050818"/>
      <stop offset="0.45" stop-color="#101f42"/>
      <stop offset="0.78" stop-color="#1f3f62"/>
      <stop offset="1" stop-color="#2b5570"/>
    </linearGradient>

    <radialGradient id="moonGrad" cx="0.38" cy="0.35" r="0.75">
      <stop offset="0" stop-color="#fffdf0"/>
      <stop offset="0.7" stop-color="#fdf0b8"/>
      <stop offset="1" stop-color="#f3d97a"/>
    </radialGradient>

    <radialGradient id="moonGlow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#fff6bf" stop-opacity="0.85"/>
      <stop offset="0.55" stop-color="#f9e08a" stop-opacity="0.38"/>
      <stop offset="1" stop-color="#f9e08a" stop-opacity="0"/>
    </radialGradient>

    <linearGradient id="farHillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2a4d73"/>
      <stop offset="1" stop-color="#1d3758"/>
    </linearGradient>

    <linearGradient id="midHillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#23466a"/>
      <stop offset="1" stop-color="#162f4a"/>
    </linearGradient>

    <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#1d443e"/>
      <stop offset="1" stop-color="#0c211e"/>
    </linearGradient>

    <linearGradient id="foxGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f5a65b"/>
      <stop offset="0.55" stop-color="#e67e22"/>
      <stop offset="1" stop-color="#c75f18"/>
    </linearGradient>

    <linearGradient id="tailGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f39c4a"/>
      <stop offset="1" stop-color="#d96f1e"/>
    </linearGradient>

    <linearGradient id="shootGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
    </linearGradient>

    <g id="pine">
      <rect x="-3" y="-12" width="6" height="14" fill="#0a1a2a"/>
      <path d="M0 -62 L16 -28 H-16 Z" fill="#0d2438"/>
      <path d="M0 -48 L22 -12 H-22 Z" fill="#112d45"/>
      <path d="M0 -32 L28 4 H-28 Z" fill="#0d2438"/>
    </g>

    <g id="grass">
      <path d="M0 0 L-6 -18 L-2 -2 L2 -20 L5 -2 L10 -15 L8 0 Z" fill="#1a4a3a"/>
    </g>
  </defs>

  <style>
    .s1 { animation: twinkle 2.6s ease-in-out -0.4s infinite; }
    .s2 { animation: twinkle 3.4s ease-in-out -1.3s infinite; }
    .s3 { animation: twinkle 4.1s ease-in-out -2.0s infinite; }
    .s4 { animation: twinkle 2.1s ease-in-out -0.9s infinite; }
    @keyframes twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

    .glow { animation: glowPulse 6s ease-in-out infinite; }
    @keyframes glowPulse { 0%,100% { opacity: .72; } 50% { opacity: 1; } }

    .cloud { animation: drift 18s ease-in-out infinite alternate; }
    @keyframes drift { from { transform: translateX(-18px); } to { transform: translateX(22px); } }

    .shoot {
      opacity: 0;
      animation: shoot 4s linear infinite;
    }
    @keyframes shoot {
      0%   { transform: translate(690px, 68px); opacity: 0; }
      3%   { opacity: 1; }
      16%  { transform: translate(262px, 278px); opacity: 0; }
      100% { transform: translate(262px, 278px); opacity: 0; }
    }
  </style>

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

  <!-- Stars -->
  <g fill="#ffffff">
    <circle class="star s1" cx="35" cy="45" r="2"/>
    <circle class="star s2" cx="90" cy="30" r="1.6"/>
    <circle cx="150" cy="70" r="2" opacity="0.8"/>
    <circle class="star s3" cx="210" cy="40" r="1.5"/>
    <circle class="star s4" cx="260" cy="90" r="2.2"/>
    <circle cx="310" cy="35" r="1.4" opacity="0.7"/>
    <circle class="star s2" cx="360" cy="75" r="1.8"/>
    <circle class="star s1" cx="420" cy="45" r="2.4"/>
    <circle cx="480" cy="80" r="1.5" opacity="0.8"/>
    <circle class="star s3" cx="530" cy="30" r="1.9"/>
    <circle class="star s4" cx="580" cy="60" r="1.4"/>
    <circle cx="720" cy="60" r="2" opacity="0.85"/>
    <circle class="star s2" cx="760" cy="140" r="1.6"/>
    <circle class="star s1" cx="90" cy="130" r="1.7"/>
    <circle cx="180" cy="150" r="1.4" opacity="0.7"/>
    <circle class="star s3" cx="250" cy="130" r="2"/>
    <circle class="star s4" cx="330" cy="140" r="1.5"/>
    <circle cx="410" cy="120" r="2.1" opacity="0.9"/>
    <circle class="star s2" cx="500" cy="150" r="1.6"/>
    <circle class="star s1" cx="570" cy="130" r="1.8"/>
    <circle class="star s3" cx="50" cy="200" r="1.8"/>
    <circle cx="140" cy="210" r="1.5" opacity="0.75"/>
    <circle class="star s4" cx="230" cy="190" r="2"/>
    <circle cx="380" cy="200" r="1.4" opacity="0.7"/>
    <circle class="star s2" cx="460" cy="210" r="1.9"/>
    <circle class="star s1" cx="540" cy="190" r="1.5"/>
    <circle cx="610" cy="180" r="2.2" opacity="0.85"/>
    <circle class="star s3" cx="700" cy="230" r="1.6"/>
    <circle cx="770" cy="260" r="1.9" opacity="0.8"/>
    <circle class="star s4" cx="30" cy="280" r="1.5"/>
    <circle class="star s2" cx="120" cy="260" r="1.7"/>
    <circle cx="290" cy="240" r="1.4" opacity="0.7"/>
    <circle class="star s1" cx="350" cy="260" r="1.8"/>
    <circle class="star s3" cx="650" cy="270" r="1.5"/>
    <circle cx="730" cy="300" r="1.6" opacity="0.75"/>
    <circle class="star s2" cx="20" cy="360" r="1.5"/>
    <circle class="star s4" cx="780" cy="340" r="1.7"/>
  </g>
  <g fill="#fffbe6">
    <path class="star s2" d="M180 84 L183 94 L193 97 L183 100 L180 110 L177 100 L167 97 L177 94 Z"/>
    <path class="star s1" d="M520 84 L523 94 L533 97 L523 100 L520 110 L517 100 L507 97 L517 94 Z"/>
    <path class="star s3" d="M320 168 L322 176 L330 178 L322 180 L320 188 L318 180 L310 178 L318 176 Z"/>
    <path class="star s4" d="M680 34 L682 41 L689 43 L682 45 L680 52 L678 45 L671 43 L678 41 Z"/>
    <path class="star s1" d="M70 320 L72 327 L79 329 L72 331 L70 338 L68 331 L61 329 L68 327 Z" opacity="0.8"/>
  </g>

  <!-- Wispy clouds -->
  <g class="cloud" fill="#dbeafe" opacity="0.16">
    <ellipse cx="180" cy="108" rx="62" ry="13"/>
    <ellipse cx="225" cy="98" rx="42" ry="10"/>
    <ellipse cx="520" cy="235" rx="70" ry="12"/>
  </g>

  <!-- Moon with soft glow -->
  <circle class="glow" cx="630" cy="118" r="100" fill="url(#moonGlow)"/>
  <circle cx="630" cy="118" r="52" fill="url(#moonGrad)" stroke="#f5d76e" stroke-width="1.5"/>
  <g fill="#d8b95e" opacity="0.22">
    <circle cx="612" cy="102" r="9"/>
    <circle cx="645" cy="128" r="12"/>
    <circle cx="622" cy="140" r="6"/>
    <circle cx="648" cy="98" r="5"/>
    <circle cx="606" cy="124" r="4"/>
  </g>
  <path d="M 596 92 A 52 52 0 0 1 662 92 A 60 60 0 0 0 596 92 Z" fill="#ffffff" opacity="0.35"/>

  <!-- Shooting star: every 4s, first strike immediately -->
  <g class="shoot">
    <line x1="0" y1="0" x2="88" y2="-44" stroke="url(#shootGrad)" stroke-width="3.5" stroke-linecap="round"/>
    <line x1="0" y1="0" x2="48" y2="-24" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round" opacity="0.9"/>
    <circle cx="0" cy="0" r="4.5" fill="#ffffff"/>
    <circle cx="0" cy="0" r="9" fill="#fff6bf" opacity="0.45"/>
  </g>

  <!-- Distant hills -->
  <path d="M0 390 Q120 340 260 365 T520 350 T800 375 V600 H0 Z" fill="url(#farHillGrad)" opacity="0.92"/>
  <path d="M0 445 Q160 395 340 425 T800 430 V600 H0 Z" fill="url(#midHillGrad)"/>

  <!-- Distant pine trees -->
  <use href="#pine" transform="translate(72 418) scale(0.62)"/>
  <use href="#pine" transform="translate(148 428) scale(0.5)"/>
  <use href="#pine" transform="translate(205 420) scale(0.58)"/>
  <use href="#pine" transform="translate(598 408) scale(0.55)"/>
  <use href="#pine" transform="translate(655 425) scale(0.72)"/>
  <use href="#pine" transform="translate(718 415) scale(0.6)"/>
  <use href="#pine" transform="translate(42 385) scale(0.45)"/>
  <use href="#pine" transform="translate(760 380) scale(0.48)"/>

  <!-- Main hill -->
  <path d="M0 490 Q190 445 380 468 T800 480 V600 H0 Z" fill="url(#hillGrad)"/>
  <path d="M0 490 Q190 445 380 468 T800 480" fill="none" stroke="#2a5a4a" stroke-width="2" opacity="0.55"/>

  <!-- Framing foreground trees -->
  <use href="#pine" transform="translate(24 545) scale(1.9)"/>
  <use href="#pine" transform="translate(785 550) scale(1.7)"/>
  <use href="#pine" transform="translate(122 505) scale(1.05)"/>
  <use href="#pine" transform="translate(695 508) scale(1.15)"/>

  <!-- ===== FOX ===== -->
  <ellipse cx="395" cy="552" rx="126" ry="16" fill="#06121c" opacity="0.38"/>

  <g>
    <animateTransform attributeName="transform" type="translate" values="0 0; 0 -3; 0 0" dur="4s" repeatCount="indefinite"/>

    <!-- Bushy tail, swaying gently -->
    <g>
      <animateTransform attributeName="transform" type="rotate" values="-3 360 470; 3 360 470; -3 360 470" dur="5s" repeatCount="indefinite"/>
      <path d="M368 448 C300 428 232 442 224 484 C216 526 272 556 352 558 C418 560 472 540 478 508 C482 485 458 468 412 462 C392 459 378 455 368 448 Z"
            fill="url(#tailGrad)" stroke="#7c3f12" stroke-width="2.5" stroke-linejoin="round"/>
      <path d="M428 464 C455 468 475 482 478 504 C480 526 458 542 428 548 C444 520 446 490 428 464 Z"
            fill="#fdf3e3" stroke="#d9c7a5" stroke-width="1.5" stroke-linejoin="round"/>
      <path d="M280 470 Q265 495 285 520" fill="none" stroke="#b85c14" stroke-width="2.5" stroke-linecap="round" opacity="0.55"/>
      <path d="M320 460 Q305 495 330 530" fill="none" stroke="#b85c14" stroke-width="2.5" stroke-linecap="round" opacity="0.45"/>
      <path d="M250 485 Q270 505 305 515" fill="none" stroke="#b85c14" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
    </g>

    <!-- Body -->
    <path d="M378 368 C350 398 338 448 348 495 C355 528 380 545 412 543 C445 540 462 515 458 475 C455 435 438 398 410 378 C400 370 388 364 378 368 Z"
          fill="url(#foxGrad)" stroke="#7c3f12" stroke-width="2.5" stroke-linejoin="round"/>
    <path d="M352 475 C375 455 415 458 430 485 C442 510 425 535 395 538 C365 540 345 515 352 475 Z" fill="#d96f1e" opacity="0.9"/>
    <path d="M400 382 C424 400 436 435 432 478 C430 505 420 525 405 532 C390 505 388 430 400 382 Z" fill="#fdebd0"/>

    <!-- Front legs and paws -->
    <path d="M398 445 L412 447 L414 525 L400 526 Z" fill="#cf671d" stroke="#7c3f12" stroke-width="1.5" stroke-linejoin="round"/>
    <ellipse cx="407" cy="529" rx="12" ry="6" fill="#f2d7b0" stroke="#7c3f12" stroke-width="1.2"/>
    <path d="M418 440 L438 442 L440 528 L418 530 Z" fill="#e67e22" stroke="#7c3f12" stroke-width="1.8" stroke-linejoin="round"/>
    <ellipse cx="429" cy="533" rx="16" ry="8" fill="#fdebd0" stroke="#7c3f12" stroke-width="1.5"/>
    <path d="M423 528 L423 538 M433 528 L433 538" stroke="#7c3f12" stroke-width="1.3" stroke-linecap="round"/>

    <!-- Neck fur tuft -->
    <path d="M385 368 L395 386 L405 368 L415 386 L425 370 L430 384 L420 366 Z" fill="#fdebd0"/>

    <!-- Head -->
    <!-- Far ear -->
    <path d="M372 300 L360 238 L402 272 Z" fill="#d96f1e" stroke="#7c3f12" stroke-width="2.5" stroke-linejoin="round"/>
    <path d="M376 284 L370 256 L392 274 Z" fill="#7a3b12"/>
    <!-- Near ear, with a subtle twitch -->
    <g>
      <animateTransform attributeName="transform" type="rotate" values="0 430 275; 0 430 275; 5 430 275; 0 430 275" keyTimes="0; 0.8; 0.86; 1" dur="6s" repeatCount="indefinite"/>
      <path d="M408 288 L428 226 L454 280 Z" fill="#e67e22" stroke="#7c3f12" stroke-width="2.5" stroke-linejoin="round"/>
      <path d="M422 272 L430 246 L442 270 Z" fill="#7a3b12"/>
    </g>

    <!-- Face -->
    <path d="M368 318 C366 292 386 276 412 280 C436 283 452 298 458 318 C472 326 484 336 480 346 C476 356 460 362 442 360 C420 372 386 370 374 350 C368 340 367 330 368 318 Z"
          fill="url(#foxGrad)" stroke="#7c3f12" stroke-width="2.5" stroke-linejoin="round"/>
    <path d="M374 348 C386 366 412 370 432 360 C445 354 455 348 462 342 C458 356 440 368 420 370 C398 372 380 364 374 348 Z" fill="#fdebd0"/>
    <path d="M380 345 L392 356 L402 347" fill="none" stroke="#d9a05b" stroke-width="1.5" stroke-linecap="round"/>

    <!-- Eye looking up at the moon -->
    <path d="M420 305 Q432 300 445 305" fill="none" stroke="#7c3f12" stroke-width="2" stroke-linecap="round"/>
    <path d="M422 316 Q432 308 443 315 Q433 322 422 316 Z" fill="#201205"/>
    <circle cx="435" cy="313" r="2" fill="#ffffff"/>

    <!-- Nose, mouth, whiskers -->
    <ellipse cx="474" cy="340" rx="9" ry="6" transform="rotate(-20 474 340)" fill="#1a0f08"/>
    <path d="M462 352 Q452 358 442 356" fill="none" stroke="#5c2e0e" stroke-width="2" stroke-linecap="round"/>
    <path d="M460 345 L488 338 M458 350 L484 352" stroke="#ffffff" stroke-width="1" stroke-linecap="round" opacity="0.6"/>
  </g>

  <!-- Grass, rocks and fireflies on the hill -->
  <use href="#grass" transform="translate(285 545) scale(1.2)"/>
  <use href="#grass" transform="translate(315 555)"/>
  <use href="#grass" transform="translate(520 548) scale(1.1)"/>
  <use href="#grass" transform="translate(560 560) scale(0.9)"/>
  <use href="#grass" transform="translate(210 560) scale(0.9)"/>
  <use href="#grass" transform="translate(610 545)"/>
  <ellipse cx="265" cy="555" rx="14" ry="5" fill="#2a3d33"/>
  <ellipse cx="545" cy="560" rx="18" ry="6" fill="#2a3d33"/>
  <g fill="#d9f99d">
    <circle class="star s2" cx="272" cy="500" r="2.5"/>
    <circle class="star s3" cx="525" cy="490" r="2.2"/>
    <circle class="star s1" cx="585" cy="530" r="2.4"/>
    <circle class="star s4" cx="205" cy="540" r="2"/>
  </g>
</svg>

Reasoning trace (8,988 tokens)

Generating a standalone SVG with SMIL animations and hand-written shapes under strict output and timing constraints.Finalizing SVG layout and SMIL star twinkle animations within the self-contained file constraint.Defining fox geometry and tail sway transform while adding gradients, ear and snout details, and SMIL opacity timing.Switching tail sway to SMIL animateTransform for reliability and using CSS classes for star twinkling durations.Defining CSS keyframes and transform origins for tail sway, moon glow, breathing, twinkling, and shooting star animations.Extending SVG path definitions for body, head, ears, and paws with fur and shading details.Adding pine tree definitions, hill layers, stars, and moon with gradients and animations.Adding responsive viewBox sizing, accessibility labels, and SMIL animations for tail and moon glow.Extending animation details with SMIL ear twitch and refined tail and body path coordinates.Adding head, ear, snout, and facial detail paths with layered fills and stroke contrast.