JS/CSS Moon Phases snippet

Simple script to generate moon phases ( https://en.wikipedia.org/wiki/Lunar_phase )

It uses 2 SVG (2 hemispheres) and some CSS transformation.

You can avoid JS if you don’t need real-time phase update.

HTML code




and JS code. The code is prolix and redundant, but it helps to understand what happens.


and here the result

See the Pen JS/CSS Moon Phases by Diego Betto (@agm65) on CodePen.dark