Jump to content
Search Community

Reverse pathDataToBezier() [SOLVED]

Rodrigo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi I need some help from the forums' SVG savants,

 

I'm using DrawSVG and MorphSVG to create a couple of animations, but I'm hitting a wall regarding the Morph SVG part of it.

 

I draw a simple path and then animate the fill. The idea is to create a frame with some dynamic text inside, like this:

Draw_SVG.jpg

 

Here's the pickle. Since the text is dynamic the frames on the has to be changed according to the height of the text container inside. For that I'll use MorphSVG, but I need to translate the points of these paths by a specific amount of pixels, which changes the entire scheme of the paths, ie, changes not only the points' positions but also the control points of the bezier curves as well.

 

I using pathDataToBezier() I can get the paths and offset the points by a specific amount, but how can I get this bezier with the new array of points and turn it back to an SVG path that I can use in the MorphSVG Plugin?, like in the codepen sample.

 

PS: Is really odd to be on the other side of a thread :P

See the Pen EyQAad by rhernando (@rhernando) on CodePen

Link to comment
Share on other sites

Oh! Oh! Me! Me! Pick me! Pliiiiisss!

 

 

 

Did I get it right that the crux of the question is that you want to be able to morph the sides, making the curve longer but keeping the "lace" from stretching/scaling?

 

I ask, because if you are open to scaling, you can nest the different parts of your illustration into separate SVGs, with their own viewBox and scaling properties. In another words, you can make the "board" taller and keep the sizes with "laces" scaling proportionally.

 

Hang on, proof of concept on its way...

 

 

--------------

Here we go:

 

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

 

 

Would that be helpful at all? I mean, whatever you are saving in having to code crazy paths and arrays you will be spending making sure your SVG is as neat as it can be, adjusting the percentages and setting up the container. 

 

In the end, it will boil down to what you enjoy doing more. Matrixes or spitting out several SVGs to stitch them together later.

 

 

"Happy Tweening"

 

XD

Edited by Dipscom
  • Like 2
Link to comment
Share on other sites

Hi Dipscom,

 

Thanks for the quick answer, but I'm not sure how scaling  can be totally useful.

 

The structure of this  is the image you see in the post and a text area. The frame and the text container have an initial size (in the case of the text container let's call it naturalHeight). The user inputs a new text, the text container (SVG text) is updated with the new text and I get the new height of the text container and if it's bigger than naturalHeight then everything has to grow by that amount of pixels. Since scaling is proportional and not dependant on a pixel amount I don't know if it will fit correctly.

 

Also the idea (as usual) is to make the whole thing responsive and as friendly as possible in terms of code.

 

Finally SVG is far from being my strongest point, in fact this is my first time working with the Morph SVG Plugin. I've used Draw SVG for some preloaders and logo animations, but that's all I have in terms of SVG experience. So if what you suggest works and I can make it responsive without too much hustle, then I'll be more than thankful.

 

I'll be waiting for the concept.

Link to comment
Share on other sites

As you know, SVG is pretty much the holy grail at the moment, everyone is jumping into it and lots of great stuff is popping out all the time. I'm only scratching it myself.

 

I have amended my first comment with a Pen showing what I meant with my suggestion. If you have enough space on the sides, you can grow the side "laces" keeping them proportional. Because you will be setting up viewBoxes and their preserve aspect ratio for each of the sections, everything will be responsive right out of the box.

 

Have a look at the link above and see if that fits with what you had in mind. The animation is a simple infinite repeat but you know better than anyone else how you could adapt to suit your needs.

  • Like 2
Link to comment
Share on other sites

Wow, that's freaking awesome!!!

 

I didn't knew you could have svg tags within svg tags  :geek:, and the solution is incredibly simple.

 

Yep, that definitely solves it.

 

One solution that came to me was to move just the anchor points and keep the curves' control points intact, sure it would definitely distort things a bit, but I'll give it a shot and report back. But for now I'm going with your solution.

 

Thanks a lot!!!

 

PS: By being on the other side of a question, this showed me what a fantastic community we have here  8-)

  • Like 4
Link to comment
Share on other sites

PS: By being on the other side of a question, this showed me what a fantastic community we have here  8-)

 

What? You didn't know it? Well, then:

 

"Hi Rodrigo, Welcome to the forums!"

 

 

Back to your question:

 

I think if you write the curves yourself (instead of using a software) you would be able to reduce the distortion of the shape as you could just adjust it as it grows.

 

It's bedtime here but if you don't get anywhere with your ideas, I'll try to have a stab at moving the anchor points. However, I would imagine that moving several points individually might be a bit more intensive than scaling a parent SVG (all conjecture, though, no tests done).

  • Like 4
Link to comment
Share on other sites

One solution that came to me was to move just the anchor points and keep the curves' control points intact, sure it would definitely distort things a bit, but I'll give it a shot and report back. But for now I'm going with your solution.

 

If you don't go with the scaling and try to do this, I would split the shape up into three parts. Place the anchor points on the extrema of the curve, and you shouldn't have any problems uniformly stretching the ends.

 

8qDF6ch.png

 

If you need help converting points to a path, check out this post...

http://greensock.com/forums/topic/14129-morphsvg-change-start-and-end-point/?p=59864

 

I didn't know this at the time, but you only need the first "C", so you don't have to place a "C" every six numbers. 

  • Like 3
Link to comment
Share on other sites

Hey Blake,

 

Thanks for pointing that post.

 

That's pretty much the idea I was commenting to Dipscom, just move the points and keep the control points static, is not the best solution but it could work, considering the regular pattern and the fact that while creating the path in illustrator I kept the anchors to a minimum to reduce the amount of SVG code.

 

That's the only tricky part, the top part stays put and the paths at the bottom are just moved a fixed amount of pixels.

 

In fact looking at it in illustrator, when I move the anchor points the distance between the anchor and the curves control points is always the same, so basically I have to increase all the values for a specific part of the path by the same amount in the y axis and then create the new path.

 

As I move forward I'll keep posting.

 

Thanks again guys!!

  • Like 1
Link to comment
Share on other sites

Here's a cleaner version showing how you can move points. 

See the Pen cfc5a822a29c8305009391d2cf5f77a8?editors=0010 by osublake (@osublake) on CodePen

 

I'm moving all the points a set distance because I wasn't sure which points where at the top. You'll have to figure that out. Note that the points GSAP gives you will most likely be different than the original ones. Illustrator uses a bunch of different relative path commands. GSAP converts everything to absolute cubic Beziers.

 

To make it easier figuring out which points are at the start and end, you could use two different paths, a left side, and a right side, and then combine them.

 

If you want to move control points in the segment you're stretching, it might look better if you use the mapping technique I brought up in this post. The control points in the red curve are being moved an equal distance. The control points in the green curve are being mapped.

See the Pen 0e30467563e55517cfcfe9ea738f8cb9?editors=0010 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...