<svg class="test1" viewBox="0,0,600,400" xmlns="http://www.w3.org/2000/svg">
        <path d="M24.5,284c0,0,57.8-84.6,170.2-95.9c112.4-11.2,95.8,61.2,181.5,52.6S488.9,137.6,575.5,129" stroke="none" fill="none" id="path1"></path>
        <text>
        <textPath href="#path1">SVG textPathを使って波状テキストを描いていく</textPath>
        </text>
</svg>

<svg class="test2" viewBox="0,0,600,400" xmlns="http://www.w3.org/2000/svg">
        <path d="M311.6,56c74.4,5.9,132.9,68.1,132.9,144c0,79.8-64.7,144.5-144.5,144.5S155.5,279.8,155.5,200
  S220.2,55.5,300,55.5" stroke="none" fill="none" id="path2"></path>
        <text>
        <textPath href="#path2">SVG textPathを使って波状テキストを描いていく</textPath>
        </text>
</svg>

svg.test1{
  margin:0 auto 20px;
  display:block;
  max-width:600px;
  font-size:24px;
  background-color:white;
  letter-spacing:3px;
}

svg.test2{
  margin:0 auto;
  display:block;
  max-width:600px;
  font-size:28px;
  background-color:white;
  letter-spacing:5px;
}

body{background-color:#f1f1f1;}