<!DOCTYPE html>
<
html
>
<
body
>
<
div
style="color: green;
margin-left: 40px;">
<
h1
>GeeksforGeeks</
h1
>
<
h4
style
=
"color: black;"
>
When rotate = auto-reverse & 200
</
h4
>
<
svg
width
=
"600"
height
=
"120"
viewBox
=
"50 0 480 120"
<
g
>
<
path
d="M10,110 A120,120 -45 0,
1 110 10 A120,120 -45 0,
1 10,110"
stroke
=
"green"
stroke-width
=
"2"
fill
=
"none"
id
=
"geek"
/>
<
path
fill
=
"blue"
d
=
"M-5,-5 L10,0 -5,5 0,0 Z"
>
<
animateMotion
dur
=
"6s"
repeatCount
=
"indefinite"
rotate
=
"auto-reverse"
>
<
mpath
href
=
"#geek"
/>
</
animateMotion
>
</
path
>
</
g
>
<
g
transform
=
"translate(100, 0)"
>
<
path
d="M10,110 A120,120 -45 0,
1 110 10 A120,120 -45 0,
1 10,110"
stroke
=
"green"
stroke-width
=
"2"
fill
=
"none"
id
=
"geek"
/>
<
path
fill
=
"black"
d
=
"M-5,-5 L10,0 -5,5 0,0 Z"
>
<
animateMotion
dur
=
"6s"
repeatCount
=
"indefinite"
rotate
=
"200"
>
<
mpath
href
=
"#geek"
/>
</
animateMotion
>
</
path
>
</
g
>
</
svg
>
</
div
>
</
body
>
</
html
>