Анимация отсчёта SVG - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">

  <text id="portValueNum" font-size="80" x="100" y="120" text-anchor="middle">

    <tspan id="manage">0</tspan>

  </text>

</svg>

body {

  font-family: "Source Sans Pro", sans-serif;

  padding: 0;

  margin: 0;

  overflow: hidden;

  min-height: 100vh;

  background: #262626;

  display: flex;

  justify-content: center;

  align-items: center;

}



text {

  fill:#42a6e0;

  font-weight: bold

}

const target = document.querySelector("#manage");

const count = 100;

const dur = 3;



const tween = gsap.

to({}, { duration: count, onUpdate: changeNumber }).

timeScale(count / dur);



function changeNumber() {

  target.textContent = tween.time().toFixed();

}

//# sourceURL=pen.js