SVG Animation

Creative Commons Logo This work is licensed under the Creative Commons Attribution Non-Commercial 2.0 UK: England & Wales Licence. This means that you are free to: copy; distribute; and modify this work. It also means that you cannot use it for commercial purposes. Additionally, you must attribute this work to the original author, Thomas Guymer, ideally with a link.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="600px" height="400px" onload="javascript:runOnce(evt);">
    <script type="text/javascript">
        <![CDATA[
            var t;
            var svg;
            var spots;
            var counter = 0;

            function runOnce(evt) {
                svg = document.getElementsByTagName("svg")[0];
                //Assume string is 5 characters long with the first three being the numbers
                width = parseFloat(svg.getAttributeNS(null, "width").substring(0, 3));
                height = parseFloat(svg.getAttributeNS(null, "height").substring(0, 3));
                x = 0;
                y = 0;
                total = (width * height) / 25;
                //Create the spots
                for(i = 0; i < total; i++) {
                    newbox = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                    newbox.setAttributeNS(null, "x", x);
                    newbox.setAttributeNS(null, "y", y);
                    newbox.setAttributeNS(null, "width", 5);
                    newbox.setAttributeNS(null, "height", 5);
                    newbox.setAttributeNS(null, "fill", "blue");
                    svg.appendChild(newbox);
                    x = x + 5;
                    //If reached end of row
                    if(x >= width) {
                        x = 0;
                        y = y + 5;
                    }
                }
                //Find the spots
                spots = document.getElementsByTagName("rect");
                loop();
            }

            function loop() {
                //If not switched them all
                if(counter < spots.length) {
                    fired = false;
                    while(!fired) {
                        indice = Math.round((spots.length - 1) * Math.random());
                        //If not been switched yet
                        if(spots.item(indice).getAttributeNS(null, "fill") === "blue") {
                            spots.item(indice).setAttributeNS(null, "fill", "red");
                            fired = true;
                            counter++;
                        }
                    }
                    t = setTimeout("loop()", 5);
                }
            }
        ]]>
    </script>
</svg>

This page was last modified on 04/11/2010. This page has had 525 hits up until 01/09/2011.