animated svg radial gradient

by phloe

HTML

<svg viewBox="0 0 192 192"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="96" cy="96" stroke="currentColor" stroke-width="20" r="0" fill="transparent">
      <animate
        attributeName="r"
        values="0; 0; 0; 20; 10; 31"
        keyTimes="0; 0.1; 0.2; 0.59; 0.59; 1"
        keySplines="0.42 0 1 1; 0 0 0.58 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1"
        dur="4s"
        repeatCount="indefinite"
      />
      <animate
        attributeName="fill"
        values="currentColor; currentColor; transparent; transparent"
        keyTimes="0; 0.59; 0.59; 1"
        keySplines="0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1"
        dur="4s"
        repeatCount="indefinite"
      />
      <animate
        attributeName="stroke"
        values="transparent; transparent; currentColor; currentColor"
        keyTimes="0; 0.59; 0.59; 1"
        keySplines="0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1"
        dur="4s"
        repeatCount="indefinite"
      />
    </circle>
    <circle cx="96" cy="96" stroke="currentColor" stroke-width="20" r="0" fill="transparent">
      <animate
        attributeName="r"
        values="0; 20; 10; 31; 72"
        keyTimes="0; 0.1; 0.1; 0.2; 1"
        keySplines="0.42 0 1 1; 0 0 1 1; 0 0 0.58 1; 0 0 1 1; 0 0 1 1"
        dur="4s"
        repeatCount="indefinite"
      />
      <animate
        attributeName="fill"
        values="currentColor; currentColor; transparent; transparent"
        keyTimes="0; 0.1; 0.1; 1"
        keySplines="0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1"
        dur="4s"
        repeatCount="indefinite"
      />
      <animate
        attributeName="stroke"
        values="transparent; transparent; currentColor; currentColor"
        keyTimes="0; 0.1; 0.1; 1"
        keySplines="0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1"
        dur="4s"
        repeatCount="indefinite"
      />
    </circle>
    <circle cx="96" cy="96"...

CSS

body {
  color: red;
}

svg {
  width: 384px;
  border: 1px solid;
}