Home▸Space & Astronomy▸Moon Phases Diagram (2D)

Moon Phases Diagram (2D)

Interactive 2D Sun-Earth-Moon orbit diagram: drag the day-of-month slider to see why the Moon's phase changes, with a live Earth-view disc, illumination percentage, and a countdown to the next full and new moon.

Space & Astronomy2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
2d-3d-moon-phases ↗ Open standalone

This 2D simulator draws the Sun–Earth–Moon system from directly above: sunlight arrives as parallel rays from one side, the Moon orbits Earth once every 29.53 days, and the sunlit hemisphere of the Moon is always shaded to match. A companion Earth-view disc translates that geometry into what a stargazer actually sees in the sky — a thin crescent, a half-lit quarter, or a full bright circle. Drag the day-of-month slider or press Play to animate a full lunar month, and watch the live readouts track the Sun–Earth–Moon angle, the illuminated percentage, and the countdown to the next full and new moon.

⚙ Under the hood

A 2D top-down Sun-Earth-Moon orbit diagram paired with a live Earth-view disc that shows the correct lunar phase, illumination percentage, and countdown to the next full and new moon.

Moon PhasesOrbital MechanicsLunar Cycles

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)