JSFiddle - React, Tailwind, and code Playground

by Ibrahim Tanyalcin

HTML

<svg width="800" height="800"></svg>

CSS

svg text {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: subpixel-antialiased;
}

JavaScript

const svg = d3.select("svg");

const addGroup = (initialScale, next) => {
	// Add the scaled group that we're going to transition
    const group = svg
    	.append("g")
        .attr("transform", "scale(" + initialScale +")");
        
    const text = group
    	.append("text")
        .text("someText");
    	 
   console.log("===== Starting: " + initialScale + " =====");
    group
    	.transition()
        .on("end", () => {
        	console.log("===== Finished: " + initialScale + " =====");
        	if (next) next();
        })
    	.duration(2000)
        .tween("trnfrm", function(){ var that = this; return function(t){
            var matrix = that.ownerSVGElement.createSVGMatrix();
            var _t = Math.round(t*100)/100;
            matrix.a = _t;
            matrix.d = _t;
            var baseVal = that.transform.baseVal;
            baseVal.initialize(baseVal.createSVGTransformFromMatrix(matrix));
        }})
        .tween("log", () => (t) => { 
        	const node = text.node();
        	console.log(`scale: ${group.attr("transform")}, computedTextLength: ${node.getComputedTextLength()}, width: ${node.getBBox().width}, height:${node.getBBox().height}`);
        })
               
};

addGroup(0, 
	() => addGroup(0.001,
    	() => addGroup(0.002,
        	() => addGroup(0.01)
        )
    )
);