How to drag to change the shape of SVG paths?

[jxy 7 Likes (Newbie)]

I have been trying to achieve something like this: 

 

Where one can drag the "handles"(the blue and yellow circles) to change the shape of the triangle. My understanding is that I would need to somehow change the "d" attribute of the "path" to make this work. 

 

The closest draggable plugin example I could find is this:

 

But it's changing the "points" attributes of a polygon, not the "d" attributes.

 

I also looked at morphSVG plugin but it seemed to be used for animating the morphing from one shape to another very different shape.

 

 

Any pointers, please? 

 

Thank you!

See the Pen wgapaY by GreenSock (@GreenSock) on CodePen

[GreenSock 18,894 Likes (Superhero)]

Yeah, that shouldn't be too terribly difficult - you just need to understand how the <path>'s "d" attribute works. Or you could use a <polygon> Either way, you'd just set up your two Draggable elements and then in an onDrag you'd update the <path>'s "d" value or <polygon>'s "points" value accordingly. And it looks like you'd have to also update the angle shapes too. That'd all be tied to that onDrag. I'd have one function that handles all the updates and pulls from the various points to make it all work. 

 

Good luck!

[jxy 7 Likes (Newbie)]

7 hours ago, GreenSock said:

Yeah, that shouldn't be too terribly difficult - you just need to understand how the <path>'s "d" attribute works. Or you could use a <polygon> Either way, you'd just set up your two Draggable elements and then in an onDrag you'd update the <path>'s "d" value or <polygon>'s "points" value accordingly. And it looks like you'd have to also update the angle shapes too. That'd all be tied to that onDrag. I'd have one function that handles all the updates and pulls from the various points to make it all work. 

 

Good luck!

Thanks!

 

So there isn't a more intuitive way to update the angle shapes (which are svg <path> elements ) other than vanilla javascript? Is there a better tool / plugin to deal with such things?

[Cassie 5,659 Likes (Superhero)]

A mixture of svg.js and GSAP might be nice?

It's kinda like jQuery for SVG - it makes SVG DOM scripting a lot easier.

https://svgjs.dev/docs/3.0/

[jxy 7 Likes (Newbie)]

17 minutes ago, Cassie said:

A mixture of svg.js and GSAP might be nice?

It's kinda like jQuery for SVG - it makes SVG DOM scripting a lot easier.

https://svgjs.dev/docs/3.0/

Thanks, Cassie! Let me give this a look!

[OSUblake 18,538 Likes (Superhero)]

2 hours ago, jxy said:

So there isn't a more intuitive way to update the angle shapes (which are svg <path> elements ) other than vanilla javascript?

 

You could probably have the angles as a circle, and then use a triangle mask or clipPath to hide the rest.

[jxy 7 Likes (Newbie)]

10 hours ago, OSUblake said:

 

You could probably have the angles as a circle, and then use a triangle mask or clipPath to hide the rest.

Thanks!

 

[jxy 7 Likes (Newbie)]

On 11/17/2021 at 12:15 AM, OSUblake said:

 

You could probably have the angles as a circle, and then use a triangle mask or clipPath to hide the rest.

Just let you know that I successfully implemented your suggestion - triangle as a clipPath to cover the rest of the circles! Thank you @OSUblake !!

[jxy 7 Likes (Newbie)]

Hi all,

 

I tried to set up a Codepen for this but I'm so green that I haven't figured out how exactly, so bear with me...

 

The letters "a", "b", "c" are in a separate div overlapping the svg element.

 

My questions is, how would you keep the letters "a", "b", "c" in between their respective angles as you drag the handles, as in the clip below?

 

Any pointers will be appreciated... thanks!

 

 

[OSUblake 18,538 Likes (Superhero)]

29 minutes ago, jxy said:

I tried to set up a Codepen for this but I'm so green that I haven't figured out how exactly, so bear with me...

 

There are other editors you can use, like CodeSandbox, which will be similar to your local environment.

 

31 minutes ago, jxy said:

My questions is, how would you keep the letters "a", "b", "c" in between their respective angles as you drag the handles, as in the clip below?

 

If you can get a demo up and running, I can take a look. I think it's going to involve a little trig, which would involve actually calculating the angles of a, b, and c, and then moving the labels to half of the angle.

 

[jxy 7 Likes (Newbie)]

9 hours ago, OSUblake said:

 

There are other editors you can use, like CodeSandbox, which will be similar to your local environment.

 

 

If you can get a demo up and running, I can take a look. I think it's going to involve a little trig, which would involve actually calculating the angles of a, b, and c, and then moving the labels to half of the angle.

 

Hi @OSUblake, here is the CodeSanbox link: https://codesandbox.io/s/stoic-curran-kekt9?file=/src/App.js

You have been really helpful! Thank you! 

I just upgraded my account to "shockingly green" because of helpful people like you haha

[OSUblake 18,538 Likes (Superhero)]

12 hours ago, jxy said:

I just upgraded my account to "shockingly green" because of helpful people like you haha

 

Thanks!!! 🙌

 

So I had problems with your demo because the SVG had a bunch of transforms on it, so the SVG coordinates don't match up nicely with the label, so I just made my own version. It was a little harder than I initially thought due to way the angles can flip depending on how you drag stuff around.

 

See the Pen LYjaWQz by GreenSock (@GreenSock) on CodePen

 

Also, if you want to use the util selector to get an element, you need to do it like this as it returns an array.

 

const triangle = q("#triangle")[0];

 

[jxy 7 Likes (Newbie)]

1 hour ago, OSUblake said:

 

Thanks!!! 🙌

 

So I had problems with your demo because the SVG had a bunch of transforms on it, so the SVG coordinates don't match up nicely with the label, so I just made my own version. It was a little harder than I initially thought due to way the angles can flip depending on how you drag stuff around.

 

 

 

 

Also, if you want to use the util selector to get an element, you need to do it like this as it returns an array.

 

const triangle = q("#triangle")[0];

 

This looks amazing! I will study this later! Thank you!

[jxy 7 Likes (Newbie)]

On 11/19/2021 at 11:14 PM, OSUblake said:

 

Thanks!!! 🙌

 

So I had problems with your demo because the SVG had a bunch of transforms on it, so the SVG coordinates don't match up nicely with the label, so I just made my own version. It was a little harder than I initially thought due to way the angles can flip depending on how you drag stuff around.

 

 

 

 

Also, if you want to use the util selector to get an element, you need to do it like this as it returns an array.

 

const triangle = q("#triangle")[0];

 

 

Hi @OSUblake, I successfully incorporated your solution into my project!

 

Quick question, how to scale this animated SVG so that it fits in containers of all sizes?

 

 

[OSUblake 18,538 Likes (Superhero)]

The SVG part is pretty easy, all you have to do is add a viewBox attribute to the SVG. The text part is a little more complicated unless you incorporate the text inside the SVG. If you can't add the text to the SVG, I can make another demo later.

 

[jxy 7 Likes (Newbie)]

On 11/30/2021 at 12:15 AM, OSUblake said:

The SVG part is pretty easy, all you have to do is add a viewBox attribute to the SVG. The text part is a little more complicated unless you incorporate the text inside the SVG. If you can't add the text to the SVG, I can make another demo later.

 

Done! The text isn't hard at all. I replaced <div> with <text> and put them in the <svg>. Thanks!

[OSUblake 18,538 Likes (Superhero)]

Nice! Out of curiosity, where did this come from? I just want to see how their version compared to mine.

 

 

 

[jxy 7 Likes (Newbie)]

16 minutes ago, OSUblake said:

Nice! Out of curiosity, where did this come from? I just want to see how their version compared to mine.

 

 

 

 

https://brilliant.org/courses/geometry-fundamentals/angles-and-lengths/triangle-sides-and-angles/2/

 

I have a paid membership of brilliant.org. Not sure if you can view this content. Let me know if you want a shared account.

 

 

[OSUblake 18,538 Likes (Superhero)]

Ah, nice! Turns out I already had a membership that I totally forgot about.