JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<svg>

</svg>

JavaScript

var text_node = d3.select('svg');

createTSpan(text_node, 'Flying', '0.2em', '1.9em', 'red');
createTSpan(text_node, 'house', '0.2em', '3.9em', 'green');


function createTSpan(node, txt, dx, dy, f) {
  return node.append('text')
    .text(txt)
    .attr('x', dx)
    .attr('y', dy)
    .attr('fill', f)
    .transition()
    .delay(3000)
    .duration(3000)
    .ease(d3.easeLinear)
    .attr('fill', 'blue')
    .on('start', function() {
      d3.active(this)
        .style('outline', 0)
        .transition()
        .ease(d3.easeLinear)
        .style('outline', '1px solid grey')
    });
}