Controlling a svg morph

[Chris Prieto]

In the past I've lucked out and the svg morphs I did were smooth as butter but I cant figure out why my attempt to animate a circle path into a tear-ish type of shape path results in slightly off morph. It seems to twist around by default. I tired messing with shapeIndex, morphIndex, origin, rotational type. I was shooting for the circle to stay a circle and just kinda spout the pointy part.

 

Is there something I am missing or is it a matter of more tweaks to the shapeIndex, morphIndex, origin or type?

See the Pen 925584322289111141155ea751b292e1 by ionz149 (@ionz149) on CodePen.

[mikel]

Hey @Chris Prieto,

 

Try a circle with 5 points

 

See the Pen MWgMQeL by mikeK (@mikeK) on CodePen.

 

It could be tear-ish ...

Mikel

 

[GreenSock]

Yeah, the key in situations like this is to add some points/anchors strategically, like in the area where there's more complexity. Here's a fork where I added a few anchors to your circle: 

See the Pen 3e9d1e04813e3894985befe810a2b4f3 by GreenSock (@GreenSock) on CodePen.

 

<path id="start1" class="cls-1" d="M0,207.78C0,177.4,24.624,152.78,55,152.78,58.038,152.78,61.01762,153.026,63.92129,153.5,81.692,156.398,96.6,167.812,104.322,183.417,105.685,186.17074,106.825,189.055,107.716,192.046,109.201,197.03,110,202.31238,110,207.78,110,211.88,109.55,215.877,108.7,219.72,106.714,228.692,102.538,236.84,96.76,243.574,86.67313,255.331,71.7,262.78,55,262.78,24.624,262.78,0,238.156,0,207.78z"/>

Does that help?

[Chris Prieto]

Thanks @mikel & @GreenSock! This has got me going in the right direction.