Skip to Main Content

SVG

Pulsating Ball

The pulsating ball is SVG code inside a 'Static Content' region.
Region appearance has a fixed size CSS class. I.e. 'h700'.
Animations are done using the animate tag. 
<svg version="1.1" id="ball" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 500 400" xml:space="preserve" style="border-color: green; border-style: solid;">
    <g>
        <g>
            <circle cx="250" cy="200" fill="none" r="100" stroke="pink" stroke-width="2">
                <animate attributeName="r" from="90" to="250" dur="1.5s" begin="0s" repeatCount="indefinite" />
                <animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite" />
            </circle>
            <circle cx="250" cy="200" fill="red" r="100" />
        </g>
    </g>
</svg>

Animation

The animate tag animates an attribute with a from and to value.
Also duration, begin and repeatCount are set. 
<g id="clown">
    <circle cx="250" cy="180" fill="none" r="30" stroke="pink" stroke-width="2">
        <animate attributeName="r" from="25" to="80" dur="1.5s" begin="0s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite" />
    </circle>
    <circle cx="250" cy="180" fill="red" r="30" />
</g>
Release 1.0