What I’m trying to do is remove the lines in the middle of the circle.
How would this be done using clip-path?
Taking this:
And turning it to this:
https://jsfiddle.net/5r1dg4hx/3/
<svg class="stack" aria-hidden="true" width="260" height="194" viewbox="0 0 260 194">
<line stroke="teal" x1="131" y1="40" x2="130" y2="149"></line>
<line stroke="dodgerblue" x1="91" y1="133" x2="170" y2="58"></line>
<line stroke="purple" x1="77" y1="95" x2="185" y2="96"></line>
<line stroke="green" x1="169" y1="135" x2="93" y2="56"></line>
<circle class="outer" cx="131" cy="95" r="55"></circle>
<circle cx="130" cy="95.40" r="20.8"></circle>
</svg>
Clipping and masking
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath