profile_name.svg

<svg fill="none" viewBox="0 0 1280 200" width="1280" height="200" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">

            <style>
                *{
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: 'Poppins', sans-serif;
                }
                body{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-height: 100vh;
                    background: none;
                }
                h2{
                    position: relative;
                    font-size: 15vw;
                    background: #2f2f62;
                    color: white;
                    -webkit-text-stroke: 0.3vw #383d52;
                    text-transform: uppercase;
                }
                h2::before{
                    content: attr(data-text);
                    position: absolute;
                    background: #2f2f62;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    color: white;
                    -webkit-text-stroke: 0.3vw #383d52;
                    border-right: 2px solid #01fe87;
                    overflow: hidden;
                    animation: animate 6s linear infinite;
                }
                @keyframes animate{
                    0%,10%,100%{
                        width: 0;
                    }
                    70%,90%{
                        width: 100%;
                    }
                }
            </style>
            <h2 data-text="_CHARLES_OKHIDE_TONYE_____">___________OLPC__TONYE_____</h2>
        </div>
    </foreignObject>
</svg>