-->

HTML with SVG to animate the circle.

<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-->

            
        <circle cx="10" cy="10" r="20">
            <animateMotion dur="10s" repeatCount="indefinite" path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
        </circle>
        <!--since we are going to animate our text , we use attributes-->
        <!-- 
           ->path attribute creates path using different co-ordinates. We have already discussed about this
            ->dur=10s is the time for which animation will be in effect and then it repeats
           ->repeatcount:-It repeats the animation indefinite times
        </svg>
    </body>


</html>

No comments:

Post a Comment