How can I make this path squiggle after morph?

[H0BB5 1 Likes (Newbie)]

Hey everyone! 

I have this button I am trying to make here. It is morphing between two svg's on the hover states.

What I am trying to achieve is allow the squiggly paths to continuously appear to wave when the hover is active. 

Rotating the circle doesn't quite achieve the affect, it's almost like I would need each path/curve to invert? 
The line-path I thought would be easier to achieve the waving effect but i'm having difficulty.

 

Thanks in advance

See the Pen rgYpVa by H0BB5 (@H0BB5) on CodePen

[mikel 4,782 Likes (Superhero)]

Hi @H0BB5,

 

Look at this post - maybe a stimulus.
There is a so called 'whipped together helper function': just wiggle a path

 

Kind regards

Mikel

[H0BB5 1 Likes (Newbie)]

@mikel Thanks for the response! 
I came across this post when I was searching the forum.. this is more of a blob and seems to have a lot more of a random effect. 

Here is a pen where I pasted in just the line path to see how the blob will morph it. 

See the Pen gJvjqw?editors=1010 by H0BB5 (@H0BB5) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

If you play around with the parameters some you can get an effect closer to what I imagine you're looking for. Try this:

 

waveSVG(path, {taperStart:0, loose:true, invertFlow:true, length:120, angle:10, magnitude:1, phase:1, duration:2, start:0, repeat:-1});

 

[mikel 4,782 Likes (Superhero)]

Hi @H0BB5,

 

If you draw two wave circles, correspondingly offset and morph, it can look like (like 'inverting the wave') this:

 

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

 

Happy morphing ...

Mikel

 

 

[H0BB5 1 Likes (Newbie)]

3 hours ago, mikel said:

Hi @H0BB5,

 

If you draw two wave circles, correspondingly offset and morph, it can look like (like 'inverting the wave') this:

 

 

 

 

Happy morphing ...

Mikel

 

 

Very cool. This is a great approach. Thanks a lot @mikel

 

Question – why is it rotating. Is this because each svg is a little offset from the other? It looks like it is kind of 'stepping' each time it morphs

[mikel 4,782 Likes (Superhero)]

Hi @H0BB5,

 

I would call it an optical illusion.

Set your mouse on a wave ...

it inverts but without rotation.

 

Don't rotate ...

Mikel