Dot Animation

by Ken Watanabe

HTML

<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="240px" viewBox="0 0 612 240" enable-background="new 0 0 612 240" xml:space="preserve">
    <circle fill="#FFFFFF" stroke="gray" stroke-width="6" stroke-miterlimit="10" cx="459" cy="137" r="6">
        <animate attributeName="cy" from="137" to="137" begin="0s" dur="4s" values="137;117;117;60;60;137;137" keySplines="0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" calcMode="spline" repeatCount="indefinite" />
    </circle>
</svg>



<!-- <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> -->