Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make animation with SVG HTML5

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 136
    Comment on it

    Here is the simple example of SVG animation. We use HTML structure to show svg graphics in browser.

    Tags used:-

    svg <svg>:- Makes the svg structure.
    circle <circle>:- Element is used to draw circles.
    g <g>:- Element is used to group SVG shapes together.
    path <path>:- Element is used to draw advanced shapes combined from lines, arcs, curves etc. with or without fill.
    Animate Transform <animateTransform> :- Element that animates.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8"/>
            <title>Document</title>
            <style>
            * {
            margin: 0;
            padding: 0;
            }
            html, body {
            height: 100%;
            }
            body{
            background: #88c8eb;
            }
            svg{
            position: fixed;
            top: 20%;
            height: 60%;
            left: 20%;
            width: 60%;
                }
            </style>
        </head>
        <body>
            <svg viewBox="0 0 160 160" width="160" height="160">
                <circle cx="80" cy="80" r="50" fill="#fde587" />
                <g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
                    <path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
                        <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />
                        </path>
                    </g>
                    <path d="M 50,0 A 50,50 0 0,0 -50,0Z" fill="#fde587" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
                </svg>
            </body>
        </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: