Метод 1: CSS-анимация
CSS-анимация обеспечивает простой и эффективный способ создания динамических кругов SVG. Вы можете определить ключевые кадры и применить их к элементу SVG с помощью классов CSS. Вот пример:

<svg class="dynamic-circle">
  <circle cx="50" cy="50" r="40"></circle>
</svg>
<style>
  .dynamic-circle circle {
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
</style>

Метод 2: JavaScript с манипулированием SVG
Если вам требуется больший контроль над динамическими кругами SVG, вы можете использовать JavaScript для управления свойствами SVG. Вот пример использования библиотеки Snap.svg:

<svg id="dynamic-circle"></svg>
<script src="snap.svg.js"></script>
<script>
  var s = Snap("#dynamic-circle");
  var circle = s.circle(50, 50, 40);
  circle.attr({
    fill: "#FFC107",
    stroke: "#FF9800",
    strokeWidth: 2
  });
  function pulse() {
    circle.animate({ r: 50 }, 1000, mina.easeinout, function() {
      circle.animate({ r: 40 }, 1000, mina.easeinout, pulse);
    });
  }
  pulse();
</script>

Метод 3: анимация SVG SMIL
SVG SMIL (язык синхронизированной интеграции мультимедиа) позволяет определять анимацию непосредственно в разметке SVG. Вот пример:

<svg>
  <circle cx="50" cy="50" r="40">
    <animate attributeName="r" values="40;50;40" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

В этой статье мы рассмотрели три различных метода создания динамических кругов SVG, похожих на круги статусов WhatsApp. Вы можете использовать анимацию CSS для простого подхода, JavaScript с манипуляциями с SVG для большего контроля или анимацию SVG SMIL непосредственно в разметке SVG. Поэкспериментируйте с этими методами и создайте привлекательные динамические круги SVG для своих веб-приложений.