I'm working on a code snippet that adds letters along a path to create a typing effect. However, I want the last part of the text "It's our jam" to be displayed in a different font compared to the rest, as shown in the image at the bottom. Is there a way to achieve this? I've been experimenting with adding a class dynamically, but it modifies the entire tspan, and I can't figure out if it's possible to add a second tspan or something 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 desired effect I am aiming for (ignoring the cheesy part): https://i.sstatic.net/oLYl0.png