SVG Arc Menu Can't Create arcs
<p>I am trying to create a menu with two arcs as menu items, which then behave as buttons that trigger a radial menu like <a href="http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript/" rel="nofollow noreferrer">this one</a>.</p>

<p>I've been struggling with these SVG paths forever but just can't get them to behave properly. Both arcs have to be 1/4 of a circle (they have to be placed next to each other eventually, forming 1/2 of a circle). This is what I've got so far: <a href="https://jsfiddle.net/3t5kynox/" rel="nofollow noreferrer">JSFiddle</a>. </p>

<p>I believe my intentions are clear enough when I say that I want two arcs (1/4 circle) placed next to each other (creating half a circle).</p>

<p>I'll include the HTML here as well:</p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

    &lt;path id="a" d="M40 50 A 40 50 0,0,0 80 90 L 80 50 Z" fill="#bf1238"&gt;&lt;/path&gt;
    &lt;path id="a" d="M120 50 A 120 50 0,0,0 120 90 L 120 50 Z" fill="#bf1238"&gt;&lt;/path&gt;

&lt;/svg&gt;
</code></pre>

<p>I haven't gotten to the radial menu part yet, as I wanted to get this out of the way first. If you feel like it, feel free to leave any advice on the radial menu, just note I want to do this in plain JS and SCSS.</p>

<p><strong>FIXED</strong></p>

<p>I realised, thanks to @Harry, I misunderstood the <code>A</code>-syntax in the <code>d</code> attribute from <code>path</code>. I defined it as the starting point for the curve instead of the <code>X</code> and <code>Y</code> radius.. This is the code now:</p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;path id="a" d="M40 50 A 45 45 0,0,0 80 90 L 80 50 Z" fill="#bf1238"&gt;&lt;/path&gt;
    &lt;path id="a" d="M120 50 A 45 45 0,0,1 80 90 L 80 50 Z" fill="#bf1238"&gt;&lt;/path&gt;
&lt;/svg&gt;
</code></pre>

<p>I will also update the JSFiddle I made previously so you can see the results!</p>