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.
No description
10 Replies
Kiran
Kiran12mo ago
MarkBoots
MarkBoots12mo ago
what does your clippath now look like? can you share it?
Kiran
Kiran12mo ago
No i haven't got any output Accurately https://bennettfeely.com/clippy/ i'm trying from the above link to make an clippath
MarkBoots
MarkBoots12mo ago
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
Kiran
Kiran12mo ago
i have taken it from the figma file do we have any other possible way to create and animate ?
MarkBoots
MarkBoots12mo ago
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
MarkBoots
MarkBoots12mo ago
here a second way with mask-image gradient https://codepen.io/MarkBoots/pen/poGLdoe
Kiran
Kiran12mo ago
Thank you very much i'll work on thumbup
MarkBoots
MarkBoots12mo ago
Make sure you copy or fork the codepens. I might delete them later
Kiran
Kiran12mo ago
yeah sure Thank you verymuch
Want results from more Discord servers?
Add your server