Clip-path with svg as local pattern

Maybe someone has an idea how to solve this? I have a slightly complicated svg-figure that is supposed to clip images on a clients website.

What I want/tried to do is use a custom-class on the image and set the clip-path: path() in css (theme editor). It works, but the svg is much larger than the image itself. Now I read that I should insert the svg via html and use the css property clip-path: url(). But I don’t know how to do this in wordpress/generatepress/generateblocks.

My idea is, that the client can use the custom-class or insert a local pattern and change the image to use the clip-path on images.

Here’s the code I used with the “path” property.

.tropfen-a {
	clip-path:path('M1193.75,2367.5c1000,0 2963.33,-1738.33 1214.58,-2252.92c-848.333,-249.583 -2034.17,-131.666 -2322.5,750.417c-272.916,834.167 107.917,1502.5 1107.92,1502.5');

And this is what I found how the code (CSS and HTML) should look like with the “url” property:

.tropfen-b {
	clip-path:url (#clip-tropfen-b);
<svg width="0" height="0">
	<clipPath id="clip-tropfen-b" clipPathUnits="objectBoundingBox">
		<path d="M1913.75,2367.5c1000,0 1380.83,-668.333 1107.92,-1502.5c-288.334,-882.083 -1474.17,-1000 -2322.5,-750.417c-1748.75,514.584 214.583,2252.92 1214.58,2252.92"></path>

I know this is not only a generateblocks-topic, but maybe someone has an idea…

Thank you, Angie.