Make border clip other elements and show background content - html

Question

I'm trying to create a spinner where two dots intersect and the foremost one should clip the other letting the background be visible on few pixels of intersection.
It would be okay to use SVG if CSS isn't capable of this, but at the moment I can't find a way to achieve the effect in neither of the technologies.
I tried with clip-path but it doesn't seem to do what am I trying to do.
Ideas?
body {
background-image: linear-gradient(to right, yellow 0%, purple 100%);
}
.a, .b {
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
top: 5em;
left: 50vw;
border: 4px solid white;
}
.a {
background: red;
}
.b {
background-color: blue;
margin-left: 30px;
}
<div class="a"></div>
<div class="b"></div>

Answer 1

It's easy to do in SVG. However you'll want to use a <mask> rather than a <clipPath>.
body {
background-image: linear-gradient(to right, yellow 0%, purple 100%);
}
svg {
margin: 5em 0 0 50vw;
}
<svg width="80" height="50">
<defs>
<mask id="clipred">
<rect width="100%" height="100%" fill="white"/>
<circle cx="55" cy="25" r="29" fill="black"/>
</mask>
</defs>
<circle cx="25" cy="25" r="25" fill="red" mask="url(#clipred)"/>
<circle cx="55" cy="25" r="25" fill="blue"/>
</svg>