SVG animation

[nikostzounakos]

Hello!

I am trying to create a similar animation as this one in the link, that there is a wave that drops down when you open the page.

https://isadoradigitalagency.com/insights

I am trying to make it with clip path and css animations but has not succeed.
Is there anyone that can advice me on it?

Thanks!

[PaulOB]

@nikostzounakos

I am trying to make it with clip path and css animations b

Maybe something like this?

I modified the wave from here.

If the wave is more complicated then you are probably better building it in svg and then using it as a mask.

Or just overlay the svg and match the background color. Here was something similar from an old thread but the svg code is not mine.

[Archibald]

Here’s my approach using an SVG:

[nikostzounakos]

Thank a lot for the answers.

So for a more accurate result I should create an SVG and then animate it?

[Archibald]

@nikostzounakos

So for a more accurate result I should create an SVG and then animate it?

The SVG approach is no more accurate than the clip-path approach.

Both approaches can use polygons or Bézier curves.