How can I change the font of when typing along a SVG path using JS/CSS/SVG.JS?

  css, javascript, svg, svg.js

I have the following code which adds letters along a path to simulate a typing effect. However, I want the last bit of text "It’s our jam" to be a different font to the first as per the image at the bottom. Is there a way to do this? I have been trying to add a class dynamically, but it updates the entire tspan, and I cannot work out if it is possible to add a second tspan or similar?

var input = "";
var draw = SVG().addTo("#drawing").viewbox(0, 0, 300, 140);
var text = draw.text(function (add) {
  add.tspan(input).attr("class", "title");
});

const stringToType =
  "Great design is not just our bread + butter ... it's our jam";

textPath = text.path(
  "M 10 20 C 23 15 45 12 64 20 C 99 36 96 48 135 57 C 172 65 188 61 204 58 L 204 58"
);

var count = 0;

var paused = 0;
var secondPause = 0;
var complete = false;
var restart = false;

var newInput = "";

var timer = setInterval(function () {
  if (!paused) {
    var textToAdd = stringToType[count];

    newInput = newInput + textToAdd;
    textPath.tspan(newInput).attr("class", "title");

    count++;
    if (count === stringToType.length) {
      paused++;
    }
  } else {
    clearInterval(timer);
  }
}, 100);
body {
  font-size: 8px;
}
<div id="drawing"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"></script>

The effect I am trying to achieve (ignore the cheesy bit):
enter image description here

Source: Ask Javascript Questions

LEAVE A COMMENT