change background color of half circle in svg

Question

i want to create First and third quarter moon on this svg code

Answer 1

Create a linear gradient with the fill you want. The gradient stops provide the colour change. Having 2 stops together makes the opacity change immediate.