Animating SVG (Scalable Vector Graphics) can be done by the native elements such as
In this post, You will see how to use SVG image and animate it.Here I will use circle or gear to rotate at the same position.
Let’s see the code SVG code which create circle:
1 2 3 4 5 6 | <svg width="300px" height="300px" viewBox="0 0 300 300" style="border:1px solid #000;"> <circle cx="100" cy="100" r="90" stroke="#660099" stroke-dasharray="20,10" stroke-width="5" fill="none" ></circle> </svg> |
As per above code, SVG is the element and set in the HTML body tag and circle tag in HTML will draw the dashed circle.
Read about : JQuery Animation Explained
Example to animate the Circle:
Now let’s have some fun.I will add the animation in the SVG image using the
At this stage, the code will look like below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <svg width="300px" height="300px" viewBox="0 0 300 300" style="border:1px solid #000;"> <circle cx="100" cy="100" r="90" stroke="#660099" stroke-dasharray="20,10" stroke-width="5" fill="none" > <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100" begin="1s" dur="5s" additive="sum" repeatCount="indefinite" /> </circle> </svg> |
Here is that our codes are all set and the animation should be working on our SVG.
Let’s take a look at our animated Circle:
Also Read: Masonry MovingBoxes in WordPress
Conclusion
The animation is not the easiest feature in CSS to understand. I hope you will find this tutorial as a good starting point to explore Animation on SVG further.If you want to start with the very basics, you can start here with this post.
