SVG - Animated Text Path

Simple SVG Fiddle illustrating how to animate text using a fixed path.

HTML

<svg id="canvas" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="300px" preserveAspectRatio="none">
    <defs>
        <pattern id="gridPattern" width="10" height="10" patternUnits="userSpaceOnUse">
            <path d="M10 0 L0 0 L0 10" fill='none' stroke='black' stroke-width='0.25'></path>
        </pattern>
    </defs>
    <g id="layer1">
        <rect id="grid" width="100%" height="100%" x="0" y="0" stroke='gray' stroke-width='0.25' fill='url(#gridPattern)'></rect>
    </g>
    <path id="curve" d="M10,400 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25" fill="none" stroke="red" stroke-width="1">
    </path>
     <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
    <text font-family="courier" font-size="16" fill="black">
        <textPath xlink:href="#curve">pora pandipora pandipora pandipora pandi</textPath>
        <animate attributeName="font-size" dur="10s" values="8;45" repeatCount="indefinite"></animate>
    </text>
</svg>

JavaScript

$(document).ready(function () {
    $('#canvas').height(window.innerHeight);
});