CODEWITHSUNDEEP
svg
Ivan Taccadoli
Ivan Taccadoli

Reputation: 183

Svg path circle arc subtraction

I am trying to create an svg path to display moon phases. The final result I am trying to achieve is something like this http://ivantacca.altervista.org/arcs.jpg

I have already made the first two svgs but I dont know how to make the third one, in which the first arch seems to subtract the second one. I supposed the first arc to have a negative value on the x axis. Can someone help me?

<svg viewBox="0 0 200 200">
   <path 
      d="
      M 100, 100
      m 0,-75
      a 0.5,1 0 1,0 0,150
      a 1,1 0 1,0 0,-150
      "
      />
</svg>
<svg viewBox="0 0 200 200">
   <path 
      d="
      M 100, 100
      m 0,-75
      a 0,1 0 1,0 0,150
      a 1,1 0 1,0 0,-150
      "
      />
</svg>

Upvotes: 1

Views: 199

Answers (1)

Robert Longson
Robert Longson

Reputation: 124049

Just set the sweep flag to 1 compared to the gibbous moon so the arc goes the other way.

<svg viewBox="0 0 200 200">
   <path 
      d="
      M 100, 25
      a 0.5,1 0 1,1 0,150
      a 1,1 0 1,0 0,-150
      "
      />
</svg>

Upvotes: 1

Related Questions