Circle
<svg viewbox="0 0 600 600"> <circle cx="300" cy="300" r="150" /> </svg>
Circle with clip-path
Only the area defined by the clip-path will be visible.
<svg viewbox="0 0 600 600"> <defs> <clipPath id="clip1"> <rect x="250" y="250" width="100" height="100" /> </clipPath> </defs> <circle cx="300" cy="300" r="150" clip-path="url(#clip1)" /> </svg>
Rect with clip-path
<svg viewbox="0 0 600 600"> <defs> <clipPath id="clip2"> <circle cx="300" cy="300" r="100" /> </clipPath> </defs> <rect x="200" y="200" width="200" height="200" clip-path="url(#clip2)" /> </svg>
Circle with mask
<svg viewbox="0 0 600 600"> <defs> <mask id="mask1"> <rect x="250" y="250" width="100" height="100" fill="blue" /> </mask> </defs> <circle cx="300" cy="300" r="150" fill="red" mask="url(#mask1)" /> </svg>
Stem with clip-path
<svg viewbox="0 0 600 600"> <defs> <clipPath id="stem-clip"> <circle cx="180" cy="490" r="100" /> <circle cx="420" cy="490" r="100" /> </clipPath> </defs> <rect x="200" y="400" height="200" width="200" clip-path="url(#stem-clip)" /> </svg>
Stem with mask
<svg viewbox="0 0 600 600"> <defs> <mask id="stem-mask"> <rect width="100%" height="100%" fill="#fff"/> <circle cx="180" cy="490" r="100" fill="#000" /> <circle cx="420" cy="490" r="100" fill="#000" /> </mask> </defs> <rect x="200" y="400" height="200" width="200" fill="#000" mask="url(#stem-mask)" /> </svg>
Donut
<svg viewbox="0 0 600 600"> <defs> <mask id="hole"> <rect width="100%" height="100%" fill="white"/> <circle r="50" cx="300" cy="300" fill="black"/> </mask> </defs> <circle id="donut" r="100" cx="300" cy="300" mask="url(#hole)" /> </svg>