I have a section where content has a gradient background and wave at the bottom and end of the content. Usually I would export each wave as an svg and have it in the :before and :after elements so it can scale nicely at different viewports. However as I need the gradient across all of the elements, I opted for a clip path.
Currently, as the height is automatic (dependant on content) the waves are much larger at smaller view ports. Is there a way to scale the waves? I have tried scaling the clip path to be smaller but that makes the background smaller so some content dissappears.
https://codepen.io/ainsleyclark/pen/MWyeNQo?editors=1100
section {
background: #fbbe34;
background: linear-gradient(144deg, blue 0%, #719dc6 100%);
clip-path: url(#wave-clippath);
-webkit-clip-path: url(#wave-clippath);
height: auto;
display: flex;
align-items: center;
padding: 100px;
} <!-- Wave - Clippath -->
<svg width="0" height="0" preserveAspectRatio="none">
<clipPath id="wave-clippath" clipPathUnits="objectBoundingBox">
<path d="M0.895,1 c-0.061,0,-0.123,-0.006,-0.184,-0.019 c-0.039,-0.008,-0.079,-0.019,-0.117,-0.029 h0 l0,0,0,0 h0 c-0.043,-0.011,-0.087,-0.023,-0.131,-0.032 a2,10,0,0,0,-0.078,-0.011 a3,10,0,0,0,-0.078,-0.004 c-0.026,0,-0.052,0.001,-0.078,0.004 a2,10,0,0,0,-0.077,0.011 a2,9,0,0,0,-0.076,0.018 C0.05,0.945,0.024,0.954,0,0.963 V0.83 h1 V0.83 H0 V0.17 h1 v0 H0 V0.006 C0.034,0.002,0.07,0,0.105,0 c0.061,0,0.123,0.006,0.184,0.019 c0.039,0.008,0.079,0.018,0.117,0.029 h0 l0,0 h0 l0,0 c0.043,0.011,0.087,0.023,0.131,0.032 a2,10,0,0,0,0.078,0.011 a3,10,0,0,0,0.078,0.004 c0.026,0,0.052,-0.001,0.078,-0.004 c0.026,-0.002,0.052,-0.006,0.077,-0.011 a2,9,0,0,0,0.076,-0.018 c0.025,-0.007,0.05,-0.015,0.075,-0.024 V0.994 c-0.034,0.004,-0.07,0.006,-0.105,0.006"></path>
</clipPath>
</svg>
<section class="section">
<div class="text">
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestiefermentum.
</div>
</section>Thanks in advance!
I would use two SVG and multiple mask instead of clip-path.
Here is the SVG I will be using. They are not exactly the same as yours but you can easily edit them
svg {
border:2px solid;
}<svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 17">
<path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill="red"/>
</svg>
<svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 17">
<path transform="scale(-1)" transform-origin="center" d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill="red"/>
</svg>Here is your code using the above inside mask. You will need 3 layer. A top and bottom one with the SVG and a middle one with a simple gradient to fill the space:
section {
background: linear-gradient(144deg, blue 0%, #719dc6 100%);
-webkit-mask:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 17'><path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill='white'/></svg>") bottom/100% auto,
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 17'><path transform='scale(-1)' transform-origin='center' d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill='white'/></svg>") top/100% auto,
linear-gradient(white 0 0) center/100% calc(100% - 2*17vw);
-webkit-mask-repeat:no-repeat;
padding:18vw 50px; /* 18vw is an approximation of the SVG height considering the ratio*/
}<section class="section">
<div class="text">
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestiefermentum.
</div>
</section>