JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<button>Replay</button> 
<br>
<canvas width="600" height="300"></canvas>

CSS

canvas {
  border: 1px solid #CCC;
}

JavaScript

/**
 * для вопроса https://qna.habr.com/q/1071372
 * Как реализовать следующую анимацию?
 */
const ctx = document.querySelector("canvas")
  .getContext("2d");

ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.fillStyle = "white";
const font = (size) => `bold ${size}px Impact,sans-serif`;
const text = "30";

let a = 0;
const render = () => {
  const angle = (a - 0.1) / 22 * Math.PI;
  const x = 500 - a * 7;
  const y = 160 + Math.cos(angle) * 70;
  ctx.font = font(60 - Math.cos(angle) * 10);
  ctx.strokeText(text, x, y);
  ctx.fillText(text, x, y);
  if (++a < 48) requestAnimationFrame(render);
}

render();

document.querySelector("button")
  .addEventListener("click", () => {
    ctx.clearRect(0, 0, 600, 300);
    a = 0;
    render();
  });