SVG Animations can make a website more creative
You may have seen several websites consisting of the above animation or similar animation. It is simply SVG Animation.
Most websites use SVG animation to make their websites look more interactive.
I have written an article that explains how to create an SVG Animation — Illustration with CSS using Figma. But I think it is not in-depth. It is for a fast learner or has any experience in Web Development.
So here I am writing an in-depth article about SVG and all that cool stuff.
Let’s start.
SVG animation is for Web developers. If you are not a Web Developer, don’t be tensed. I am here to help you, there are more than 80+ free resources to learn Web Development.
Other than that, we all are using YouTube. So we can learn Web Development from YouTube as well.
Now let’s talk about SVG.
What is SVG?
SVG (Scalable Vector Graphics) is simply a code that allows us to display vector images on our websites.
More clearly, as the name Scalable Vector Graphics applies it is:
- Scalable: You can scale your images without losing the quality since it is not pixelated.
- Vector: Raster images consist of pixels that look weird with resolution. So to solve the issue, Vector image came into existence. Simply Vector images are built by mathematical formulas. For example, Photoshop is based on pixels while Illustrator works on Vectors.
- Graphic: A Graphic is an image, design, or visual representation of an object.
So SVG is made from three words — Scalable, Vector and Graphics.
#javascript #programming #design #ux
