WPF xaml orbit animation not maintaining path - wpf

Question

I am trying to create three paths (orbital paths) and get three ellipses (planets, rings) to travel along them, I have followed a few different blogs and forum posts but I cannot see why the ellipses are not travelling on the path.
Here is the xaml:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ResizeMode="NoResize"
Title="Window2" Width="800" Height="600">
<Window.Resources>
<PathGeometry x:Key="smallGeo" Figures="M 400,250C 427.614,250 450,272.386 450,300C 450,327.614 427.614,350 400,350C 372.386,350 350,327.614 350,300C 350,272.386 372.386,250 400,250"/>
<PathGeometry x:Key="mediumGeo" Figures="M 400,245C 430.376,245 455,269.624 455,300C 455,330.376 430.376,355 400,355C 369.624,355 345,330.376 345,300C 345,269.624 369.624,245 400,245"/>
<PathGeometry x:Key="largeGeo" Figures="M 400,240C 433.137,240 460,266.863 460,300C 460,333.137 433.137,360 400,360C 366.863,360 340,333.137 340,300C 340,266.863 366.863,240 400,240"/>
</Window.Resources>
<Grid Width="800" Height="600" HorizontalAlignment="Center" VerticalAlignment="Center">
<Canvas>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Small orbit animation -->
<DoubleAnimationUsingPath
Storyboard.TargetName="smallEllipse"
Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{StaticResource smallGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="X"/>
<DoubleAnimationUsingPath
Storyboard.TargetName="smallEllipse"
Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource smallGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="Y"/>
<!-- Medium orbit animation -->
<DoubleAnimationUsingPath
Storyboard.TargetName="mediumEllipse"
Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{StaticResource mediumGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="X"/>
<DoubleAnimationUsingPath
Storyboard.TargetName="mediumEllipse"
Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource mediumGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="Y"/>
<!-- Large orbit animation -->
<DoubleAnimationUsingPath
Storyboard.TargetName="largeEllipse"
Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{StaticResource largeGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="X"/>
<DoubleAnimationUsingPath
Storyboard.TargetName="largeEllipse"
Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource largeGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="Y"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Ellipse x:Name="smallEllipse" Height="20" Stroke="Green" StrokeThickness="5" Width="20" RenderTransformOrigin="0.5,0.5"/>
<Ellipse x:Name="mediumEllipse" Height="40" Stroke="Red" StrokeThickness="5" Width="40" RenderTransformOrigin="0.5,0.5"/>
<Ellipse x:Name="largeEllipse" Height="60" Stroke="Blue" StrokeThickness="5" Width="60" RenderTransformOrigin="0.5,0.5"/>
<Path Stroke="Green" Data="{StaticResource smallGeo}"/>
<Path Stroke="Red" Data="{StaticResource mediumGeo}"/>
<Path Stroke="Blue" Data="{StaticResource largeGeo}"/>
</Canvas>
</Grid>
I used MS expression design to create the paths and kaxaml to preview the xaml.

Answer 1

I suspect that the Animation is not taking into account the Size of the Ellipse as its animating using the Top/Left of the Ellipse not the center of the Ellipse
One way around this would be to set the Margin of the Ellipse to negative half of the Size
Example:
<Ellipse x:Name="smallEllipse" Margin="-10" Height="20" Width="20" ......./>
<Ellipse x:Name="mediumEllipse" Margin="-20" Height="40" Width="40" ......./>
<Ellipse x:Name="largeEllipse" Margin="-30" Height="60" Width="60" ......../>
Result:
Before: After :