JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <text class="path" xml:space="preserve" text-anchor="middle" font-family="pharmount" font-size="100" id="svg_1" y="230" x="300" stroke-width="2" stroke="#000000" fill="#000000">Martavis Parker</text>

    </svg>

CSS

@font-face {   
    font-family: 'pharmount';    
    src: url('https://dl.dropboxusercontent.com/u/38807507/pharmount.ttf'); 
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 5s 0.5s linear alternate both;
    font-family: pharmount;
}

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 1000;
    fill-opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}