Overlapping circles bleeding

Question

I have a position:relative green ring with a position:absolute red clone :before and a position:absolute white clone

Answer 1

On the right side of the following snippet is the result of the @web-tiki svg ring with 2 clones of the same size/place (but different colors) with the anti-aliasing disabled (shape-rendering="crispEdges") just like @vals have mentioned:

body {
  background: lavender;
  margin: 0;
  overflow: hidden;
}

div {
  width: 200px;
  height: 200px;
  display: inline-block;
  position: relative;
}

svg {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

span {
  font-family: arial, sans-serif;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 45%;
}

shape-rendering="auto"





shape-rendering="crispEdges"

Since the OP example uses the :before and :after pseudo-elements, I have tried to apply this same shape-rendering="crispEdges" on the svg clip-path, but had no success in any browser: Link

Source: MDN