JSFiddle - React, Tailwind, and code Playground

HTML

<!-- https://raw.githubusercontent.com/hugolpz/kanjivg_with_hanzi_addon/master/kanji/07425.svg -->

<svg id="kanjivg" xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109">
<g id="kvg:StrokePaths_07425" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;">
<g id="kvg:07425" kvg:element="琥">
	<g id="kvg:07425-g1" kvg:element="王" kvg:original="玉" kvg:partial="true" kvg:position="left" kvg:radical="general">
		<path id="kvg:07425-s1" kvg:type="㇐" d="M10.6,24.75c0.58,0.37,3.71,0.45,4.29,0.34c2.72-0.5,13.76-2.09,20.28-2.64c0.89-0.07,2.54-0.26,3.28,0.04"/>
		<path id="kvg:07425-s2" kvg:type="㇑a" d="M23.05,27.52c0.93,0.88,1.58,2.78,1.58,3.48c0,5.95,0.05,43.62-0.13,47.57"/>
		<path id="kvg:07425-s3" kvg:type="㇐" d="M11.52,51.44c0.52,0.23,4.16,0.26,4.69,0.21c3.04-0.3,13.37-1.19,17.57-1.52c0.65-0.05,3.01-0.09,3.97,0.11"/>
		<path id="kvg:07425-s4" kvg:type="㇐" d="M10,85.03c1.19,1.18,4.2,0.7,5.04,0.18c5.35-3.26,11.97-8.09,20.12-13.72"/>
	</g>
	<g id="kvg:07425-g2" kvg:element="虎" kvg:position="right">
		<g id="kvg:07425-g3" kvg:element="虍">
			<path id="kvg:07425-s5" kvg:type="㇑a" d="M63.13,10.08c1.04,0.97,1.85,2.1,1.85,5.29c0,6.22-0.02,8.64-0.02,13.87"/>
			<path id="kvg:07425-s6" kvg:type="㇐b" d="M66.65,19.78c4.9-0.81,12.44-1.87,17.41-2.52c1.64-0.21,2.64,0.19,3.47,0.39"/>
			<path id="kvg:07425-s7" kvg:type="㇖a" d="M45.79,29.68c0.61,0.64,1.14,3.03,1.17,5.34C47.25,62.5,45,81.75,31,97.25"/>
			<path id="kvg:07425-s8" kvg:type="㇒" d="M46.94,32.02c11.9-2.02,32.6-3.71,42.77-4.18c12.54-0.59,2.27,6.66-0.4,8.78"/>
			<g id="kvg:07425-g4" kvg:element="七">
				<g id="kvg:07425-g5" kvg:element="一">
					<path id="kvg:07425-s9" kvg:type="㇐" d="M52.89,46.39c0.64,0.2,1.81,0.29,2.44,0.2c6.26-0.9,17.68-2.78,24.56-3.27c1.06-0.08,1.7,0.1,2.23,0.2"/>
				</g>
				<path id="kvg:07425-s10" kvg:type="㇟a"...

CSS

svg { border : 1px solid #88AAEE; }

JavaScript

/* CSS ********************************************************* */
var s = {
    stroke: "stroke:#EEAABB; stroke-width:3px;",
    fill: 'fill: white;',
    text: "font-family:sans-serif;font-size:250px;text-anchor:middle;fill:black;"
};

// margin
var margin = { top: 5, right: 5, bottom: 5, left: 5 };
var width = 310 - margin.left - margin.right,
    height = 310 - margin.top - margin.bottom;

/* Kanjivg ************************************************** */
// Scale up:
var kj = d3.select("#kanjivg");
    kj.attr({"width":width,"height":height})
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("viewBox","0 0 109 109");

// Animate strokes function
var animateSO = function(code, i){
d3.select("#kvg\\:StrokePaths_"+code)
    .attr("style","fill:none;stroke:#CCC;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;");
var id = "#kvg\\:"+code+"-s"+i,
    next=i+1;
var path = d3.select(id), 
    trace = path.attr("d"),
    totalLength = Math.ceil( path.node().getTotalLength() );
    console.log("i: "+i+" ; id: "+id+" ; lenght: "+totalLength+"; i++: "+next);
var copy = kj.append("g").attr("id","temp"+code)
    .append("path")
.attr("style", "stroke:#000;")
    .attr("style","fill:none;stroke:#111;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;")
    .attr("d", trace)
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
  .transition()
.duration(totalLength>30?totalLength*20:30*20)
    .ease("sin")
    .attr("stroke-dashoffset", 0)
    .each("end", function() { animateSO(code, next) });
}

d3.select("#temp"+"07425").remove();
animateSO("07425", 1);

/* SQUARE & STATIC ********************************************************* */
// SVG injection:
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" +...