Responsively sizing clip-path using SVG #svg #html #css

responsive-svg-clip-path.md

How to do it

1. Export your SVG
2. Chuck it inline on your page somewhere
3. Add width="0px" height="0px" style="position:absolute;pointer-events:none" to the svg element to make it not visible on the page.
4. Put the <path> element within a <clipPath> element
5. Add an ID and clipPathUnits="objectBoundingBox" to the clipPath element.
6. Convert the path data to 'relative' using this site: https://yoksel.github.io/relative-clip-path/ (when exported, path values will be 'absolute', and reference pixel dimensions essentially, this makes it truly responsive).
7. Reference the ID you added for the clipPath in your CSS.

svg.html

<svg width="0px" height="0px" style="position:absolute;pointer-events:none" viewBox="0 0 1440 250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="example-clip" clipPathUnits="objectBoundingBox"><path d="M0,0 c0.166,0.027,0.333,0.04,0.5,0.04 c0.167,0,0.334,-0.013,0.5,-0.04 v1 c-0.167,-0.027,-0.334,-0.04,-0.5,-0.04 c-0.167,0,-0.333,0.013,-0.5,0.04 V0"/></clipPath></svg>

use-clip-path.css

.element {
    clip-path: url(#example-clip);
}