jQuery Path Bezier Curve Generator

The excellent jQuery.Path allows you to create custom pathing when using the jQuery animate function. Bezier curves are especially interesting, because they allow you to move an object along almost any conceivable path (especially when chaining animations together).

The demo of jquery.Path is here.

To create a bezier path, you just supply the necessary parameters.

From the documentation on Github:

                                    
    var bezier_params = {
        start: {
            x: 185,
            y: 185,
            angle: 10
        },
        end: {
            x:540,
            y:110,
            angle: -10,
            length: 0.25
        }
    };

    $("my_elem").animate({path : new $.path.bezier(bezier_params)});
                                

Bezier curves are made form a start point, an end point each with a control point

  • start is starting point
  • end is the final point
  • x,y indicate the coordinates at that point. Required
  • angle is the angle of the control point from the line joining the start and end. Optional, default is 0
  • length is the distance from the point to it's control point as a ratio of the distance from start to end. Optional, default is 1/3

Unfortunately, visualizing and creating the parameters to use with the plugin has been difficult. However, with the tool below, you can create any path you like and it will give you the needed parameters. You can click and drag the path below to create a custom path.

  • The top left red circle controls the start point.
  • The bottom right red circle controls the end point.
  • The top right blue circle controls the control point for the start point.
  • The bottom left blue circle controls the control point for the end point.

Whoops! Your browser must support HTML5 Canvas for this tool to work.

Please get a new browser here.

The code below is dynamically updated to give you the custom parameters.

The path for this curve is:

                                        

Try out your own parameters here. Have fun!