How To Use SVG Animation In HTML

INTRODUCTION

It might seem surprising to some people who are just getting started in HTML, that we can make animation in HTML. One of the tools that you can use is SVG (Scalable Vector Graphics).

BEGINNING

Let’s first open a text editor, e.g. Notepad, and make an outline for an HTML page.

Next, you can use the <svg> tag inside of your <body> tag to make a container for your drawings and animations.

<body>
   <svg width="500" height="500">
</body>
Drawing

For our animation, we are using a circle and the element used for it is just <circle>.

And, we make a circle using three attributes. First, ‘x‘ and ‘y‘ coordinate that define the location of the circle in the SVG box, and the third, ‘r‘, defining the radius. You can also use the ‘fill‘ property to add colors to it.

<circle cx="250" cy="250" r="5" fill="violet">
Animation

For animation, we simply use the <animate> element and define which attribute we want to change. The animation we are doing includes circles going up and down so we need to change the ‘cy‘ coordinate. And to do that we use, ‘from’¬†and ‘to’¬†attributes.

<animate 
   attributeName="cy" 
   from="250" 
   to="230" 
   dur="0.1s" 
   begin="0;anim7.end" 
   fill="freeze" 
   repeatCount="1" 
   id="anim1" 
/>

To add the time duration we simply use ‘dur‘. If the duration is longer the circles will move slowly.

For coherence, we have defined a ‘begin‘ value. So, the circle, with id ‘anim1‘ starts at the beginning of ‘0’ and also after the last circle ends its movement. The ‘fill‘ attribute preserves the ending value of the animation until it starts again.

CODE: FULL VERSION
<!DOCTYPE html>
<html>
   <head>
      <title>LOADER</title>
      <style>
         body {
         background-color: black;
         }
      </style>
   </head>
   <body>
      <svg width="500" height="500">
         <circle cx="250" cy="250" r="5" fill="violet">
            <animate
               attributeName="cy"
               from="250"
               to="230"
               dur="0.1s"
               begin="0; anim7.end"
               fill="freeze"
               repeatCount="1"
               id="anim1" />
            <animate
               begin="anim1.end"
               id="anim1"
               from="230" to="250"
               attributeName="cy"
               dur="0.1s"
               fill="freeze"
               repeatCount="1"/>
         </circle>
         <circle cx="260" cy="250" r="5" fill="Indigo">
            <animate
               attributeName="cy"
               from="250"
               to="230"
               dur="0.1s"
               begin="anim1.end"
               fill="freeze"
               repeatCount="1"
               id="anim2" />
            <animate
               begin="anim2.end"
               id="anim2"
               from="230" to="250"
               attributeName="cy"
               dur="0.1s"
               fill="freeze"
               repeatCount="1"/>
         </circle>
         <circle cx="270" cy="250" r="5" fill="Blue">
            <animate
               attributeName="cy"
               from="250" to="230"
               dur="0.1s"
               begin="anim2.end"
               fill="freeze"
               repeatCount="1"
               id="anim3" />
            <animate
               begin="anim3.end"
               id="anim3"
               from="230" to="250"
               attributeName="cy"
               dur="0.1s"
               fill="freeze"
               repeatCount="1"/>
         </circle>
         <circle cx="280" cy="250" r="5" fill="Green">
            <animate
               attributeName="cy"
               from="250"
               to="230"
               dur="0.1s"
               begin="anim3.end"
               fill="freeze"
               repeatCount="1"
               id="anim4" />
            <animate
               begin="anim4.end"
               id="anim4"
               from="230" to="250"
               attributeName="cy"
               dur="0.1s"
               fill="freeze"
               repeatCount="1"/>
         </circle>
         <circle cx="290" cy="250" r="5" fill="Yellow">
            <animate
               attributeName="cy"
               from="250"
               to="230"
               dur="0.1s"
               begin="anim4.end"
               fill="freeze"
               repeatCount="1"
               id="anim5" />
            <animate
               begin="anim5.end"
               id="anim5"
               from="230" to="250"
               attributeName="cy"
               dur="0.1s"
               fill="freeze"
               repeatCount="1"/>
         </circle>
         <circle cx="300" cy="250" r="5" fill="Orange">
            <animate
               attributeName="cy"
               from="250"
               to="230"
               dur="0.1s"
               begin="anim5.end"
               fill="freeze"
               repeatCount="1"
               id="anim6" />
            <animate
               begin="anim6.end"
               id="anim6"
               from="230" to="250"
               attributeName="cy"
               dur="0.1s"
               fill="freeze"
               repeatCount="1"/>
         </circle>
         <circle cx="310" cy="250" r="5" fill="Red">
            <animate
               attributeName="cy"
               from="250"
               to="230"
               dur="0.1s"
               begin="anim6.end"
               fill="freeze"
               repeatCount="1"
               id="anim7" />
            <animate
               begin="anim7.end"
               id="anim7"
               from="230" to="250"
               attributeName="cy"
               dur="0.1s"
               fill="freeze"
               repeatCount="1"/>
         </circle>
      </svg>
   </body>
</html>
Result
CONCLUSION

The important thing to note here is to see a clear picture of the animation in your mind. Only then you can find the exact attributes and properties to be used. It’s hard in the beginning but then you can always Google! It’s a beginner’s project that I did a while back. I had a notebook with a lot of nice animation ideas; I have only been able to make a few of them so far.

Hope you enjoyed reading! Good luck with your projects!

1
0

Related Posts