There's a complete example here, including pictures. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clip-path#example

Short answer, when you say "0%", "100%", etc. in a clip-path, what is this relative to? The size of the element? The size of its parent? The MDN examples use circle() which is shorthand for circle(50%).