svg animateMotion

dabblet.css

/* svg animateMotion */
#talk {
	fill: white;
	stroke: orange;
	stroke-width: 3;
}
#ball {
	fill: url(#blueGradient);
}

dabblet.html

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
  	<defs>
  		<radialGradient id="blueGradient" gradientUnits="userSpaceOnUse"
  			cx="0" cy="0" r="10" fx="0" fy="0">
  			<stop offset="0%" stop-color="yellow" />
  			<stop offset="100%" stop-color="orange" />
  		</radialGradient>
  	</defs>
  	
   	<path id="talk" d="m 81.899736,41.045969 c -28.196415,0 -51.035199,22.838784 -51.035199,51.035202 0,28.196419 22.838784,51.035199 51.035199,51.035199 26.812384,0 48.756264,-20.68593 50.849954,-46.959793 l 13.52295,-1.204097 -11.39261,-16.209003 -10.4664,-14.912282 -0.18524,-0.27772 C 123.99542,63.208888 123.72834,62.873163 123.4874,62.534623 114.23339,49.531498 99.075336,41.046117 81.899736,41.046117 z" />
   		
   	<circle id="ball" cx="0" cy="0" r="10">
   		<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
   			<mpath xlink:href="#talk" />
   		</animateMotion>
    </circle>
  </svg>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}