The path-based animations use a PathGeometry as a path to create the animation. In our example, we defined it under the Window.Resources tag as an animationPath, which represents the path in a 2D interface as a collection of coordinate points. See the following code snippet:
<PathGeometry x:Key="animationPath">
<PathFigure IsClosed="True"
StartPoint="100,100">
<PolyLineSegment Points="150,150 400,200 300,50 200,200 100,100 400,100 50,50 400,150 100,250, 100,50" />
</PathFigure>
</PathGeometry>
The DoubleAnimationUsingPath that we used in our storyboard animation uses Canvas.Left and Canvas.Top as the target properties to animate along the X and Y axes. When the Storyboard plays, the target element moves from one coordinate point to another, having a smooth animation between the two points.