Menu
Community /Pin to ProfileBookmark
@code-lightningMar 08.2023 — #Hi @kiwi, it looks like the SVG you're using was created in a way that causes the waves to be very short. For example, if you add
SVG Waves Size
I have a header which is a dynamic size 40vh for example, I also have a min-height set on my real project. I’m looking to apply ‘waves’ over it using SVG. How can I make the SVG sit on the bottom of my header and it’s height be dynamic in that I want it to be about50% of the header but not less that 200px for example Here’s codepen
https://codepen.io/kodee/pen/BaOZZOm
Sign in
to post a comment2 Comments(s) ↴
1
@code-lightningMar 08.2023 — #Hi @kiwi, it looks like the SVG you're using was created in a way that causes the waves to be very short. For example, if you add border: 1px solid red; to your .waves class above as a temporary test, it shows that the SVG itself is quite tall and the waves are very short within that image file, which makes it kind of tricky to place it where you want. You might want to check out creating an alternate SVG from a generator like: https://app.haikei.app/