-->

Wednesday, July 22, 2020

HTML with SVG to draw polygon.

<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 width="100" height="100">
            <!--we always use svg for image size. If we donot, it takes 0,0 by default-->

            <polygon points="12,13 14,15 16,19" stroke="green" stroke-width="15" fill="red" />
        <!--since we are going to Polygon, we use attributes-->
        <!-- here 12 and 13 are first x and y-co-ordinate, 
            here 14 and 14 are second x and y-co-ordinate,
             and so on.
           -> stroke is boundary color,stroke-width means width of circle outline 
            and fill means color inside circle
        
        -->
        
        
        
        </svg>




    </body>


</html>
Posted by at No comments:
Labels:

HTML with SVG to draw polyline

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

            <polyline points="10,50 40,150 16,19" stroke="green" stroke-width="15" fill="red" />
        <!--since we are going to Polyline, we use attributes-->
        <!-- here 10 and 50 are first x and y-co-ordinate, 
            here 40 and 150 are second x and y-co-ordinate,
             and so on.
           -> stroke is boundary color,stroke-width means width of circle outline 
            and fill means color inside circle.
            ->somewhere it looks like polygon
        
        -->
        
        
        
        </svg>




    </body>


</html>
Posted by at No comments:
Labels:

HTML with SVG to draw path

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

            <path d="M20 50 L100 20 L200 70 Z" stroke="green" stroke-width="15" fill="red" />
        <!--since we are going to Path, we use attributes-->
        <!-- here, 'd' is a string containing a series of path commands that define the path to be drawn.
           ->M moves to particular point
           ->L lines to particular point
           ->Z means close the path.
           -> stroke is boundary color,stroke-width means width of path outline 
            and fill means color inside path.
            
        
        -->
        
        
        
        </svg>




    </body>


</html>
Posted by at No comments:
Labels:

HTML with SVG to draw text

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

            <text x="20" y="50"  dx="30" fill="red">Hello SVG</text>
        <!--since we are going to put text, we use attributes-->
        <!-- 
           ->X is x co-ordinate
           ->Y is y co-ordinate
           ->dx moves the text to particular x value
           -> stroke is boundary color,stroke-width means width of path outline 
            and fill means color of text.
            
        
        -->
        
        
        
        </svg>




    </body>


</html>
Posted by at No comments:
Labels:

HTML with SVG to draw text.

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

            <text x="20" y="50"  fill="red">Hello SVG</text>
        <!--since we are going to put text, we use attributes-->
        <!-- 
           ->X is x co-ordinate
           ->Y is y co-ordinate
           -> stroke is boundary color,stroke-width means width of path outline 
            and fill means color of text.
            
        
        -->
        
        
        
        </svg>




    </body>


</html>
Posted by at No comments:
Labels:

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>
Posted by at No comments:
Labels:

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>
Posted by at No comments:
Labels: