How can I render moon phase icons in CSS? - css

Question

We are adding moon phase icons to a website.
We want to show an image for each percentage of the moon- so 100% will be a full moon, 5% a thin crescent, etc. Similar example
The current plan is to generate 100 png images of the moon in percentage stages of shadow, and point to these as required.
I've found code for a CSS animation, which is brilliant, but we really want static images.
Can I render an image of the moon in percentage shadowed increments, using CSS?

Answer 1

Might not be exactly what you are looking for, but I've written a JavaScript library to generate moon/planet phase discs.
The JS code really just calculates the size and position of the 2 discs, as described by #jcaron in his answer, so if you didn't want to use scripting for this you could just use the library to work out the correct CSS values and hand-code those into your page.

Answer 2

It's just a matter of having two discs, one over the other, with the right offset between the two. You can draw a disc in CSS by having a box with a 0-size contents (and padding) and corner-radius set to the width of the border.

Answer 3

I realize this is an old question but I was looking for a similar solution and developed an answer for PHP based off the CSS animation OP had linked to. I am using a script called MoonPhase.php from https://github.com/solarissmoke/php-moon-phase, which among other things provides the number of days into the current lunar cycle (returns a number between 0 and approximately 29.53, with 0 being the start of the new moon). I used this to create a function that gives me the adjustments for the CSS. It appears that the range of numbers for the CSS are based on the size of the drawn disc, so I made the entries variable based around vw numbers to allow for automatic screen sizing. This required pushing out the block through php, and in a real page you would want to keep this within the of course.
<?php
include("MoonPhase.php");
$moonSize = 10; // output in vw, 10 would equal 10% of screen width
$moon = new Solaris\MoonPhase();
$age = $moon->age(); // or you can provide a number between 0 - 29.53
$pos = moon_pos($age, $moonSize);
echo <<<EOT
<div class="moon"></div>$age
<style>
body {background: #111;}
.moon {
background: #111;
border-radius: 50%;
box-shadow: inset {$pos}vw 0 1px #f5f5f5, 0 0 3px #444;
display: inline-block;
height: {$moonSize}vw;
transform: rotate({$pos}deg);
width: {$moonSize}vw;
}
</style>
EOT;
function moon_pos($age, $sz) {
$cycle = 29.53058868;
$pos = ($age - ($cycle / 2)) * (($sz * 2) / $cycle);
$pos = ($pos >= 0) ? $sz - $pos : -$sz - $pos;
return $pos;
}
I have made changes to the CSS to not rely on color names. I also added a small faded border so that you can always see the outline of the moon, plus some blurring of the black disc edges. The final output gives a near pixel-perfect rendering of the current moon phase.
The magic of moon_phase() is getting the correct numbers to work with the CSS. The CSS has a range of -$moonSize to +$moonSize, with the new moon (completely black) at 0. That happens to be the opposite of the current cycle age which has the full moon in the middle of the range, so I had to make a 2-step adjustment to squeeze the 29 days into the right range and then flip the output to get the proper transition from -10 to +10. There is probably a more elegant way to do this, but the current code worked.