svgcircle.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        <svg class = "button" expanded = "true" height = "100px" width = "100px" xmlns="http://www.w3.org/2000/svg">
            <!-- <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/> -->
            <circle cx = "50%" cy = "50%" r = "45%" fill = "#333A40"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "5%" fill = "#ffffff">
			  <animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" />
            </circle>			
			
            <circle class = "innerCircle" cx = "50%" cy = "35%" r = "5%" fill = "#ffffff">
			  <animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-0.5s" />
            </circle>			
            <circle class = "innerCircle" cx = "50%" cy = "65%" r = "5%" fill = "#ffffff">
			  <animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-1s" />
            </circle>
			
			<circle class = "innerCircle" cx = "35%" cy = "50%" r = "5%" fill = "#ffffff">
			  <animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-1.5s" />
            </circle>
            <circle class = "innerCircle" cx = "35%" cy = "35%" r = "5%" fill = "#ffffff">
			  <animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-2.5s" />
            </circle>			
            <circle class = "innerCircle" cx = "35%" cy = "65%" r = "5%" fill = "#ffffff">
			  <animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-3s" />
            </circle>
			
			<circle class = "innerCircle" cx = "65%" cy = "50%" r = "5%" fill = "#ffffff">
			  <animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-3.5s" />
            </circle>
            <circle class = "innerCircle" cx = "65%" cy = "35%" r = "5%" fill = "#ffffff">
			  <animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-1.5s" />
            </circle>			
            <circle class = "innerCircle" cx = "65%" cy = "65%" r = "5%" fill = "#ffffff">
			  <animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-2s" />
            </circle>
        </svg>