SVG.Text

by Alvin Olavarrieta

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>

JavaScript

var draw = SVG().addTo('body').size(500, 50)

var text = draw.text('I know that eggs do well to stay out of frying pans.')
text.move(20,20).font({ fill: '#f06', family: 'Inconsolata' })


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)
})

var path = 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100'

var textpath = text.path(path).font({ size: 42.5, family: 'Verdana' })