0

I want to make an animation like this one using svgs and javascript:

https://codepen.io/noeldelgado/pen/JdbmYW

The problem is that in order to make this transformation possible all the svgs between which we make this transformations need to have the same nodes. Basically the path needs to be the same, just with other values.

What I was doing now was that I created a shape, exported the svg and then formed a new shape by moving all the nodes manually. But this gives me irregular shapes. Is there a tool in Illustrator that lets me wrap a given number of nodes around a shape? Or another tool or technique that would make this more satisfying?

| improve this question | |
  • Welcome on GD.SE, Pit R., your question seems more related to programming than to graphic design. There are a lot of Javascript libraries able to animate an SVG path (and subsequently morphing it to a different one), see for example this, this or this. If the initial and the final path have the same number of nodes, the transaction is smooth, else the smoothness depends on the animation parameters. – Paolo Gibellini Jun 9 at 6:29
  • Thanks for your answer, I will look into these. – Pit R. Jun 9 at 10:50
  • To the best of my knowledge that's no inherent feature in Illustrator to specifically control the number of anchors on a path/shape. – Scott Jun 9 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.