JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 100 100">
  <defs>
    <linearGradient id="fendTestGrad" x1="52%" y1="52%" x2="48%" y2="48%">
        <animate 
          attributeName="x1" 
          from="0" to=".52"         
          dur="3s" 
          repeatCount="1">          
        </animate>
        <animate 
          attributeName="y1" 
          from="0" to=".52"         
          dur="3s" 
          repeatCount="1">          
        </animate>
        <animate 
          attributeName="x2" 
          from="0" to=".48"         
          dur="3s" 
          repeatCount="1">          
        </animate>
        <animate 
          attributeName="y2" 
          from="0" to=".48"         
          dur="3s" 
          repeatCount="1">          
        </animate>
      
      <stop class="start"></stop>
      <stop class="start"></stop>
      <stop class="end"></stop>
    </linearGradient>
  </defs>
  <text x="50%" y="70">60</text>
</svg>

CSS

svg text {
  font-family: sans-serif;
  text-anchor: middle;
  font-weight: bold;
  font-size: 70px;
  fill: url(#fendTestGrad);
}

#fendTestGrad .start {
  stop-color: #c2c5cc;
}
#fendTestGrad .end {
  stop-color: #8f98a1;
}

svg {
background: linear-gradient(135deg, rgba(73,85,97,1) 0%, rgba(74,88,101,1) 100%);
}