Home :: GUI :: Utilities

  1. Introduction
  2. Reference
    1. Methods
      1. constructor
      2. create
      3. advance
      4. show_paths
      5. hide_paths
      6. toString
    2. Properties
      1. prefix
      2. paths
      3. shape
      4. min
      5. max
      6. delta
      7. position
  3. Use
    1. Loading Morphius into Your SVG Document
    2. Creating a new Morphius Object
    3. Showing the Control Paths
    4. Hiding the Control Paths
    5. Advancing
    6. Example
  4. Download


Morphius uses the concepts from the Drawing a Bezier Tutorial to animate various points of a path. Morphius allows the user to create a combination of template path along with Bezier paths. The template has placeholders which are filled by moving along various user-defined Bezier paths.

Please note that the final example is rather weak. I plan on using a better example in the future as I have time. It is important to note that a path of any complexity can be defined in the template, not just a single segment as used in the example.



constructor - new Morphius(template, paths);








Loading Morphius into Your SVG document

In order to use the Morphius object in your SVG file, you will need to insert a <script> element inside of your <svg> element. Morphius directly uses Node_Builder, and needs Scheduler and Bezier_Curve to be useful. You will need to include these objects in script statements also. As an example, if Morphius.js is in the same directory as your SVG document, then you would include the Morphius object with the following text:

Creating a new Morphius object

In order to create a Morphius object, you need to define two parameters: a template and an array of paths. A template is simply the text you would normally use in a <path> element with each point that is controlled by a path replaced with a pound sign. For example, if you have the following path data:

M10,10 C50,10 50,20 50,50

and you want to define a path for the first point (10,10 in this example), then you would create a template as follows:

M# C50,10 50,20 50,50

Next, you need to define a path for each pound sign in the template. Currently, paths are defined using Bezier_Curves. When creating a Bezier_Curve, you pass the new object 4 points, one for the four control points for a single segment of a Bezier curve. For example, if I want to create a path equivalent to this SVG definition:

M10,10 10,10 10,100 10,100

I would use the following code:

new Bezier_Curve(10,10, 10,10, 10,100, 10,100);

The second parameter of the Morphius contructor is an array. This allows you to define multiple paths to control multiple points in your template. Be sure to list the paths in the same order as the pound signs they control. The following example controls the first and last points of a single segment of a path:

morphius = new Morphius(
"M# C50,10 50,20 #",
new Bezier_Curve(10,10, 10,50, 50,50, 100,50),
new Bezier_Curve(50,50, 50,100, 0,100, 0,50)

The first Bezier_Curve object defines a path for the M# point to follow. The second Bezier_Curve object defines a path for the final # point to follow.

Showing the Control Paths

To see the curves which are defined by the controlling Bezier_Curve objects, use the following code. This assumes that a Morphius object has been assigned to the morphius variable:


Hiding the Control Paths

To hide the controlling Bezier_Curve objects shown with show_paths(), use the following code. This assumes that a Morphius object has been assigned to the morphius variable:



To move to the next point along each controlling Bezier_Curve, call advance:



The following example uses Scheduler, Node_Builder and Morphius to animate a single segment of a <path> element. This animation moves the first, second, and fourth control points with three Bezier_Curve objects. To see these paths, click show. Hide will hide the paths.

Right-click (or control-click) and View Source to see the complete details of this SVG file.