Анимация вращения сегментов окружности
Полная длина окружности равна 1859px
Используется stroke-dasharray
для деления окружности на сегменты
stroke-dashoffset
- для анимации вращения сегментов
Два сегмента
stroke-dasharray:910.5,19;
stroke-dashoffset:1859
;
.container {
width:50vw;
height:50vh;
}
#oval {
fill:none;
stroke:silver;
stroke-width:4px;
stroke-dasharray:910.5,19;
stroke-dashoffset:1859;
filter:url(#dropshadow);
}
text {
font-size:36px;
font-family:sans-serif;
font-weight:400;
fill:silver;
text-decoration: underline;
filter:url(#dropshadow);
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
<filter id="dropshadow" height="150%" width="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="4" dy="4" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="100%" height="100%" fill="#F4F4F4" />
<path id="oval" d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
<animate id="an_oval"
attributeName="stroke-dashoffset"
dur="5s"
begin="0s"
values="1859;0"
fill="freeze"
repeatCount="indefinite" />
</path>
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
</svg>
</div>
Три сегмента
stroke-dasharray:600.7,19;
.container {
width:50vw;
height:50vh;
}
#oval {
fill:none;
stroke:silver;
stroke-width:4px;
stroke-dasharray:600.7,19;
stroke-dashoffset:1859;
filter:url(#dropshadow);
}
text {
font-size:36px;
font-family:sans-serif;
font-weight:400;
fill:silver;
text-decoration: underline;
filter:url(#dropshadow);
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
<filter id="dropshadow" height="150%" width="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="4" dy="4" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="100%" height="100%" fill="#F4F4F4" />
<path id="oval" d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
<animate id="an_oval"
attributeName="stroke-dashoffset"
dur="5s"
begin="0s"
values="1859;0"
fill="freeze"
repeatCount="indefinite" />
</path>
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
</svg>
</div>
Четыре сегмента
stroke-dasharray:445.75,19;
.container {
width:50vw;
height:50vh;
}
#oval {
fill:none;
stroke:silver;
stroke-width:4px;
stroke-dasharray:445.75,19;
stroke-dashoffset:1859;
filter:url(#dropshadow);
}
text {
font-size:36px;
font-family:sans-serif;
font-weight:400;
fill:silver;
text-decoration: underline;
filter:url(#dropshadow);
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
<filter id="dropshadow" height="150%" width="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="4" dy="4" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="100%" height="100%" fill="#F4F4F4" />
<path id="oval" d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
<animate id="an_oval"
attributeName="stroke-dashoffset"
dur="5s"
begin="0s"
values="1859;0"
fill="freeze"
repeatCount="indefinite" />
</path>
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
</svg>
</div>
Update 26.12.2019
Анимация вращения шарика с по орбите с одновременным вращением его вокруг своей оси
Чёрно-белый вариант
.container {
width:50vw;
height:50vh;
}
#oval {
fill:none;
stroke:silver;
stroke-width:4px;
filter:url(#dropshadow);
}
text {
font-size:40px;
font-family:sans-serif;
font-weight:500;
fill:silver;
text-decoration: underline;
filter:url(#dropshadow);
fill:url(#gradCirc);
}
.circ{
fill:url(#gradCirc);
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
<filter id="dropshadow" height="150%" width="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="3" dy="3" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<linearGradient id="gradCirc">
<stop offset="5%" stop-color="white"></stop>
<stop offset="40%" stop-color="silver"></stop>
<stop offset="100%" stop-color="#151515" ></stop>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="#F4F4F4" />
<path id="oval" d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
<animate id="an_oval"
attributeName="stroke-dashoffset"
dur="5s"
begin="0s"
values="1859;0"
fill="freeze"
repeatCount="indefinite" />
</path>
<text x="205" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
<circle class="circ" cx="0" cy="0" r="25" >
<animateMotion
dur="10s"
repeatCount="indefinite"
additive="sum"
rotate="auto-reverse">
<mpath xlink:href="#oval"/>
</animateMotion>
<circle/>
</svg>
</div>
ЦВЕТНОЙ ВАРИАНТ ЛОГОТИПА
Изменить цветовую гамму по своему вкусу довольно легко, -
нужно поменять цвета у двух градиентов:
fill:url(#gradText);
- градиент для текста и дуги
fill:url(#gradCirc);
- градиент для шарика
В примере ниже сплошная линия заменена на пунктирную - stroke-dasharray:25 8;
Анимация вращения пунктирной линии в разные стороны достигается изменением
stroke-dashoffset
от максимального значения до нуля и обратно до максимального значения - values="1859;0;0;1859"
Повторяющиеся значения обеспечивают паузу вращения в крайних точках
.container {
width:50vw;
height:50vh;
}
#oval {
fill:none;
stroke-width:4px;
stroke-dasharray:25 8;
stroke:url(#gradText);
}
text {
font-size:40px;
font-family:sans-serif;
font-weight:500;
stroke:silver;
text-decoration: underline;
fill:url(#gradText);
}
.circ{
fill:url(#gradCirc);
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
<filter id="dropshadow" height="150%" width="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="3" dy="3" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<linearGradient id="gradText">
<stop offset="5%" stop-color="dodgerblue"></stop>
<stop offset="100%" stop-color="#B34EE9" ></stop>
</linearGradient>
<linearGradient id="gradCirc">
<stop offset="30%" stop-color="dodgerblue"></stop>
<stop offset="50%" stop-color="white" ></stop>
<stop offset="80%" stop-color="#B34EE9" ></stop>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="#F4F4F4" />
<path id="oval" d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
<animate id="an_oval"
attributeName="stroke-dashoffset"
dur="16s"
begin="0s"
values="1859;0;0;1859"
fill="freeze"
repeatCount="indefinite" />
</path>
<text x="205" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
<circle class="circ" cx="0" cy="0" r="28" >
<animateMotion
dur="8s"
repeatCount="indefinite"
additive="sum"
rotate="auto-reverse">
<mpath xlink:href="#oval"/>
</animateMotion>
<circle/>
</svg>
</div>
Более подробно, как это делается здесь