JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<html>
<head>
<title>SPlash screen</title>
<style>
body{
    background-color: darkslategray;
}
svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 550px;
}
svg text{
    font-size:  300px;
    fill: rgba(0,0,0,.1);
    stroke-width: 4px;
    stroke:aliceblue;
    stroke-linejoin: round;
    animation: animate 40s linear infinite;
    stroke-dasharray: 500;
}

svg text2{
    font-size:  300px;
    fill: rgba(0,0,0,.1);
    stroke-width: 4px;
    stroke:aliceblue;
    stroke-linejoin: round;
    animation: animate 40s linear infinite;
    stroke-dasharray: 500;
}

@keyframes animate {
    100%{
        stroke-dashoffset: 760;
    }
    
}
</style>
</head>
<body>
    <svg>
        <symbol id="text">
            <text text-anchor="middle" x="50%" y="50%">4</text>
        </symbol>
        <use xlink:href="#text"></use>
    </svg>
    
    <svg>
        <symbol id="text2">
            <text text-anchor="middle" x="50%" y="50%">0</text>
        </symbol>
        <use xlink:href="#text"></use>
    </svg>
</body>
</html>