SVG animation


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.

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?


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.

1 Like

Here’s my approach using an SVG:


Thank a lot for the answers.

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.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.