Is this Possible by Clip-paths and is it possible to animate Clip-paths ?
Hello everyone, can anyone help me with a design and animation question? I'm wondering what the best approach would be for creating this design. Should I use SVG animation or curves? I've tried using curves, but I couldn't get the shapes I wanted. Thank you in advance for your help.
10 Replies
what does your clippath now look like? can you share it?
No i haven't got any output Accurately
https://bennettfeely.com/clippy/
i'm trying from the above link to make an clippath
so where does this screenshot and recording come from?
you can animate polygon shapes as long as the amount of points are the same. but it will be harder to create rounded corners in polygon
i have taken it from the figma file
do we have any other possible way to create and animate ?
maybe there are better ways i don't know of, but this could work for you
i created a clip-path with straight edges and use a svg filter to round them
then whit an keyframe animation we position the polygon points (make sure the amount is the same).
here an example on hover
https://codepen.io/MarkBoots/pen/wvNmrgZ
here a second way with mask-image gradient
https://codepen.io/MarkBoots/pen/poGLdoe
Thank you very much
i'll work on 
Make sure you copy or fork the codepens. I might delete them later
yeah sure
Thank you verymuch