HTML with SVG to animate the circle.



            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.

        <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" />
        <!--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


No comments:

Post a Comment