I have an effect on my site which uses a clip-path in the form of a wave like so:

<svg class="svg" width="0" height="0" preserveAspectRatio="xMidYMid meet">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path d="M1,0 h-0.001 c-0.02,0.006,-0.03,0.079,-0.04,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 C0.032,0.076,0.021,0,0,0 v1 h1 V0">
</path></clipPath>
</svg>

CSS

.clipped {
  width: 100vw;
  height: 6vw;
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
  margin: 0 auto -2px auto;
}

This works perfectly on all browsers, but the height is wrong on firefox as can be seen here in my codepen

https://codepen.io/shereewalker/pen/KKYvKRJ

I have tried adjusting viewboxes and heights but nothing make a difference.

If I make the actual SVG twice as long by repeating the waves in the actual graphic and adjust the length in CSS it works, but it throws things off when changing between portrait and landscape on tablet.

I have tried placing it in a 1px by 1px illustrator file and re-exporting it (as recommended in another post) so all the numbers are between 0 and 1, but when I put the new co-ordinates in, a blue line just appears, though maybe I am doing this wrong.

When I include the clip-path like this instead:

.clipped {
  width: 100vw;
  height: 6vw;
  clip-path: path(
    "M1917.9,0h-2.6c-37.6.6-57.5,8-76.7,15.2-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.7-7.5-40.4-15.2-81-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8C61.3,7.7,40.6,0,0,0v101h1917.9V0Z"
  );
  margin: 0 auto -2px auto;
}

It works in all browsers, but it does not span the full width of the screen which I cannot seem to fix with CSS.

I have tried userSpaceOnUse instead of objectBoundingBox but nothing works.

Any help would be appreciated