Как CSS лоадер преобразовать в SVG лоадер?

#css3 #html5 #svg #анимация #svg_animation

Коллеги, помогите этот пример на css полностью перевести в SVG, так как хочу его
использовать не только на всю страницу, то и на более мелких объектах типа  слайдер...



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #2b2b2b;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.wrap {
  position: absolute;
  left: calc(50% - 150px);
  top: calc(50% - 150px);
  width: 300px;
  height: 300px;
}

.border-wrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #6fba82;
  border-top: 3px solid #f79533;
  border-bottom: 3px solid #ef4e7b;
  border-right: none;
  box-shadow: 
  inset 1px 8px 2px 5px #f79533, 
  2px 7px 2px 5px #f37055, 
  inset 3px 6px 2px 5px #ef4e7b, 
  4px 5px 2px 5px #a166ab, 
  inset 5px 4px 2px 5px #5073b8, 
  6px 3px 2px 5px #1098ad, 
  inset 7px 2px 2px 5px #07b39b, 
  8px 1px 2px 5px #6fba82;
  animation: main-rotate 3s infinite linear;
}

@keyframes main-rotate {
  from {
    transform: rotateZ(0);
    box-shadow: 
    inset 1px 8px 2px 5px #f79533, 
    2px 7px 2px 5px #f37055, 
    inset 3px 6px 4px 5px #ef4e7b, 
    4px 5px 2px 5px #a166ab, 
    inset 5px 4px 6px 5px #5073b8, 
    6px 3px 2px 5px #1098ad, 
    inset 7px 2px 8px 5px #07b39b,
    8px 1px 2px 5px #6fba82;
  }
  50% {
    box-shadow: 
    inset 1px 8px 6px 5px #ADFF2F, 
    2px 7px 2px 5px #7FFF00, 
    inset 3px 6px 6px 5px #7CFC00, 
    4px 5px 2px 5px #00FF00, 
    inset 5px 4px 4px 5px #32CD32, 
    6px 3px 2px 5px #98FB98, 
    inset 7px 2px 2px 5px #90EE90, 
    8px 1px 2px 5px #00FA9A;
  }
  from {
    transform: rotateZ(360deg);
    box-shadow: 
    inset 1px 8px 2px 5px #f79533, 
    2px 7px 2px 5px #f37055, 
    inset 3px 6px 4px 5px #ef4e7b, 
    4px 5px 2px 5px #a166ab, 
    inset 5px 4px 6px 5px #5073b8, 
    6px 3px 2px 5px #1098ad, 
    inset 7px 2px 8px 5px #07b39b, 
    8px 1px 2px 5px #6fba82;
  }
}

  

    

    
  




    

Ответы

Ответ 1

Дополнительные эффекты

Анимация градиента кольца лоадера

Будем анимировать атрибут  линейного градиента stop-color 


               
               
            




svg {
background:black;
}





Аналогично делаем анимацию градиента второго кольца 



svg {
background:black;
}





К анимации градиента добавляем вращение колец 



svg {
background:black;
}





Добавляем текст и к нему тоже применяем градиент. 

Если практически применять этот пример в верстке, то можно делать галерею, где статично
лоадер мигает, а после клика появляется текст, фото и т.д , которые будут окружены
крутящимися кольцами.    

Запуск анимации по клику внутри SVG. 



.container {
width:50%;
height:50%;
}

svg {
background:black;
}

#path1 {
fill:url(#gradl);
stroke:none;
fill-opacity:1;
}
#path2 {
fill:url(#grad2);
stroke:none;
fill-opacity:0.8;
}
#crc1 {
stroke:none;
fill:black;
}
#txt1 {
fill:url(#grad2);

}

 
  



Ответ 2

Фигуры будут иметь сложные контуры и поэтому, чтобы избежать непредсказуемого поведения
при вращении элементов SVG, очень важно сразу позаботиться о чётком определении центра
вращения.    

Работа в векторном редакторе

Для задания / определения центра фигур сделаем несколько простых шагов: 


Создадим  файл SVG c двумя фигурами: прямоугольник и вписанную в него
окружность  




	 





Загружаем этот файл в векторный редактор  


  

Центр вращения будет 150 Х 150px   

Чтобы трансформировать контуры прямоугольника в нужную фигуру, выбираем в меню векторного
редактора Контур / Оконтурить объект shift+Contrl+C    


Добавляем по осям ещё 4 узла
Выделяем все узлы фигуры  и выбираем - Сделать выделенные узлы автоматически сглаженными
Получилась вот такая фигура    


   

Перетаскивая узловые точки и с помощью их рычагов добиваемся нужной формы  



При перетаскивании необходимо следить, чтобы не сдвинуть всю фигуру. На картинке
видно, что центр остался на месте 150 Х 150  


Сохраняем файл. Забираем формулу патча d="M.... />  


Создание кода прелоадера

Одно кольцо вокруг окружности 



 	 


  

Даем команду вращения values="0 150 150;360 150 150" - c 0 до 360 град. центр 150
Х 150   



	 


   

Добавляем второе кольцо, полученное из копии первого кольца и поворачиваем его предварительно
на 45 град. 

  

    
	  
	   
	 
	 
	  
	  
   
   
    	 


   

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



svg {
background:black;
}



Ответ 3

Многих пугают очень длинные строчки SVG кода.
 Тяжело психологически перейти от формата CSS свойств, где в каждой отдельной строчке
один атрибут. 
Попробую написать атрибуты, команды SVG в стиле правил CSS
Заодно поменяю цветовую схему прелоадера: 



.container {
width:50%;
height:50%;
}

svg {
background:black;
}

#path1 {
fill:url(#gradl);
stroke:none;
fill-opacity:1;
}
#path2 {
fill:url(#grad2);
stroke:none;
fill-opacity:0.6;
}
#crc1 {
stroke:none;
fill:black;
}
#txt1 {
fill:url(#grad2);

}