-->
Showing posts with label animating an object. Show all posts
Showing posts with label animating an object. Show all posts

HTML with SVG to animate object

<html>

<head>

    <head>
        <title>
            html with SVG tag. It stands for scalable vector graphics. It is used for vector based graphics in XML. We use this tag for graphics on web/page.
        </title>
    </head>

    <body>
        <svg viewbox="0 0 200 200"><!--</svg><svg width="100" height="100">-->
            <!--we always use svg for image size. If we donot, it takes 0,0 by default-->

            
        <rect width="100" height="100">
            <animate attributeName="rx" values="0;100;3" dur="5s" repeatCount="indefinite"/>
        </rect>
        <!--since we are going to put text, we use attributes-->
        <!-- 
           ->rx is the attribute name
           ->values=o is starting time
                    =100 is the speed of animation 
                    =0 is start that animation from 0
            ->dur=5s is the time for which animation will be in effect and then it repeats
           ->repeatcount:-It repeats the animation indefinite times
        </svg>
    </body>


</html>