Path Transforms Demo

Below is an example of each of the transforms that can be applied to a path. These are the standard 2D transform functions and work similarly to CSS3 tranforms. Each function takes an optional origin that can be a point, percentage that refers to a point on the path (ie 25% is a 1/4 of the way along the path), or a text representation of a point on the path (start, middle, end). In this example, the center of the rectangle's bounding box is the default origin. That point is plotted with a green dot to indicate the point the transform is processed around.
Origin:
Angle: A:
Distance: X: Y:
Size: X: Y:
Angle: X: Y: