[Is it possible to create dark grey to black flames?]

Hello,

I came across Blake's amazing flame pen 

See the Pen rojyGw by osublake (@osublake) on CodePen

. I have been playing around with colors in order to get dark greyish - black color flame, but when the flames are black, it kind of feels like it doesn't resemble a flame anymore, and it looks more like smog. It feels like the black color acts as a background to other colors. 

See the Pen KKzJdXJ by zhongche (@zhongche) on CodePen

[Is it possible to choose the start origin with MorphSVG?]

Thanks Mikel, findMorphOrigin was very helpful. It helped me visualize that only the left shape is the one expanding to to the new shape, while the other two were trying to scale to 0. I fixed my problem by morphing it into a centered circle first, then with this new shape morph back into my desired shape.

[Is it possible to choose the start origin with MorphSVG?]

Thanks Richard. Will give it a try.

[Is it possible to choose the start origin with MorphSVG?]

Hello,

I was wondering if is possible to change the direction in which 2 paths are being morphed.

Currently, my path is being morphed from left to right, which doesn't look that great. Is it possible to modify it so that it starts morphing from the center and expand outwards?

The link to my animation is https://codesandbox.io/s/confident-violet-lywmu?file=/src/Animate.js

See the Pen Animate.js by s (@s) on CodePen

[How to correctly morph SVG path using attr?]

I just wanted to thank you both Zach and Craig, I decided to play around with MorphSVG plugin in Codesandbox, and it became so much easier to achieve the animations I was looking for!!!

[How to correctly morph SVG path using attr?]

Wow! That was real fast!

[How to correctly morph SVG path using attr?]

Thank you, will give it a try.

[How to correctly morph SVG path using attr?]

Hi Zach,

Thank you for the reply. Does order refer to how the path was created from start point to end point? If that is the case, I did ensure that the order was the same. I used the Pen Tool to trace the shape. For both shapes, I started at the bottom right, and traced the outside border going left, top, bottom right, then inner border going to top left, bottom and finally right connecting it with the start point. Is this what you were referring to or is it something else?

I do not have club membership, so I do not have access to MorphSVG. I will probably get it if I find myself needing really complex morphing.

[How to correctly morph SVG path using attr?]

Hello,

I am new to animation and SVG in general.

I am using attr property to morph between 2 paths in a SVG. I created the shapes with same number of anchor points in Illustrator. The problem I am experiencing is that at the start of the animation, the path is all messed up. I am not sure if what I did is correct but how can I achieve that the starting path is the one given and start expanding from there towards the new path? 

I created a codesandbox showing this behavior at https://codesandbox.io/s/falling-dew-7l0cz?file=/src/Animate.js

I was able to animate it correctly using different frames and a timeline, but is not as smooth.

Any help is greatly appreciated.

See the Pen Animate.js by s (@s) on CodePen