SVG - Declarative Animation

Simple SVG illustrating how to "declaratively" animate specific attributes of an ellipse.

by brady houseknecht

HTML

<svg id="canvas" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="300px" preserveAspectRatio="none">
    <defs>
        <pattern id="gridPattern" width="10" height="10" patternUnits="userSpaceOnUse">
            <path d="M 10 0 L0 0 L0 10" fill='none' stroke='black' stroke-width='0.25'></path>
        </pattern>
    </defs>
    <g id="layer1">
        <rect id="grid" width="100%" height="100%" x="0" y="0" stroke="gray" stroke-width="0.25" fill="url(#gridPattern)"></rect>
    </g>
    <ellipse id="ellipseA" cx="50%" cy="50%" rx="50%" ry="50%" fill="#448">
        <animate attributeName="cy" dur="5s" values="0%;100%" repeatCount="indefinite"></animate>
        <animate attributeName="rx" dur="5s" values="20;90;20" repeatCount="indefinite"></animate>
        <animate attributeName="ry" dur="5s" values="30;60;30" repeatCount="indefinite"></animate>
    </ellipse>
    <ellipse id="ellipseB" cx="50%" cy="60%" rx="60%" ry="50%" fill="#FFF000" fill-opacity=".5">
        <animate attributeName="cx" dur="5s" values="0%;100%" repeatCount="indefinite"></animate>
        <animate attributeName="rx" dur="5s" values="20;90;20" repeatCount="indefinite"></animate>
        <animate attributeName="ry" dur="5s" values="30;60;30" repeatCount="indefinite"></animate>
    </ellipse>
</svg>

JavaScript

$(document).ready(function () {
    $('#canvas').height(window.innerHeight);
});