Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jxy

How to drag to change the shape of SVG paths?

Go to solution Solved by OSUblake,

Recommended Posts

I have been trying to achieve something like this: 435341189_Screenshot2021-11-16at12_59_49PM.png.b07ac58bb3065dbb740514b9a5fc9bb6.png

 

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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/

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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 !!

  • Like 1
Link to comment
Share on other sites

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!

 

 

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution
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];

 

  • Like 4
  • Haha 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 2 weeks later...
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?

 

 

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

 

image.png

 

 

Link to comment
Share on other sites

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.

 

image.png

 

 

 

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.

 

 

Link to comment
Share on other sites

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

  • Haha 1
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.
×