Как прокомментировал @Grundy♦
а почему полностью не сделать эту часть с помощью svg?
Решение на SVG,
на мой взгляд действительно больше подходит для лого.
К тому же можно сделать анимацию, несколько украсить его.
.container {
width:100vw;
height:auto;
}
#logo {
fill:none;
stroke:white;
stroke-width:3;
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 123" preserveAspectRatio="xMinYMin meet">
<rect width="100%" height="100%" fill="#5474BD"/>
<path id="logo" d="M2.4 95.5H127.4c0 0-5.7-4.1-7.6-7-2.5-3.9-3.8-8.7-4.1-13.3-0.3-5.2 0.1-10.8 2.6-15.4 2.7-5 7.3-9.2 12.4-11.8 4.6-2.4 10.1-3.1 15.3-2.9 3.4 0.2 9.8 2.9 9.8 2.9l5.4 3.6-5.4 7.3c0 0-5.2-3.4-8.2-3.9-4.3-0.8-9.1-0.8-13 1.2-3.7 1.9-6.6 5.5-8.2 9.4-1.7 4.2-2 9.2-0.9 13.6 0.9 3.6 3.1 7.1 6.1 9.4 2.8 2.2 6.5 3.1 10 3.3 4.2 0.2 8.6-0.8 12.4-2.7 3.2-1.6 8.2-7 8.2-7 0 0-1.4-9.3-0.6-13.9 0.7-4.1 2.2-8.1 4.5-11.5 2.5-3.6 6-6.8 10-8.8 4.3-2.2 9.4-3.1 14.2-3 3.2 0 6.4 0.9 9.4 2.1 2.4 1 6.7 3.9 6.7 3.9l-4.4 8c0 0-4.7-3.4-7.4-4.1-3-0.8-6.3-0.7-9.4 0-3.4 0.8-6.9 2.3-9.4 4.8-2.9 3-5 7.1-5.4 11.2-0.5 4.4 0.7 9.3 3.2 13 2.2 3.3 5.8 5.9 9.5 7.3 3.4 1.2 7.3 1 10.9 0.3 3.8-0.8 7.6-2.4 10.6-4.8 2.9-2.3 6.7-8.8 6.7-8.8V45.2l9.2-0.2-0.2 21.3 20-21.2h13l-24.8 25.1 22.4 25.1h24.5 10.5 1110.8">
<animate attributeName="stroke-dashoffset" begin="0s" dur="5s" to="0" fill="freeze" />
</svg>
</div>
Анимация CSS
Добавляем второй path копию исходного path лого, для того, чтобы показать трассу движения. Можно обойтись и без него, дело вкуса.
Если нужна одноразовая анимация удалите infinite
body {
margin:0;
padding:0;
}
.container {
width:100vw;
height:auto;
}
#trace {
fill:none;
stroke:#858585;
stroke-width:3;
}
#logo {
fill:none;
stroke:white;
stroke-width:3;
stroke-dasharray:1821;
stroke-dashoffset:1821;
animation: draw 5s linear forwards infinite;
}
@keyframes draw {
to {stroke-dashoffset:0;}
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 123" preserveAspectRatio="xMinYMin meet">
<rect width="100%" height="100%" fill="#5474BD"/>
<path id="trace" d="M2.4 95.5H127.4c0 0-5.7-4.1-7.6-7-2.5-3.9-3.8-8.7-4.1-13.3-0.3-5.2 0.1-10.8 2.6-15.4 2.7-5 7.3-9.2 12.4-11.8 4.6-2.4 10.1-3.1 15.3-2.9 3.4 0.2 9.8 2.9 9.8 2.9l5.4 3.6-5.4 7.3c0 0-5.2-3.4-8.2-3.9-4.3-0.8-9.1-0.8-13 1.2-3.7 1.9-6.6 5.5-8.2 9.4-1.7 4.2-2 9.2-0.9 13.6 0.9 3.6 3.1 7.1 6.1 9.4 2.8 2.2 6.5 3.1 10 3.3 4.2 0.2 8.6-0.8 12.4-2.7 3.2-1.6 8.2-7 8.2-7 0 0-1.4-9.3-0.6-13.9 0.7-4.1 2.2-8.1 4.5-11.5 2.5-3.6 6-6.8 10-8.8 4.3-2.2 9.4-3.1 14.2-3 3.2 0 6.4 0.9 9.4 2.1 2.4 1 6.7 3.9 6.7 3.9l-4.4 8c0 0-4.7-3.4-7.4-4.1-3-0.8-6.3-0.7-9.4 0-3.4 0.8-6.9 2.3-9.4 4.8-2.9 3-5 7.1-5.4 11.2-0.5 4.4 0.7 9.3 3.2 13 2.2 3.3 5.8 5.9 9.5 7.3 3.4 1.2 7.3 1 10.9 0.3 3.8-0.8 7.6-2.4 10.6-4.8 2.9-2.3 6.7-8.8 6.7-8.8V45.2l9.2-0.2-0.2 21.3 20-21.2h13l-24.8 25.1 22.4 25.1h24.5 10.5 1110.8"/>
<path id="logo" d="M2.4 95.5H127.4c0 0-5.7-4.1-7.6-7-2.5-3.9-3.8-8.7-4.1-13.3-0.3-5.2 0.1-10.8 2.6-15.4 2.7-5 7.3-9.2 12.4-11.8 4.6-2.4 10.1-3.1 15.3-2.9 3.4 0.2 9.8 2.9 9.8 2.9l5.4 3.6-5.4 7.3c0 0-5.2-3.4-8.2-3.9-4.3-0.8-9.1-0.8-13 1.2-3.7 1.9-6.6 5.5-8.2 9.4-1.7 4.2-2 9.2-0.9 13.6 0.9 3.6 3.1 7.1 6.1 9.4 2.8 2.2 6.5 3.1 10 3.3 4.2 0.2 8.6-0.8 12.4-2.7 3.2-1.6 8.2-7 8.2-7 0 0-1.4-9.3-0.6-13.9 0.7-4.1 2.2-8.1 4.5-11.5 2.5-3.6 6-6.8 10-8.8 4.3-2.2 9.4-3.1 14.2-3 3.2 0 6.4 0.9 9.4 2.1 2.4 1 6.7 3.9 6.7 3.9l-4.4 8c0 0-4.7-3.4-7.4-4.1-3-0.8-6.3-0.7-9.4 0-3.4 0.8-6.9 2.3-9.4 4.8-2.9 3-5 7.1-5.4 11.2-0.5 4.4 0.7 9.3 3.2 13 2.2 3.3 5.8 5.9 9.5 7.3 3.4 1.2 7.3 1 10.9 0.3 3.8-0.8 7.6-2.4 10.6-4.8 2.9-2.3 6.7-8.8 6.7-8.8V45.2l9.2-0.2-0.2 21.3 20-21.2h13l-24.8 25.1 22.4 25.1h24.5 10.5 1110.8"/>
</svg>
</div>
Анимация SVG
Добавлена тень к лого, анимация повторяется с паузами между повторениями 1s
.container {
width:100vw;
height:auto;
}
#logo {
fill:none;
stroke:white;
stroke-width:3;
stroke-dasharray:1821;
stroke-dashoffset:1821;
filter:url(#shadow);
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 123" preserveAspectRatio="xMinYMin meet">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="6" dy="8" stdDeviation="4"/>
</filter>
</defs>
<rect width="100%" height="100%" fill="#5474BD"/>
<path id="logo" d="M2.4 95.5H127.4c0 0-5.7-4.1-7.6-7-2.5-3.9-3.8-8.7-4.1-13.3-0.3-5.2 0.1-10.8 2.6-15.4 2.7-5 7.3-9.2 12.4-11.8 4.6-2.4 10.1-3.1 15.3-2.9 3.4 0.2 9.8 2.9 9.8 2.9l5.4 3.6-5.4 7.3c0 0-5.2-3.4-8.2-3.9-4.3-0.8-9.1-0.8-13 1.2-3.7 1.9-6.6 5.5-8.2 9.4-1.7 4.2-2 9.2-0.9 13.6 0.9 3.6 3.1 7.1 6.1 9.4 2.8 2.2 6.5 3.1 10 3.3 4.2 0.2 8.6-0.8 12.4-2.7 3.2-1.6 8.2-7 8.2-7 0 0-1.4-9.3-0.6-13.9 0.7-4.1 2.2-8.1 4.5-11.5 2.5-3.6 6-6.8 10-8.8 4.3-2.2 9.4-3.1 14.2-3 3.2 0 6.4 0.9 9.4 2.1 2.4 1 6.7 3.9 6.7 3.9l-4.4 8c0 0-4.7-3.4-7.4-4.1-3-0.8-6.3-0.7-9.4 0-3.4 0.8-6.9 2.3-9.4 4.8-2.9 3-5 7.1-5.4 11.2-0.5 4.4 0.7 9.3 3.2 13 2.2 3.3 5.8 5.9 9.5 7.3 3.4 1.2 7.3 1 10.9 0.3 3.8-0.8 7.6-2.4 10.6-4.8 2.9-2.3 6.7-8.8 6.7-8.8V45.2l9.2-0.2-0.2 21.3 20-21.2h13l-24.8 25.1 22.4 25.1h24.5 10.5 1110.8">
<animate id="an" attributeName="stroke-dashoffset" begin="0s;an.end+1s" dur="5s" to="0" fill="freeze" />
</svg>