Edit in JSFiddle

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100">
    <g>
        <circle opacity="1.0" cx="49.5" cy="10" r="8">
            <animate attributeName="opacity" begin="0s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.12" cx="69.73" cy="15.256" r="8">
            <animate attributeName="opacity" begin="0.12s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.2" cx="84.57" cy="29.589" r="8">
            <animate attributeName="opacity" begin="0.2s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.28" cx="90" cy="49.5" r="8">
            <animate attributeName="opacity" begin="0.28s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.36" cx="84.57" cy="70.186" r="8">
            <animate attributeName="opacity" begin="0.36s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.44" cx="69.73" cy="84.576" r="8">
            <animate attributeName="opacity" begin="0.44s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.52" cx="49.5" cy="90" r="8">
            <animate attributeName="opacity" begin="0.52s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.6" cx="29.601" cy="84.576" r="8">
            <animate attributeName="opacity" begin="0.6s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.68" cx="15.183" cy="69.652" r="8">
            <animate attributeName="opacity" begin="0.68s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.76" cx="10" cy="49.501" r="8">
            <animate attributeName="opacity" begin="0.76s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.84" cx="15.183" cy="30.32" r="8">
            <animate attributeName="opacity" begin="0.84s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
        <circle opacity="0.92" cx="29.602" cy="15.649" r="8">
            <animate attributeName="opacity" begin="0.92s" dur="1s" from="1" to="0" repeatCount="indefinite" />
        </circle>
    </g>
</svg>

circle {
    fill: #0054C1;
}