I now have a better understanding of clip-path. My struggle mentioned last week was due to my ignorance of what is called the winding rule.

The fill-rule property configures this algorithm and can be set when using the path function: clip-path: path(evenodd, 'M20 20 h50 ...');. Using the evenodd value on the drawing I was working on would have made my life easier, but that’s not the default value.

Another thing I’ve found handy and wanted to add to this followup is the use of the developer tools when tweaking the different gradient values to draw such a thing. Using the mouse scroll, I’ve found it easier and faster than hitting save from my code editor, even with live reload on.