BABYMONSTER — MOON

A soft crescent moon cradling a tiny star on a navy night sky. The moon breathes gently, the star twinkles, and a sky-blue glow pulses around the scene — a calm celestial study inspired by a trending music mood.

You’ll learn

• Drawing a crescent moon from a single path with an inner curve
• Adding subtle craters with low-opacity circles
• Layering a glow ring behind a central shape
• Timing slow breathing and twinkling loops so the night feels calm

1. 1

   Paint the night sky

   Start with a deep navy rounded square and a few tiny distant stars. The background is dark so the cream moon will read clearly against it.

   index.html

   copy code

   <svg class="bm" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Deep night sky stage">
     <rect x="0" y="0" width="200" height="200" rx="18" fill="#2B3A55" stroke="none"/>
     <circle cx="42" cy="48" r="2" fill="#FFFDF7" opacity="0.7"/>
     <circle cx="168" cy="54" r="2.2" fill="#FFFDF7" opacity="0.55"/>
     <circle cx="152" cy="152" r="1.8" fill="#FFFDF7" opacity="0.65"/>
     <circle cx="36" cy="142" r="1.6" fill="#FFFDF7" opacity="0.5"/>
   </svg>
   

   a quiet night, a few stars, waiting for the moon.

2. 2

   Shape the crescent moon

   The crescent is one path: an outer arc for the moon and an inner arc that cuts away the dark side. Fill it cream and outline it with thick navy ink so it pops off the sky.

   index.html

   copy code

   <g class="bm-moon" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
     <path d="M100 46 C134 46 154 74 154 102 C154 134 130 158 100 158 C78 158 62 144 62 144 C90 144 110 122 110 96 C110 70 90 52 62 52 C62 52 78 46 100 46 Z"/>
   </g>
   

   one cream crescent, already glowing against the navy.

3. 3

   Add craters, star, and glow

   Add tiny low-opacity craters on the moon, a four-pointed sunshine star tucked in the crescent, and a soft sky-blue glow ring behind everything. These details turn a simple moon into a small scene.

   index.html

   copy code

   <!-- craters -->
   <circle cx="128" cy="92" r="4" fill="#2B3A55" opacity="0.12" stroke="none"/>
   <circle cx="118" cy="122" r="3" fill="#2B3A55" opacity="0.1" stroke="none"/>
   <circle cx="138" cy="114" r="2" fill="#2B3A55" opacity="0.1" stroke="none"/>
   
   <!-- star -->
   <g class="bm-star" fill="#FFD84D" stroke="#2B3A55" stroke-width="2.2" stroke-linejoin="round">
     <path d="M138 72 L141 81 L138 90 L135 81 Z"/>
     <circle cx="140" cy="78" r="1.6" fill="#FFFDF7" stroke="none"/>
   </g>
   
   <!-- glow ring -->
   <circle class="bm-glow" cx="100" cy="102" r="62" fill="none" stroke="#6FA8FF" stroke-width="2" opacity="0.18"/>
   

   craters, a cradled star, and a soft moon glow.

4. 4

   Make it breathe and twinkle

   The moon scales gently in place, the star twinkles with scale and opacity, and the glow ring pulses. Slow durations keep the night scene calm instead of flashy.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .bm .bm-moon { transform-box: fill-box; transform-origin: center; animation: bm-breathe 4s ease-in-out infinite; }
     .bm .bm-star { transform-box: fill-box; transform-origin: center; animation: bm-twinkle 2.4s ease-in-out infinite; }
     .bm .bm-glow { animation: bm-pulse 4s ease-in-out infinite; }
   }
   @keyframes bm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
   @keyframes bm-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.12); } }
   @keyframes bm-pulse { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.22; } }
   

   a gentle moon, a twinkling star, a calm night.

Skipped straight to the end? Welcome. Copy the whole thing, download it, or open it in the Playground to start remixing.

<svg class="bm" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A crescent moon gently glowing while cradling a twinkling star">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#2B3A55" stroke="none"/>
  <circle cx="42" cy="48" r="2" fill="#FFFDF7" opacity="0.7"/>
  <circle cx="168" cy="54" r="2.2" fill="#FFFDF7" opacity="0.55"/>
  <circle cx="152" cy="152" r="1.8" fill="#FFFDF7" opacity="0.65"/>
  <circle cx="36" cy="142" r="1.6" fill="#FFFDF7" opacity="0.5"/>
  <g class="bm-moon" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
    <path d="M100 46 C134 46 154 74 154 102 C154 134 130 158 100 158 C78 158 62 144 62 144 C90 144 110 122 110 96 C110 70 90 52 62 52 C62 52 78 46 100 46 Z"/>
    <circle cx="128" cy="92" r="4" fill="#2B3A55" opacity="0.12" stroke="none"/>
    <circle cx="118" cy="122" r="3" fill="#2B3A55" opacity="0.1" stroke="none"/>
    <circle cx="138" cy="114" r="2" fill="#2B3A55" opacity="0.1" stroke="none"/>
  </g>
  <g class="bm-star" fill="#FFD84D" stroke="#2B3A55" stroke-width="2.2" stroke-linejoin="round">
    <path d="M138 72 L141 81 L138 90 L135 81 Z"/>
    <circle cx="140" cy="78" r="1.6" fill="#FFFDF7" stroke="none"/>
  </g>
  <circle class="bm-glow" cx="100" cy="102" r="62" fill="none" stroke="#6FA8FF" stroke-width="2" opacity="0.18"/>
</svg>

• Add more starseasy

  Scatter five more tiny stars and stagger their twinkle delays.

• Phase the moonmedium

  Animate the inner curve path over time so the crescent appears to wax and wane.

• Make a night sky backgroundmedium

  Add a few constellations with dashed lines connecting the distant stars.