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.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680.336 380.336">
  <defs>
    <linearGradient id="right-half" stop-color="black">
      <stop offset="0" stop-opacity="0"/>
      <stop offset="0.5" stop-opacity="0"/>
      <stop offset="0.5" stop-opacity="1"/>
      <stop offset="1" stop-opacity="1"/>
    </linearGradient>
    <linearGradient id="left-half" stop-color="black">
      <stop offset="0" stop-opacity="1"/>
      <stop offset="0.5" stop-opacity="1"/>
      <stop offset="0.5" stop-opacity="0"/>
      <stop offset="1" stop-opacity="0"/>
    </linearGradient>  </defs>
  <g stroke="#000">
    <circle cx="30" cy="30" r="27" style="fill:url(#right-half)"/>  
    <circle cx="90" cy="30" r="27" style="fill:url(#left-half)"/>  
 </g>
</svg>

Answer 2

There are a number of ways you could do it. Other than making a half-circle in a vector editor of course.

The simplest may be to use a clipPath. We take a copy of the circle, but filled with black. Then we cut off half of it.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680.336 380.336">
  <defs>
    <clipPath id="left-half">
      <rect x="0" y="0" width="30" height="60"/>
    </clipPath>
    <clipPath id="right-half">
      <rect x="30" y="0" width="30" height="60"/>
    </clipPath>
  </defs>
  <g stroke="#000">
    <circle cx="30" cy="30" r="27" style="fill:#FFF;stroke-width:4"/>  
    <circle cx="30" cy="30" r="27" style="fill:#000;" clip-path="url(#left-half)"/>  
 </g>
</svg>