Looping SVG text

index.html

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" x="0px" y="0px" viewBox="-220 280 171 233" style="enable-background:new -220 280 171 233;" xml:space="preserve">
<style type="text/css">
	#raio{fill:none;stroke:none;}
</style>
<g>
	<path id="raio" class="st0" d="M-156.3,491.4l4.3-86.6c0.2-3.4-2.6-6.3-6-6.3h-42.9c-1.9,0-3.3-1.7-2.9-3.6l18.6-97.5c0.3-1.4,1.5-2.4,2.9-2.4
		l110.5-1.9c2,0,3.5,1.9,2.9,3.8l-23.8,88.4c-1,3.6,1.6,7.3,5.3,7.5l16.9,1.3c2.5,0.2,3.7,3.1,2,5l-82.6,94.5
		C-152.9,495.6-156.4,494.2-156.3,491.4l4.3-86.6c0.2-3.4-2.6-6.3-6-6.3h-42.9c-1.9,0-3.3-1.7-2.9-3.6l18.6-97.5
		c0.3-1.4,1.5-2.4,2.9-2.4l110.5-1.9c2,0,3.5,1.9,2.9,3.8l-23.8,88.4c-1,3.6,1.6,7.3,5.3,7.5l16.9,1.3c2.5,0.2,3.7,3.1,2,5
		l-82.6,94.5C-152.9,495.6-156.4,494.2-156.3,491.4z"/>
</g>
<text font-size="10" font-weight="bold">
	<textPath xlink:href="#raio">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		<animate attributeName="startOffset" from="0%" to="50%" dur="30s" repeatCount="indefinite"/>
	</textPath>
</text>
</svg>

looping-svg-text.markdown

Looping SVG text

Infinitely looping text in svg path by drawing the path twice and moving the text only halfway before resetting.

A Pen by Theo on CodePen.

License.