Jump to content
GreenSock

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

SVG Path: Interactive Editing of Bezier Curves

Recommended Posts

Examples of what I'm looking to do: enter image description here enter image description here

I've been looking for a tool to manipulate a loaded svg path and polygon as I can use Snap.svg Free Transform for resizing and rotating.

 

Well I couldn't find a library besides Paper.js that allows me to have interactive editing of Bezier curves however I don't want to work with canvas at all JUST SVG and I couldn't find anything for the SVG element.

 

I'm still super confused as all I can find via Codepen and Github are demos in which the svg objects are inline HTML and the Javascript is targeting the inline HTML that wasn't dynamically added. Such as this following Codepen demo - 

 

I know there are libraries like Vector.js, Snap.svg or SVG.js that I maybe able to use. However while reading up on the API's I know SVGGeometryElement has a method getPointAtLength() which returns the point at a given distance along the path.

 

My question is first is there a js library that allows me to have interactive editing of Bezier curves both fill and stroke? If so where and is there a demo to help me understand how to use it? If there isn't based upon what I want to do which is to to ONLY work with SVG what library of the 3 is the best and why?

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

Link to comment
Share on other sites

Hey there @michaelsboost

GSAP actually has an editPath helper - maybe that'll be helpful to you?

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



In terms of which other tool/library we'd recommend - I'm afraid that's a little out of the scope of these forums. We try to stick to GSAP specific questions here.

I actually have a little SVG slack channel - maybe someone in there would have some advice for you?

(Obviously anyone else is free to jump in if they have recommendations.)

  • Like 4
Link to comment
Share on other sites

You may like this thread

 

Specifically .. 

On 3/21/2021 at 2:46 AM, GreenSock said:

updated MotionPathHelper to better handle closed paths

See the Pen 8fcb337385d0f1e401a66f260cf73e76 by GreenSock (@GreenSock) on CodePen

 

You might be also able to use some logic from the below example that uses GSAP, Draggable, SVG.js and Spline.

See the Pen ExNpqJP by georgedoescode (@georgedoescode) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Ah yeah! George's pen is great!

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.

×