How can I do this effect?

[pedrofumero]

Hello guys, I hope you ok, I would like to know how can I do some effect like this:

Someone have a tutorial? Or have a name of this effect?

Thanks in advance!

[labofoz]

Do you have a link to the original page? I’m assuming it’s animated right? The way I would go about it is with a simple SVG element. SVG images are made up of paths, and these paths can be animated with either JavaScript and even pure CSS!

I actually have to head out for a few minutes soon so I can’t give you a better example, but if you search CodePen for “svg wave” you’ll find a few examples, here’s a super simple one that might help you get started:

Even without animation, an SVG would be superior (in my opinion) to a transparent PNG as it would maintain it’s crispness responsively.

[pedrofumero]

Thanks a lot! It’s exactly that I’m looking for, instead I don’t have the web site link, because the image is a .psd file print screen.

[etidd]

Why not just use .png image files with transparent backgrounds? …or is this a preparation to animate the wave? Am I missing something?

[SamA74]

@etidd

Why not just use .png image files with transparent backgrounds?

While PNG images are quite efficient for this type of graphic, SVG is far more efficient than any pixel based format for this, with a very low data footprint while being perfectly crisp on any size screen.

[quentinsaint8]

I would use a PNG or SVG image ( SVG is more efficient but some believe is a security risk) with your wave background fixed to the bottom of your header element.
You can achieve this using this by applying this css to the image:

img
{
position:absolute;
width:100%;
bottom:0px;
}

Hope this helps

[SamA74]

@quentinsaint8

but some believe is a security risk

I have heard of this before, but I’m not convinced it’s a major concern.
Yes, if you are downloading SVG images from the web, someone could have laced it with malicious code. But any sane developer would look at the code to check it before use.
In that sense it is no different to any other kind of code used on the web.
You could say exactly the same thing about javascript, or PHP or whatever.
Any kind of code can be injected with malicious code. If it’s not from a known, trusted source, manually check it over for nasties.