/    Sign up×
Community /Pin to ProfileBookmark

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 


to post a comment
CSSHTMLMobileUX Engineer

2 Comments(s)

Copy linkTweet thisAlerts:
@sibertMar 07.2023 — Why HTML and CSS? Why not only a SVG as a background image (gray and blue wave together)?
Copy linkTweet thisAlerts:
@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/


Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,