This is a little tool i made yesterday to visualize the moon phase at a given percentage through the cycle. I'm getting a moon tattoo soon and i made this tool to visualize the moon phases to decide exactly what phase to get. I started out with the goal of representing the visual of a half-shaded sphere (the moon) being rotated around its axis. The idea was to represent this with an svg, drawing the right half of the circle, and then using an arc with a bigger radius to cut into it. I calculated the radius of this circle based on the point of it that would intersect with the moon's equator, which is the cosine of the angle of rotation. Here's the svg visualization, with a slider, and a checkbox to show the guide circle:

After looking at it a second time when i was putting this up on the garden, i realized something seemed a bit wrong. Slowly moving the slider, paying attention to the leftmost and rightmost images, it became evident that this doesn't actually match the shape of a rotating sphere; Something feels off.

Alright, back to the drawing board, then. My mind first went to trying to math out an actual 3d render, with a sort of raycast hitting the sphere. But after some thought, i remembered that i was pretty sure that you could "fake" 3d rotations with the transform functions in the html canvas. After some googling and thinking, i realized that all i needed was to scale the x-axis by this same cosine value from earlier. And luckily for me, you can transform the canvas in the middle of drawing a path (i find that really cool actually), so i trace the rightmost side of the circle going down, shrink the x-axis by a factor of cosine of the angle, and trace the same circle back up again, and fill the shape. That looks much better. So, here's the correct (i hope) visualization: