Jump to content
Search Community

Animating Quadratic Bezier Curve Drawn in Canvas

adityanithariya test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

  • Solution

Hi @adityanithariya and welcome to the GreenSock forums!


There is not a super easy way to animate the paths using the bezier curve methods the Canvas API has.


This approach from @OSUblake (GSAP's canvas/WebGL wizard) is far simpler:

See the Pen GjYpPM by osublake (@osublake) on CodePen


These are the keys to this:




It requires to get the path as an SVG path data, but that should be far simpler than creating this using the quadraticCurveTo() method.


Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites



Any SVG editor could do that. Keep in mind that a quadratic bezier has one control point for each point you add:

quadraticCurveTo(cpx, cpy, x, y)

In SVG quadratic curves are drawn in a different way but is not that complicated though:



You can use this library:



Here are a couple of options as well:




Finally in order to get everything working as expected I normally use this to make sure that the paths are OK:



Finally @Carl made a video about Boxy SVG:

Hopefully this helps.

Happy Tweening!


  • Like 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.
  • Create New...