Getting rid of anti-aliasing on an SVG circular feature

Question

I am making an animated SVG pie chart. Basically, I have two SVG elements, the first gets a border-radius of 50% , the second a circle, which I fill up to a certain value. In the end, it makes one circle over another circle, both of them are the same size.

There is some kind of SVG smoothing that is hard to get rid of. It is very noticeable in the upper, left, lower and right "corners" of the circle, at least in Google Chrome.

Here is the HTML part

 <figure id="pie" data-percentage="60"> <div class="receiver"></div> <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision"> <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision"/> </svg> </figure> 

Below is the codepen for a more accurate description of the problem. I tried various solutions, including the SVG attribute to render the form, but to no avail.

Here is a screenshot, the overlay is not as noticeable as in codefen (at least for me)

Answer 1

Full percentage circle svg

I also encountered this problem before: Pixel border in a circle This happens when you change an element with a border radius.
You can find the answer in the answer above, but I think this is better than the performance, and aesthetically, if you use / modify svg.

Example:

 var circ = document.getElementsByClassName("pie2"); var text = document.getElementsByClassName("text"); text = text[0]; circ = circ[0]; var maxvalue = 320; var value = maxvalue; var stop = false; function increase() { if (value > 0) { circ.style.strokeDashoffset = value--; text.textContent = Math.abs(Math.floor((value / maxvalue) * 100) - 100) + "%"; } else { clearInterval(intervalid); } } var intervalid = setInterval(increase, 25); 

 .pie { fill: none; stroke: #222; stroke-width: 99; } .pie2 { fill: none; stroke: orange; stroke-width: 100; stroke-dasharray: 320; stroke-dashoffset: 320; } .text { font-family: Arial; font-weight: bold; font-size: 2em; } 

 <figure id="pie" data-percentage="90"> <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision"> <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision" /> <circle r="50" cx="100" cy="100" class="pie2" /> <text class="text" x="80" y="110">0%</text> </svg> </figure>