UI: Components

Moon Phase

Simple CSS-only web component that adds a dynamic mask to an image of the moon, based on attributes illumination, phase and — optional — mask-color.

Example: Phase cycle
<moon-phase illumination="12" phase="waxing crescent">

• New Moon
  0% illuminated
• Waxing Crescent
  6% illuminated
• Waxing Crescent
  12% illuminated
• Waxing Crescent
  18% illuminated
• Waxing Crescent
  23% illuminated
• Waxing Crescent
  29% illuminated
• Waxing Crescent
  36% illuminated
• Waxing Crescent
  43% illuminated
• First Quarter
  50% illuminated
• Waxing Gibbous
  58% illuminated
• Waxing Gibbous
  66% illuminated
• Waxing Gibbous
  74% illuminated
• Waxing Gibbous
  82% illuminated
• Waxing Gibbous
  90% illuminated
• Waxing Gibbous
  96% illuminated
• Full Moon
  100% illuminated
• Waning Gibbous
  96% illuminated
• Waning Gibbous
  90% illuminated
• Waning Gibbous
  82% illuminated
• Waning Gibbous
  74% illuminated
• Waning Gibbous
  66% illuminated
• Waning Gibbous
  58% illuminated
• Last Quarter
  50% illuminated
• Waning Crescent
  43% illuminated
• Waning Crescent
  36% illuminated
• Waning Crescent
  29% illuminated
• Waning Crescent
  23% illuminated
• Waning Crescent
  18% illuminated
• Waning Crescent
  12% illuminated
• Waning Crescent
  6% illuminated

Example: Same day, but with different latitudes (Chrome only)
<moon-phase illumination="25" phase="waxing crescent" lat="59.91" hour="22">

• Antarctica
  -77.85°
• Sydney
  -33.86°
• Equator
  0°
• London
  51.50°
• Svalbard
  70.00°
• North Pole
  90.00°