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

 

CSS

 

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

 

and here the result JS/CSS Moon Phases

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.