Jump to content
H0BB5

How can I make this path squiggle after morph?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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});

 

  • Like 3

Share this post


Link to post
Share on other sites

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

 

 

  • Like 2

Share this post


Link to post
Share on other sites
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

  • Like 1

Share this post


Link to post
Share on other sites

Hi @H0BB5,

 

I would call it an optical illusion.

Set your mouse on a wave ...

it inverts but without rotation.

 

Don't rotate ...

Mikel

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.