Text path in svg.js

by boulabiar

HTML

<div id="canvas"></div>

JavaScript

/* create canvas */
var draw = SVG('canvas').size(400,400).viewbox(0, 0, 1000, 1000)

/* create text */
var text = draw.text(function(add) {
  add.tspan('We go ')
  add.tspan('up').fill('#f09').dy(-40)
  add.tspan(', then we go down, then up again').dy(40)
})
text.font({ size: 42.5, family: 'Verdana' })

/* add path to text */
text.path('M 100 400 C 200 300 300 200 400 300 C 500 400 600 500 700 400 C 800 300 900 300 900 300')

/* visualise track */
draw.use(text.track).attr({ fill: 'none', 'stroke-width': 5, stroke: '#f09' })

/* move text to the end of the path */
function up() {
    text.textPath.animate(3000).attr('startOffset', '50%').after(down)
}

/* move text to the beginning of the path */
function down() {
    text.textPath.animate(3000).attr('startOffset', '0%').after(up)  
}

/* start animation */
up()