Chasing Circles Xaml Vector Example

ChasingCircles.Xaml

    <Window.Resources>
        <!--Vector Image Attribution: https://materialdesignicons.com/-->
        <Path x:Key="ChasingCircles" Data="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z" />
        <Style x:Key="ChasingCircleStyle"
               TargetType="{x:Type Path}">
            <Setter Property="Stretch"
                    Value="Uniform" />
            <Setter Property="Data"
                    Value="{Binding Data, Source={StaticResource ChasingCircles}}" />
        </Style>
        <Storyboard x:Key="ChaseRotate" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="path">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource ChaseRotate}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Path x:Name="path" Style="{StaticResource ChasingCircleStyle}" Fill="Blue" Height="100"
              Width="100" RenderTransformOrigin=".5,.5">
            <Path.RenderTransform>
                <TransformGroup>
                    <RotateTransform/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
    </Grid>