Non-proportionally scaling SVG border

I’m trying to find the best method for building unique border shapes in HTML/CSS, for example:

The goal is to be able to have this responsive so width/height can change to anything, but have a fixed size for the parts of the shape that are marked red, like the cut corners and notch on the left side.

I attempted to use clip-path with an inner div to create a border, but this falls apart with more complex shapes, like the notch on the left side. clip-path also doesn’t allow for rounding without using an SVG filter that introduces other artifacts to more complex shapes, and doesn’t allow for precise control of the corner radius.

I know this isn’t a Webflow-specific question, but if anyone’s attempted this please let me know!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Great question and I have the same query.
Did you manage to find a solution to this?