Getting control points of a wave svg and use it

[Buntafujiwaaa]

I've look through several methods and the forum but can't seem to still wrap my idea about manipulating the svg.

Without using MorphSVG plugin, is there a way to control a specific point of my wave svg path to move upwards and downwards. See the red dots in both attached image.

Do I really need a library like Snap.svg or something to convert them into data?

I know you can change the path d attribute. Thus my very first try was to grab two different svg and change the d attributes

 

But all I get is jibberish movements. See codepen for example.



 

See the Pen ENdOZy by nickngqs (@nickngqs) on CodePen

[Dipscom]

Yes you can achieve such effects without a JS library, it's more about knowing how the path is drawn in order to manipulate it.

 

I'm AFK all day today but if no one's shown you how by the time I get back, I'll show you.

[Dipscom]

Hello Buntafujiwaaa!

 

I'm back. It seems no one's been here or said anything so the glory shall be all MINE!

 

As I mentioned before, if you want to manipulate the path in SVG without using DrawSVG (or another specific library), you will have to learn to read the actual path code. Why? Because half of what DrawSVG (and any other library) does is read the code int that attribute. The other half is to write another load of code.

 

Granted, for complex shapes it's very, very, very hard - We wouldn't need all the plugins and JS libraries if it wasn't, right?

 

Onwards to the main act: 

 

The reason just grabbing two different SVGs and combining their paths generate gibberish motion is because they are two different SVGs. The code that makes their paths will be different because they were created differently (I could go into a bend here over chaos theory but, let's not...).

 

If you are able to read the path code then you will be able to alter it just so, and achieve the desired effect.

 

Here's MDN's info on path. And here's w3chool's one.

 

If we look at the code that's in your Pen, clipping it to just a tiny section, more precisely the very first point in the drawing. Bear in mind the viewBox size being 1440 wide by 240 height.

 

Original shape:

M329.8,0

This reads: Move to position 329.8 in the horizontal axis and position 0 in the vertical axis.

 

Target shape:

M1440,100

This reads: Move to position 1440 in the horizontal axis and position 100 in the vertical axis.

 

In the original shape the point is quite close to the top left of the SVG. In the target shape the equivalent point is very close to the bottom right corner. When you use GSAP to tween just that one point, it will look like it is traveling from the top left to the bottom right. Now, extrapolate that into all the points in your shape and you will get what you see in your Pen.

 

In another words, that's expected behaviour.

 

Here's a Pen I put together, it shows how little you need to create a decent simple shape and what you need to change to make it move, I have kept it with as little points as possible and as close as your original.

 

See the Pen jVQWJm by dipscom (@dipscom) on CodePen

 

Happy Tweening!

[Buntafujiwaaa]

OMG, that makes so much sense now! Your explanation is really good as compared to other svg material I've been reading. Thanks alot!

[Buntafujiwaaa]

 

OMG, that makes so much sense now! Your explanation is really good as compared to other svg material I've been reading. Thanks alot!

 

The reason just grabbing two different SVGs and combining their paths generate gibberish motion is because they are two different SVGs. The code that makes their paths will be different because they were created differently

Your first two line got me thinking 'why am i so stupid, there're two different svgs =X'

[Dipscom]

Don't put yourself down, we're all at different levels with different subjects in life

 

There's no such thing as stupid here, just inexperienced. 

 

Happy to hear that it makes sense, I can be a bit convoluted when explaining things sometimes.