JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="362" height="362" style="shape-rendering: auto; display: block; background: rgb(255, 255, 255);" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle cx="50" cy="50" r="0" fill="none" stroke="#e41010" stroke-width="5">
  <animate attributeName="r" repeatCount="indefinite" dur="1.3157894736842106s" values="0;40" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="0s"></animate>
  <animate attributeName="opacity" repeatCount="indefinite" dur="1.3157894736842106s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="0s"></animate>
</circle><circle cx="50" cy="50" r="0" fill="none" stroke="#080808" stroke-width="5">
  <animate attributeName="r" repeatCount="indefinite" dur="1.3157894736842106s" values="0;40" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.6578947368421053s"></animate>
  <animate attributeName="opacity" repeatCount="indefinite" dur="1.3157894736842106s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.6578947368421053s"></animate>
</circle><g></g></g><!-- [ldio] generated by https://loading.io --></svg>