SVG Path: Interactive Editing of Bezier Curves

[michaelsboost]

Examples of what I'm looking to do:  

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

[Cassie]

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.)

[Shrug ¯\_(ツ)_/¯]

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

 

[Cassie]

Ah yeah! George's pen is great!