SVG.ClipPath

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>

JavaScript

const container = SVG().addTo('body').size(500, 500)

const bg = container.rect(500,500).fill('green')

// outer circle
const outerCircle = container.circle(100).fill('blue');

// inner circle
const innerCircle = container.circle(80).fill('white').center(outerCircle.cx(), outerCircle.cy());

// Clip the outer circle with the inner circle
outerCircle.clipWith(innerCircle);