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

1,00
р.
Коллеги, помогите этот пример на 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
}
}








Ответ
Дополнительные эффекты
Анимация градиента кольца лоадера
Будем анимировать атрибут линейного градиента stop-color



svg {
background:black
}



dur="1.5s"
values="dodgerblue yellow dodgerblue"
repeatCount="indefinite" />


attributeName="stop-color"
dur="1.5s"
values="yellow dodgerblue yellow"
repeatCount="indefinite" />













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


svg {
background:black
}












attributeName="stop-color"
dur="1.5s"
values="lime purple lime"
repeatCount="indefinite" />


attributeName="stop-color"
dur="1.5s"
values="purple lime purple"
repeatCount="indefinite" />














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


svg {
background:black
}



attributeName="stop-color"
dur="1.5s"
values="dodgerblue yellow dodgerblue"
repeatCount="indefinite" />


attributeName="stop-color"
dur="1.5s"
values="yellow dodgerblue yellow"
repeatCount="indefinite" />





attributeName="stop-color"
dur="1.5s"
values="lime purple lime"
repeatCount="indefinite" />


attributeName="stop-color"
dur="1.5s"
values="purple lime purple"
repeatCount="indefinite" />









attributeName="transform"
type="rotate"
values="360 148 148 0 148 148"
dur="6s"
repeatCount="indefinite" />




Добавляем текст и к нему тоже применяем градиент.
Если практически применять этот пример в верстке, то можно делать галерею, где статично лоадер мигает, а после клика появляется текст, фото и т.д , которые будут окружены крутящимися кольцами.
Запуск анимации по клику внутри 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)

}






attributeName="stop-color"
dur="1.5s"
values="dodgerblue yellow dodgerblue"
repeatCount="indefinite" />


attributeName="stop-color"
dur="1.5s"
values="yellow dodgerblue yellow"
repeatCount="indefinite" />





attributeName="stop-color"
dur="1.5s"
values="lime purple lime"
repeatCount="indefinite" />


attributeName="stop-color"
dur="1.5s"
values="purple lime purple"
repeatCount="indefinite" />












Click me