Simple pulsating svg circle

index.html

<div>
   <svg width="60px" height="60px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
     <animate 
       xlink:href="#back"
       attributeName="r"
       from="5.3"
       to="6.5"
       dur="1s"
       begin="0s"
       repeatCount="indefinite"
       fill="freeze" 
       id="circ-anim"
      />
     <animate 
       xlink:href="#back"
       attributeType="CSS" attributeName="opacity"
       from="1"
       to="0"
       dur="1s"
       begin="0s"
       repeatCount="indefinite"
       fill="freeze" 
       id="circ-anim"
      />
     <circle id="back" cx="7.2" cy="7" r="6.5" stroke-width="0.333"/>
     <circle class="front" cx="7.2" cy="7" r="5.5"/>
  </svg>
</div>

simple-pulsating-svg-circle.markdown

Simple pulsating svg circle

A Pen by Brandon Reid on CodePen.

License.

style.less

body {
  text-align: center;
  padding-top: 5em;
}

.front {
  fill: fadeOut(#ff8800, 10);
}
#back {
  fill: transparent;
  stroke: fadeOut(#ff8800, 30);
}