SVG Circle animation

index.html

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <circle class="animate" cx="50%" cy="50%" r="5%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="10%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="15%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="20%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="25%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="30%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="35%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="40%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="45%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="50%" fill-opacity=".3" fill="#4194b3"/>
<!--
    <circle cx="50%" cy="-10%" r="20%" fill-opacity=".2" fill="#25a2cf"/>
    <circle cx="50%" cy="-10%" r="30%" fill-opacity=".2" fill="#25a2cf"/>
    <circle cx="50%" cy="-10%" r="40%" fill-opacity=".2" fill="#25a2cf"/>
    <circle cx="50%" cy="-10%" r="50%" fill-opacity=".2" fill="#25a2cf"/>
    <circle cx="50%" cy="-10%" r="60%" fill-opacity=".2" fill="#25a2cf"/>
    <circle cx="50%" cy="-10%" r="70%" fill-opacity=".2" fill="#25a2cf"/>
    <circle cx="50%" cy="-10%" r="80%" fill-opacity=".2" fill="#25a2cf"/>
    <circle cx="50%" cy="-10%" r="90%" fill-opacity=".2" fill="#25a2cf"/>
    <circle cx="50%" cy="-10%" r="100%" fill-opacity=".2" fill="#25a2cf"/>
    <circle cx="0" cy="0" r="10%" fill-opacity=".2" fill="#007099"/>
    <circle cx="0" cy="0" r="20%" fill-opacity=".2" fill="#007099"/>
    <circle cx="0" cy="0" r="30%" fill-opacity=".2" fill="#007099"/>
    <circle cx="0" cy="0" r="40%" fill-opacity=".2" fill="#007099"/>
    <circle cx="0" cy="0" r="50%" fill-opacity=".2" fill="#007099"/>
    <circle cx="0" cy="0" r="60%" fill-opacity=".2" fill="#007099"/>
    <circle cx="0" cy="0" r="70%" fill-opacity=".2" fill="#007099"/>
    <circle cx="100%" cy="0" r="10%" fill-opacity=".1" fill="#7ddcff"/>
    <circle cx="100%" cy="0" r="20%" fill-opacity=".1" fill="#7ddcff"/>
    <circle cx="100%" cy="0" r="30%" fill-opacity=".1" fill="#7ddcff"/>
    <circle cx="100%" cy="0" r="40%" fill-opacity=".1" fill="#7ddcff"/>
    <circle cx="100%" cy="0" r="50%" fill-opacity=".1" fill="#7ddcff"/>
    <circle cx="100%" cy="0" r="60%" fill-opacity=".1" fill="#7ddcff"/>
    <circle cx="100%" cy="0" r="70%" fill-opacity=".1" fill="#7ddcff"/>
    <circle cx="100%" cy="100%" r="10%" fill-opacity=".1" fill="#0081b0"/>
    <circle cx="100%" cy="100%" r="20%" fill-opacity=".1" fill="#0081b0"/>
    <circle cx="100%" cy="100%" r="30%" fill-opacity=".1" fill="#0081b0"/>
    <circle cx="100%" cy="100%" r="40%" fill-opacity=".1" fill="#0081b0"/>
    <circle cx="100%" cy="100%" r="50%" fill-opacity=".1" fill="#0081b0"/>
    <circle cx="100%" cy="100%" r="60%" fill-opacity=".1" fill="#0081b0"/>
    <circle cx="100%" cy="100%" r="70%" fill-opacity=".1" fill="#0081b0"/>
    <circle cx="0%" cy="100%" r="10%" fill-opacity=".1" fill="#66d6ff"/>
    <circle cx="0%" cy="100%" r="20%" fill-opacity=".1" fill="#66d6ff"/>
    <circle cx="0%" cy="100%" r="30%" fill-opacity=".1" fill="#66d6ff"/>
    <circle cx="0%" cy="100%" r="40%" fill-opacity=".1" fill="#66d6ff"/>
    <circle cx="0%" cy="100%" r="50%" fill-opacity=".1" fill="#66d6ff"/>
    <circle cx="0%" cy="100%" r="60%" fill-opacity=".1" fill="#66d6ff"/>
    <circle cx="0%" cy="100%" r="70%" fill-opacity=".1" fill="#66d6ff"/>
-->
</svg>

style.css

body, html {
  height: 100%;
}
.animate {
    opacity: 0;
    animation-name: pulsate;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}
@keyframes pulsate {
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }
}
.animate[r="5%"] { animation-delay: 0.1s; }
.animate[r="10%"] { animation-delay: 0.2s; }
.animate[r="15%"] { animation-delay: 0.3s; }
.animate[r="20%"] { animation-delay: 0.4s; }
.animate[r="25%"] { animation-delay: 0.5s; }
.animate[r="30%"] { animation-delay: 0.6s; }
.animate[r="35%"] { animation-delay: 0.7s; }
.animate[r="40%"] { animation-delay: 0.8s; }
.animate[r="45%"] { animation-delay: 0.9s; }
.animate[r="50%"] { animation-delay: 1.0s; }

svg-circle-animation.markdown

SVG Circle animation

A Pen by Dmitri Pyatkov on CodePen.

License.