Bad quality of image

Resize problems

Why SVG Animation?

• Lightweight
• Fast
• Scalable
• Lots of online tutorials
• Interactivity
• Supported on all major browsers (except IE8 and less)

The element takes this sequence of drawing commands through the attribute d.

    <!-- A right-angled triangle -->
    <path d="M10 10 L175 10 L175 175 Z"></path>
                         

Other useful commands

• arcs (A)
• quadratic bezier curves (Q)
• cubic bezier curves (C)
• etc

SVG animation

1. CSS

2. Native

3. JS

stroke-dasharray & stroke-dashoffset

Just curve line

<svg width="300px" height="175px" version="1.1">
    <path d="M10 80 Q 77.5 10, 145 80 T 280 80" fill="transparent" stroke="#000000" stroke-width="4"></path>
</svg>
                        

Add animation

  .path {
    stroke-dasharray: 320;
    stroke-dashoffset: 0;
    animation: dash 5s linear;
  }
  @keyframes dash {
    from {
      stroke-dashoffset: 320;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
                        

With more paths

  <svg width="300px" height="175px" version="1.1">
    <path d="M10 80 Q 77.5 10, 145 80 T 280 80" fill="transparent" stroke="#000000" class="path"></path>
    <path d="M10 80 Q 77.5 10, 145 80 T 280 80" fill="transparent" stroke="#FF2851" class="line2"></path>
    <path d="M10 80 Q 77.5 10, 145 80 T 280 80" fill="transparent" stroke="#000000" class="line1"></path>
  </svg>
                        

And more styles

    .line1 {
      stroke-dasharray: 340;
      stroke-dashoffset: 40;
      animation: dash 2.5s linear alternate infinite;
    }

    .line2 {
      stroke-dasharray: 320;
      stroke-dashoffset: 320;
      animation: dash2 2.5s linear alternate infinite;
    }
                        

And main - with more animations

    @keyframes dash {
        from {
          stroke-dashoffset: 360;
        }
        to {
          stroke-dashoffset: 40;
        }
    }
    @keyframes dash2 {
        from {
          stroke-dashoffset: 280;
        }
        to {
          stroke-dashoffset: -40;
        }
    }
                        

Result

Example

Elements

Animation is achieved by nesting one or more of the following elements inside the element that needs animation.

• set
• animate
• animateMotion
• animateTransform

Animate

Animates an attribute

                          
<circle cx="30" cy="30" r="25" style="fill: #ff0000;">
  <animate attributename="cx" attributetype="XML" from="30" to="470" begin="0s" dur="5s" fill="remove" repeatcount="indefinite">
</animate></circle>
                          
                        

animateMotion

Animates motion along a path.

                          
<path d="M10,50 q60,50 100,0 q60,-50 100,0" style="stroke: #ff0000; fill: none;"></path>
<rect x="0" y="0" width="50" height="50" style="stroke: #ffffff; fill: #ff0000;">
  <animatemotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatcount="indefinite" rotate="auto">
</animatemotion></rect>
                          
                        

animateTransform

Animates the transform attribute of a shape.

                          
<rect x="140" y="140" rx="20" ry="20" width="50" height="50" style="fill: #ff0000;">
  <animatetransform attributename="transform" type="rotate" from="0 150 100" to="360 150 100" begin="0s" dur="10s" repeatcount="indefinite">
</animatetransform></rect>
                          
                        

animateTransform

AnimatesTransform type="scale".

                          
<polygon points="50,5 20,99 95,39 5,39 80,99" style="fill:#00BD9D;">
<animatetransform attributename="transform" type="scale" from="1 1" to="2 2" begin="0s" dur="10s" repeatcount="indefinite" additive="sum"></animatetransform>
<animatetransform attributename="transform" type="rotate" from="0 130 120" to="360 130 120" begin="0s" dur="10s" repeatcount="indefinite" additive="sum"></animatetransform>
</polygon>
                          
                        

Combine animations

Synchronize beginning of one animation to end of another

                          
<rect x="20" y="20" width="100" height="100" style="stroke: #ff0000">
  <animate id="first" attributename="x" from="20" to="370" begin="click" dur="4s" fill="freeze">
  <animate attributename="y" from="20" to="80" begin="first.end" dur="2s" fill="freeze">
</animate></animate></rect>
                          
                        

JS Libraries

Fine tune the interactivity

• Snap.svg
• GSAP
• Velocity.js
• Svg.js
• Raphael.js

Cool animation with GSAP library

How to get from this