ANTI Dev Posted October 22, 2021 Share Posted October 22, 2021 Hi I'm trying to do a seemingly simple morph but the outcome is not quite like desired. I'm morphing a square shape into a "diamond shape" made with same amount of anchor points and made with corner radius in illustrator for the rounding. The desired animation would look something like this: But as seen in the Codepen the morph between the paths looks different. Any ideas how to make a svg morph similar to the reference? See the Pen eYEBKqL by henrikboelsmand (@henrikboelsmand) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted October 22, 2021 Share Posted October 22, 2021 Hi Henrik - It's a little wonky, as I did it quickly. But you'll probably get the best result by creating a square with extra points halfway down the sides, then copying it and pulling those center points in to create the diamond sqdi.mp4 See the Pen jOLVeoa?editors=1010 by GreenSock (@GreenSock) on CodePen 4 1 Link to comment Share on other sites More sharing options...
ANTI Dev Posted October 25, 2021 Author Share Posted October 25, 2021 Hi Cassie Thank you! Worked great with the new points, exactly the effect I was looking for. 😊 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now