Can you get a perfect svg circle from parts?

I have 4 arcs of a circle that are generated with SnapSVG.js The problem is that the gap between the top arcs is higher than that of the bottom arcs So I ask the question if I can fix the gap between the arcs and get a perfect circle using only CSS for convenience with resizing?

This is raw JS [I intend to clean it up a bit] http://jsfiddle.net/LtLafp2r/

var canvasSize = 200,
    centre = canvasSize/2,
    radius = canvasSize*0.8/2,
    s = Snap('#svg'),
    path = "",
    arc = s.path(path),    
    startY = centre-radius;

var d = 0;
var dr =0;

 radians = Math.PI*(dr)/180,
            endx = centre + radius*Math.cos(radians),
            endy = centre + radius * Math.sin(radians),
            largeArc = d>180 ? 1 : 0;  

var s = Snap("#svg");
// Lets create big circle in the middle:

path = "M"+centre+","+startY+" A"+radius+","+radius+" 0 "+largeArc+",1 "+endx+","+endy;

var arc = s.path(path);
// By default its black, lets change its attributes
 arc.attr({
          stroke: '#3da08d',
          fill: 'none',
          strokeWidth: 25
        });