По сути, вам нужно было исправить несколько вещей.
- Обертка SVG содержала ненужные пробелы. Это занимало место на экране.
- Незначительные изменения в css.
Пожалуйста, найдите код ниже.
body {
display: flex;
margin-right: 0;
background-color: #000;
align-self: center;
justify-content: center;
}
.logo-container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
}
.logo-container svg {
width: 100%;
max-width: 700px;
}
.letters {
align-items: center;
align-self: center;
align-content: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.0/lib/anime.min.js"></script>
</head>
<body>
<div class="logo-container">
<svg
version="1.1"
id="logo"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 792.4 132.2"
style="enable-background: new 0 0 792.4 132.2;"
xml:space="preserve"
>
<style type="text/css">
.st0 {
fill: none;
stroke: #ff0000;
stroke-width: 3;
}
</style>
<path
class="st0"
d="M1.5,3.8v124.7h36.1c34.3,0,62.9-26,62.9-62.4c0-36.3-28.7-62.3-62.9-62.3H1.5z M29.9,103.1V29.2h4.4
c21.2,0,35.5,16.2,35.5,37c-0.2,20.9-14.5,36.9-35.5,36.9L29.9,103.1L29.9,103.1z M184.4,3.8H113v124.7h71.3v-24.9h-42.9V78.4h41.1
V53.5h-41.1V28.7h42.9V3.8z M246.6,1.5c-20.1,0-40.7,14.8-40.7,38.1c0,13,8.8,24.6,23.7,32c14.8,7.4,28.1,11.5,28.1,20.6
c0,11.6-11.8,12.2-18,12.2c-13.9,0-30.5-14.1-30.5-14.1l-14.2,23.9c0,0,17.7,16.5,46.8,16.5c24.3,0,47-10.4,47-40.2
c0-16.3-15.3-28.1-29.2-34c-14.2-6-26-11-26-18c0-6.8,5.1-11.2,14.8-11.2c12.8,0,25.2,8.6,25.2,8.6l11.5-22.7
C273.8,5.7,260.4,1.6,246.6,1.5L246.6,1.5z M330.7,3.8h-28.4v124.7h28.4L330.7,3.8L330.7,3.8z M461.5,58.6H404v21.9h28.7
c0,15.3-13.5,24-27.1,24c-17.5,0-31.7-17.2-31.7-38.4c0-21.6,14.2-39,31.7-39c11,0,20.6,4.4,27.8,16L452,22.8
C441.1,9.7,425.9,1.5,403.9,1.5c-35.1,0-60.8,28.9-60.8,64.7c0,35.7,27.2,64.5,60.8,64.5c24.5,0,50.8-13.5,57.6-45L461.5,58.6
L461.5,58.6z M502.5,51.1h0.3l49.6,77.4h28.4V3.8h-28.4v77.4h-0.3L502.5,3.8h-28.4v124.7h28.4L502.5,51.1L502.5,51.1z M670.2,3.8
h-71.3v124.7h71.3v-24.9h-42.9V78.4h41.1V53.5h-41.1V28.7h42.9V3.8L670.2,3.8z M686.6,3.8v124.7H715V79.2l38.1,49.3h36.1l-42.9-51.5
c15.3-4.8,25.5-17.4,25.5-36.1c0-24.5-17.5-37-40.7-37L686.6,3.8L686.6,3.8z M715,59.1V26.4h3.3c10.7,0,23.6,0.8,23.6,16.3
S729,59.1,718.3,59.1L715,59.1L715,59.1z"
/>
</svg>
</div>
<script type="text/javascript">
anime({
targets: "#logo path",
strokeDashoffset: [anime.setDashoffset, 0],
easing: "easeInOutQuad",
duration: 5000,
direction: "alternate",
loop: true,
});
</script>
</body>
</html>