JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="logo-mirai" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					       viewBox="0 0 530 150" style="enable-background:new 0 0 530 150;" xml:space="preserve">
					    <g fill="#fff">
					      <path class="anima-escrito" d="M141.4,15.5L141.4,15.5c13.4,0,25.5,4.9,34.3,12.9C184.4,36.2,189.8,47,190,59h0v73.5h-19.4V59h0
					        c-0.1-7.1-3.4-13.5-8.6-18.2c-5.3-4.8-12.6-7.8-20.6-7.8h0h0c-8,0-15.3,3-20.6,7.8c-5.2,4.7-8.4,11.1-8.6,18.2h0v73.5H92.9V59h0
					        c-0.1-7.1-3.4-13.5-8.6-18.2C79,35.9,71.7,33,63.6,32.9h0h0c-8,0-15.3,3-20.6,7.8c-5.2,4.7-8.5,11.2-8.6,18.3h0v73.4H15V59h0.1
					        c0.1-11.9,5.6-22.7,14.2-30.6c8.8-8,20.9-12.9,34.3-12.9h0h0c13.4,0,25.5,4.9,34.3,12.9c1.6,1.5,3.2,3.1,4.6,4.8
					        c1.4-1.7,2.9-3.3,4.6-4.8C115.9,20.4,128,15.5,141.4,15.5L141.4,15.5z"/>
					      <rect x="226" y="18.1" class="anima-escrito" width="20.1" height="114.4"/>
					      <path class="anima-escrito" d="M352.8,35.8c-14.7-2.9-49.9-3.3-49.5,15.4l0,14.4l0.2,66.5v0.2h-20.7V98.7h0.2l-0.1-49.4
					        c-0.1-34.5,49.4-36.1,73.7-31.8L352.8,35.8z"/>
					      <path class="anima-escrito" d="M384,17.5l3.7,18.3c14.7-2.9,49.9-3.4,49.5,15.5l0,12.7l-36.7,1c-34.8,1-41.9,46-17.6,62.3
					        c12.1,8.2,34.8,9.8,52,2.6v0.2h22.6c0-26.9,0.1-53.5,0.1-80.5C457.8,14.8,408.2,13.1,384,17.5z M436.8,101.1
					        c0,19.2-32.5,18.7-42,8.7c-9.7-10.2-6.2-29,12.7-29.9l29.3-0.1V101.1z"/>
					      <rect x="494.9" y="18.1" class="anima-escrito" width="20.1" height="114.4"/>
					      
					    </g>
					    </svg>

CSS

body {
  background:#000000;
}

#logo-mirai {
	left:50%;
    top:50%;
    margin-top: -148px;
    max-width: 1045px;
    margin-left: -522.5px;
    position: absolute;
    
}

#logo-mirai path:nth-child(1) {
    stroke: #fff;
    fill: #fff;
    fill-opacity: 0;
    stroke-width: 1;
    stroke-dasharray: 904.9165649414062;
    stroke-dashoffset: 904.9165649414062;
    
}

#logo-mirai rect:nth-child(2) {
    stroke: #fff;
    fill: #fff;
    fill-opacity: 0;
    stroke-width: 1;
    stroke-dasharray: 269;
    stroke-dashoffset: 269;
}

#logo-mirai path:nth-child(3) {
    stroke: #fff;
    fill: #fff;
    fill-opacity: 0;
    stroke-width: 1;
    stroke-dasharray: 352.52484130859375;
    stroke-dashoffset: 352.52484130859375;
}


#logo-mirai path:nth-child(4) {
    stroke: #fff;
    fill: #fff;
    fill-opacity: 0;
    stroke-width: 1;
    stroke-dasharray: 603.7017211914062;
    stroke-dashoffset: 603.7017211914062;
    
}


#logo-mirai rect:nth-child(5) {
    stroke: #fff;
    fill: #fff;
    fill-opacity: 0;
    stroke-width: 1;
    stroke-dasharray: 269;
    stroke-dashoffset: 269;
}

.anima-escrito {
	animation: draw 2.6s 0s forwards 1 linear, preenche .5s 2.6s forwards 1 linear, some .5s 3.6s forwards 1 linear;
}

@keyframes draw {
    to {
       stroke-dashoffset: 0;
    }
}

@keyframes preenche {
	to {
		fill-opacity: 1;
	}
}

@keyframes some {
	to {
		opacity: 0;
	}
}