<main class="text-container">
    <svg class="text-stroke" >
        <text class="text" style="
    transform: translate(100%,100%);
">אלופה</text>
    </svg>
</main>
<style>
.text-stroke {
    font-size: 192px;
    letter-spacing: 4px;
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-dasharray: 100%;
    stroke-dashoffset: 100%;
    animation: textAnimation 10000ms linear both;
	animation-iteration-count: infinite;
	width: 100%;
}


@keyframes textAnimation {
    0% {
        stroke-dasharray: 100%;
        stroke-dashoffset: 100%;
        fill: #0000;
    }
    95% {
        stroke-dasharray: 0%;
        stroke-dashoffset: 90%;
        fill: #0000;
    }
    100% {
        stroke-dasharray: 0%;
        stroke-dashoffset: 0%;
        fill: #eeeeee;
        filter: drop-shadow(2px 2px 10px #0007);
    }
}    
</style>