Preface
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.
Problem:
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.
Codepen:
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!