Morphing to outline

[samwatts1988]

Hello! I'm currently working on a project which requires shapes to transition between multiple states and MorphSVG seems to be covering the majority of things really nicely. There's a transition between two states that's tripping me up though where I need #start to morph into #end (see CodePen), with the latter shape being an outline as opposed to a solid shape. Currently when morphing between the two, #end transitions into a solid arch shape instead of the desired outline. I just wondered if anyone could advise on what I might be doing wrong here; might I need to contemplate a different approach or could it be that it's more related to the preparation of that particular SVG? Either way, all help will be hugely appreciated - thank you! 

See the Pen gOXeyVo by samwatts1988 (@samwatts1988) on CodePen

[mikel]

Hey @samwatts1988,

 

do you mean this?

 

#start{  // add a stroke
  stroke:#f49969;
  stroke-width:3px;
}

// and then tween the fill to transparent
tl.to( '#start', { fill:'transparent', duration: 1.5, morphSVG: '#end' } );

 

And here another prep of the path:

 

See the Pen xxPWoyQ by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[samwatts1988]

Hi @mikel! Thanks for your response - I think this might be part of what I'm looking for but looking back at my initial post I don't think I've been particularly clear on what my desired end result is, so my apologies for this! 

Essentially I’m looking to morph the thicker arch into the same weight as the narrower arch, with the base of the thinner arch then extending from the left and right to meet in the middle. The more I think about this now the more I realise it’s going to be the case that I need to rethink how I’m preparing the paths I guess? 

[mikel]

 

Hey @samwatts1988,

 

What should be morphed to what result is not really clear to me.

Here is just one interpretation

 

See the Pen ExbLxwE?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel