Muse Ember

by MetaReasoningClean

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

How it went

Total time: 6.9 s
Cost: $0.0020
Output tokens: 3,809
Spent thinking: 240 tokens
Speed: 683.7 tok/s
Console errors: 0

First token after: 1.3 s
First visible text after: 1.3 s
Prompt tokens: 540
Code size: 9.0 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"minimal"}
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 · 166 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 a bushy white-tipped tail sits on a grassy hill under a starry night sky, gazing at a glowing full moon.</desc>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0b1026"/>
      <stop offset="45%" stop-color="#1b2a4a"/>
      <stop offset="75%" stop-color="#2e4a6b"/>
      <stop offset="100%" stop-color="#3d6a7a"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff8c9" stop-opacity="0.95"/>
      <stop offset="35%" stop-color="#f9e79f" stop-opacity="0.55"/>
      <stop offset="70%" stop-color="#f9e79f" stop-opacity="0.18"/>
      <stop offset="100%" stop-color="#f9e79f" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="moonFace" cx="38%" cy="35%" r="75%">
      <stop offset="0%" stop-color="#fffbe6"/>
      <stop offset="70%" stop-color="#f7e8a0"/>
      <stop offset="100%" stop-color="#e6c96a"/>
    </radialGradient>
    <linearGradient id="hillGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#2f6b4f"/>
      <stop offset="100%" stop-color="#122e2a"/>
    </linearGradient>
    <linearGradient id="foxGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#f08a3c"/>
      <stop offset="100%" stop-color="#c75b1e"/>
    </linearGradient>
    <linearGradient id="shootGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="100%" stop-color="#ffffff"/>
    </linearGradient>
    <style>
      .s{animation:tw 2.6s ease-in-out infinite alternate}
      .s2{animation:tw 3.4s ease-in-out infinite alternate}
      .s3{animation:tw 1.9s ease-in-out infinite alternate}
      @keyframes tw{0%{opacity:.25}50%{opacity:1}100%{opacity:.45}}
      .tail{transform-origin:348px 432px;animation:sway 3.6s ease-in-out infinite alternate}
      @keyframes sway{from{transform:rotate(-3.5deg)}to{transform:rotate(4.5deg)}}
      .breath{transform-origin:400px 460px;animation:breath 4s ease-in-out infinite alternate}
      @keyframes breath{from{transform:scaleY(1)}to{transform:scaleY(1.015)}}
      .ear{animation:earTwitch 5s ease-in-out infinite}
      @keyframes earTwitch{0%,88%,100%{transform:rotate(0deg)}92%{transform:rotate(-4deg)}96%{transform:rotate(2deg)}}
    </style>
  </defs>

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

  <!-- Moon glow and moon -->
  <circle cx="622" cy="128" r="118" fill="url(#moonGlow)"/>
  <circle cx="622" cy="128" r="52" fill="url(#moonFace)"/>
  <circle cx="602" cy="112" r="10" fill="#e0c06a" opacity="0.35"/>
  <circle cx="638" cy="142" r="14" fill="#e0c06a" opacity="0.28"/>
  <circle cx="626" cy="102" r="6" fill="#e0c06a" opacity="0.3"/>
  <circle cx="608" cy="150" r="6" fill="#d9b95e" opacity="0.25"/>

  <!-- Stars -->
  <g fill="#ffffff">
    <circle class="s" cx="40" cy="60" r="2.2"/><circle class="s2" cx="110" cy="32" r="1.6"/><circle class="s" cx="180" cy="82" r="2"/>
    <circle class="s3" cx="240" cy="40" r="1.5"/><circle class="s" cx="310" cy="95" r="2.3"/><circle class="s2" cx="370" cy="38" r="1.7"/>
    <circle class="s3" cx="430" cy="78" r="2"/><circle class="s" cx="490" cy="30" r="1.5"/><circle class="s2" cx="545" cy="58" r="2.1"/>
    <circle class="s" cx="710" cy="48" r="2"/><circle class="s3" cx="765" cy="92" r="1.6"/><circle class="s2" cx="735" cy="180" r="1.8"/>
    <circle class="s" cx="680" cy="210" r="1.4"/><circle class="s3" cx="90" cy="140" r="1.7"/><circle class="s2" cx="150" cy="180" r="1.4"/>
    <circle class="s" cx="260" cy="150" r="1.8"/><circle class="s3" cx="330" cy="175" r="1.3"/><circle class="s2" cx="460" cy="140" r="1.7"/>
    <circle class="s" cx="520" cy="190" r="1.3"/><circle class="s3" cx="60" cy="220" r="1.4"/><circle class="s2" cx="200" cy="240" r="1.2"/>
    <circle class="s" cx="750" cy="260" r="1.3"/><circle class="s3" cx="30" cy="300" r="1.2"/>
  </g>
  <!-- star sparkles -->
  <g stroke="#fff8c9" stroke-width="1.4" stroke-linecap="round" opacity="0.9">
    <g class="s"><path d="M140 110v14M133 117h14"/></g>
    <g class="s2"><path d="M410 110v12M404 116h12"/></g>
    <g class="s3"><path d="M705 125v16M697 133h16"/></g>
  </g>

  <!-- Shooting star: every 4s, first at 0.6s -->
  <g>
    <path d="M -40 -20 L 45 0 L -40 20 Z" fill="url(#shootGrad)" opacity="0.9" transform="rotate(28) translate(0 0)"/>
    <circle r="3.2" fill="#fff"/>
    <animateMotion dur="4s" begin="0.6s" repeatCount="indefinite" path="M 720 45 L 280 215" keyPoints="0;1" keyTimes="0;0.18" calcMode="linear"/>
    <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;0.03;0.12;0.18;1" dur="4s" begin="0.6s" repeatCount="indefinite"/>
  </g>
  <g>
    <path d="M -30 -14 L 34 0 L -30 14 Z" fill="url(#shootGrad)" opacity="0.7"/>
    <circle r="2.4" fill="#fff"/>
    <animateMotion dur="4s" begin="0.6s" repeatCount="indefinite" path="M 760 170 L 420 300" keyPoints="0;1" keyTimes="0;0.18" calcMode="linear"/>
    <animate attributeName="opacity" values="0;1;0;0" keyTimes="0;0.03;0.18;1" dur="4s" begin="0.6s" repeatCount="indefinite"/>
  </g>

  <!-- Distant hills -->
  <path d="M0 380 Q160 300 340 355 T800 340 L800 600 L0 600 Z" fill="#1e3a4a" opacity="0.9"/>
  <path d="M0 420 Q200 350 420 405 T800 395 L800 600 L0 600 Z" fill="#274d4a"/>

  <!-- Background trees -->
  <g fill="#142e33">
    <path d="M70 430 L92 350 L114 430 Z"/><rect x="87" y="425" width="10" height="35"/>
    <path d="M115 435 L135 365 L155 435 Z"/>
    <path d="M685 425 L705 345 L725 425 Z"/><rect x="700" y="420" width="9" height="35"/>
    <path d="M650 435 L668 370 L686 435 Z"/>
    <path d="M730 432 L748 368 L766 432 Z"/>
  </g>

  <!-- Main hill -->
  <path d="M0 460 Q260 400 480 440 Q650 470 800 450 L800 600 L0 600 Z" fill="url(#hillGrad)"/>
  <path d="M0 485 Q300 440 560 475 Q700 495 800 485 L800 600 L0 600 Z" fill="#0f2a26"/>

  <!-- Grass tufts & flowers -->
  <g stroke="#3f9a6b" stroke-width="2.2" stroke-linecap="round" fill="none">
    <path d="M120 500 q3-16 8-20 M126 500 q0-16-4-22 M132 500 q5-14 10-16"/>
    <path d="M600 520 q3-16 8-20 M606 520 q0-16-4-22"/>
    <path d="M240 540 q3-14 8-18 M246 540 q0-14-4-20"/>
    <path d="M680 500 q3-14 8-18 M686 500 q0-14-4-20"/>
  </g>
  <g fill="#f9e79f"><circle cx="180" cy="520" r="3"/><circle cx="550" cy="540" r="3"/><circle cx="320" cy="555" r="2.5"/></g>
  <g fill="#ffffff" opacity="0.85"><circle cx="185" cy="515" r="1.6"/><circle cx="555" cy="535" r="1.6"/></g>

  <!-- FOX -->
  <g class="breath">
    <!-- Tail (behind body) -->
    <g class="tail">
      <path d="M355 435 Q260 460 235 410 Q215 365 265 340 Q315 315 355 365 Q375 400 355 435Z" fill="#c75b1e"/>
      <path d="M265 340 Q315 315 355 365 Q375 400 355 435 Q300 430 270 400 Q240 370 265 340Z" fill="url(#foxGrad)"/>
      <path d="M235 410 Q215 365 265 340 Q275 375 260 395 Q245 410 235 410Z" fill="#fff5e6"/>
      <path d="M250 355 Q230 380 242 405 Q255 395 258 375Z" fill="#ffffff"/>
    </g>

    <!-- Body sitting -->
    <path d="M340 480 Q330 400 370 370 Q410 345 455 375 Q485 405 480 480 Q410 505 340 480Z" fill="url(#foxGrad)"/>
    <!-- Chest -->
    <path d="M395 385 Q425 405 428 450 Q425 485 400 495 Q380 460 385 415 Q388 395 395 385Z" fill="#fff1dc"/>
    <!-- Front leg -->
    <path d="M430 430 L435 495 L455 495 L455 425 Z" fill="#a84a16"/>
    <ellipse cx="445" cy="498" rx="16" ry="6" fill="#5c2d12"/>
    <!-- Hind paw -->
    <ellipse cx="365" cy="495" rx="22" ry="8" fill="#8a3d14"/>
    <ellipse cx="368" cy="492" rx="18" ry="5" fill="#5c2d12"/>

    <!-- Head -->
    <g>
      <!-- Ears -->
      <g class="ear" style="transform-origin:420px 320px">
        <path d="M390 335 L375 275 L425 305 Z" fill="#c75b1e"/>
        <path d="M392 322 L385 290 L410 305 Z" fill="#7a3410"/>
      </g>
      <path d="M440 315 L455 260 L485 300 Z" fill="#c75b1e"/>
      <path d="M452 300 L460 275 L475 295 Z" fill="#7a3410"/>
      <!-- Head shape -->
      <ellipse cx="428" cy="345" rx="52" ry="42" fill="url(#foxGrad)"/>
      <!-- Cheek fur -->
      <path d="M385 360 L405 385 L425 360 L445 385 L465 360 Q450 390 428 390 Q405 390 385 360Z" fill="#fff1dc"/>
      <!-- Snout pointing up-right toward moon -->
      <path d="M460 330 Q505 335 515 355 Q508 375 470 372 Q455 360 460 330Z" fill="#fff1dc"/>
      <ellipse cx="512" cy="355" rx="9" ry="7" fill="#2b1a12"/>
      <circle cx="515" cy="352" r="2.5" fill="#ffffff" opacity="0.7"/>
      <path d="M505 365 Q495 372 485 368" stroke="#2b1a12" stroke-width="1.6" fill="none" stroke-linecap="round"/>
      <!-- Eye looking up -->
      <ellipse cx="452" cy="340" rx="6" ry="7.5" fill="#1a120a"/>
      <circle cx="454" cy="337" r="2.2" fill="#fff"/>
      <path d="M442 328 Q452 324 462 328" stroke="#7a3410" stroke-width="2.5" fill="none" stroke-linecap="round"/>
    </g>
  </g>

  <!-- Soft foreground vignette -->
  <rect width="800" height="600" fill="none" stroke="#0b1026" stroke-width="0"/>
</svg>