I am trying to make a shape like this

and i managed to get this sofar

But i cant get the right arc to go outwards instead of inwards. I cant find any help online how to do this. I tried rotation and playing around with the rx,ry but no luck.

Here is the JSFiddle to it

JsFiddle

<svg height="200" width="300">
  
  
      <g stroke="none" fill="blue">
        <path d="
        M 150 0
        a 1 1 0 0 0 0 100
        l -100 0
        a 1 1 0 0 0 0 -100
        l 100 0
        Z
        "/>
      </g>
 
</svg>