Хотим сегодня поговорить о прекрасном, а именно о том как  создать замечательную анимацию при помощи SVG, у нас будут треугольники которые будут объединяться в единое целое благодаря анимации, каждый треугольник будет окрашен в градиент, а плавная анимация, казалось бы при чем здесь Танос, превратит фон в произведение которым можно любоваться. Попробуйте такой фон у себя на сайте, при каждом обновлении страницы анимация будет повторяться, по этому рекомендуем использовать на страницах которые служат последним пристанищем посетителей на вашем сайте.

 

Если вы хотите получить готовые шаблоны сайта за умеренную плату, или вовсе бесплатно то можете посмотреть их у наших партнеров, если скажете что вы от rudebox, то можете получить приятные бонусы:

Шаг 1. HTML

Как вы поняли, вся завязка будет именно нa SVG, каждый треугольник это будет отдельный элемент SVG который разрезан на кусочки и залит градиентом, у нас их будет много:

Как вы поняли, каждая строчка отвечает за треугольник, практически все функции которых будет определены именно в разметке, стили будут нас служить как украшение.

Шаг 2. CSS

Стилей, как таковых, у нас не будет, нам только необходимо определить общие классы для фона и полигонов:

Шаг 3. JS

Осталось придать немного магии и оживить нашу анимацию, в этом помогут нам функция JS, которая будет запускать анимацию при обновлении страницы:

Результат получился превосходным, мне очень нравится такой фон и я бы с радостью попробую его в своих проектах, ведь такого раньше я не видел ни у кого.

Вот и все. Готово!