how to create dynamic svg like whatsapp status circle

The solution for this is noted below

Solution

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" fill="none" stroke="green" stroke-width="4" stroke-dasharray="150 2" stroke-dashoffset="-2"/>
  </svg>
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" fill="none" stroke="green" stroke-width="4" stroke-dasharray="100 2" stroke-dashoffset="-2"/>
</svg>
 Run code snippet

Try other methods by searching on the site. That is if this doesn’t work