<svg width="400" height="300">

  <path id="animateMotionTarget" d="M134.18,197.89c-35.12,13.45-67.4,4.07-78.85,0C41,192.81,11,182.13,7.14,158.46c-3-18.51,11.81-33.72,13.14-35,14.91-14.85,35.93-13.9,52.57-13.14,9.82.44,34.25,1.55,57,17.52,34.31,24.14,25.91,55,52.57,65.71,20.53,8.28,51.33.42,65.71-21.9,10.24-15.91,12.47-39.68,0-57-15.76-21.83-50.16-26.61-65.71-13.15-5.6,4.85-10.6,13.66-8.76,21.91,3.08,13.85,24.34,21,39.42,21.9,29.49,1.7,37.73-20.62,74.48-35,26.76-10.51,77.15-20.15,96.37,4.38,13.12,16.73,9.51,46.53-4.38,65.71-3.27,4.52-13.34,17-30.66,21.9-18.32,5.13-34.08-1.29-52.57-8.76-88.69-35.8-95.63-37.12-105.14-35C165.12,164.14,169.42,184.39,134.18,197.89Z"/>

  <circle cx="" cy="" r="10" fill="skyblue">
    <!-- Define the motion path animation -->
    <animateMotion dur="15s" repeatCount="indefinite">
      <mpath xlink:href="#animateMotionTarget"/>
    </animateMotion>
  </circle>
</svg>
svg {
	display: block;
	margin: 0 auto;
	path {
		width: 100%;
		stroke: gray;
		fill: none;
		stroke-width: 5px;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.