Draw a crescent moon using SVG in HTML

Question

Is it possible to draw a crescent moon using SVG in HTML? I've been trying things out at W3 Schools but I don't see an example of this. I don't need any of the shading that you see in typical google images of 'crescent moon', just a solid border crescent moon.

Answer 1

Rather than drawing three circles you can draw a path with two arcs:

<path d="M50 20A40 40 0 1 0 50 70 30 30 0 1 1 50 20z" stroke="black" stroke-width="2" fill="red"/>

This reads as

M 50 20 Move to position (50, 20)

A 40 40 0 1 0 50 70 Draw an arc from that point to position (50, 70). The arc should have a radius of 40 in the x-axis and 40 in the y axis.

30 30 0 1 1 50 20 Draw another arc in the opposite direction from the current point to (50, 20) with a radius of 30 in both axes.

z Join the ends nicely

For more information see SVG specification