Beautiful background animation only with HTML and CSS

Preview

Have you ever wondered how people create those beautiful background shapes that are animated? Well, it is much easier than you think let's have a look at what I am talking about,

You see these look so beautiful in websites, making them look more eye-catching. They are animated so it's so cool!! isn't it?

Demo here

Let's create it then :)

Get started

First of all head over to this website

You'll see something like this hover mouse over Animated shapes and then click on Customize

Now simply customize it as you wish to and don't forget to tick the enable animations option :)

Once you are done click on get code at the bottom and copy the SVG code

Coding Time :)

Once you copy the SVG code headover to your website code folder create a new file nameOfTheFile.svg you can name it whatever you want but don't forget to put .svg extension. Now in the same file paste the SVG code you copied!

Now head over to your main CSS file, In this file we'll set the background for the body.

main.css

  background-image: url("/path/to/your/image.svg");
  background-repeat: no-repeat;
  background-size: cover;

And voila!! we're done!! enjoy some beautiful eye-catching animations in the body's background