如何修复 SVG 文本动画中丢失的像素？
How to fix missing pixels in SVG text animation?
好的，所以...
我之前的问题是关于将网站转换为桌面应用程序。现在我正在尝试创建一个主页，我将能够在我的应用程序中使用它。我还想要一个带有我昵称的预加载器，所以我使用 Figma 创建了一个 SVG。然后我将 SVG 代码复制到我的 index.html 文件中。我在 CSS 中为它写了一个动画（文本加载或类似的东西），但是当文本完全加载时 - 我看到字母中缺少像素（字母“B”和字母“D”，请看下图).我该如何解决？
有我的代码：
Link 到 codepen.io - https://codepen.io/BL0_0DY/pen/zYEejEJ?editors=1100
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
height: 100%;
width: 100%;
background-color: #c46313;
}
#animate
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes lineanim
{
to
{
stroke-dashoffset: 0;
}
}
#animate path:nth-child(1)
{
stroke-dasharray: 778px;
stroke-dashoffset: 778px;
animation: lineanim 1.5s ease-in-out forwards;
}
#animate path:nth-child(2)
{
stroke-dasharray: 393px;
stroke-dashoffset: 393px;
animation: lineanim 1.5s ease-in-out 0.3s forwards;
}
#animate path:nth-child(3)
{
stroke-dasharray: 665px;
stroke-dashoffset: 665px;
animation: lineanim 1.5s ease-in-out 0.6s forwards;
}
#animate path:nth-child(4)
{
stroke-dasharray: 665px;
stroke-dashoffset: 665px;
animation: lineanim 1.5s ease-in-out 0.9s forwards;
}
#animate path:nth-child(5)
{
stroke-dasharray: 696px;
stroke-dashoffset: 696px;
animation: lineanim 1.5s ease-in-out 1.2s forwards;
}
#animate path:nth-child(6)
{
stroke-dasharray: 434px;
stroke-dashoffset: 434px;
animation: lineanim 1.5s ease-in-out 1.5s forwards;
}
<svg id="animate" width="746" height="135" viewBox="0 0 746 135" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9772 129C7.44382 129 4.17715 125.733 4.17715 119.2V15.425C4.17715 8.89165 7.44382 5.62499 13.9772 5.62499H55.6272C68.4605 5.62499 78.3772 8.48332 85.3772 14.2C92.4938 19.8 96.0522 27.675 96.0522 37.825C96.0522 44.475 94.3022 50.1917 90.8022 54.975C87.3022 59.7583 82.5188 63.2583 76.4522 65.475C83.5688 67.3417 89.1105 70.7833 93.0772 75.8C97.0438 80.8167 99.0272 87.175 99.0272 94.875C99.0272 105.842 95.3522 114.3 88.0022 120.25C80.7688 126.083 70.6772 129 57.7272 129H13.9772ZM21.6772 59.525H52.8272C69.8605 59.525 78.3772 52.875 78.3772 39.575C78.3772 26.275 69.8605 19.625 52.8272 19.625H21.6772V59.525ZM21.6772 115H55.6272C72.7772 115 81.3522 108.058 81.3522 94.175C81.3522 80.4083 72.7772 73.525 55.6272 73.525H21.6772V115Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M141.489 129C135.306 129 132.214 125.908 132.214 119.725V14.2C132.214 8.01666 135.248 4.92499 141.314 4.92499C147.381 4.92499 150.414 8.01666 150.414 14.2V113.425H204.664C210.031 113.425 212.714 115.992 212.714 121.125C212.714 126.375 210.031 129 204.664 129H141.489Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M284.578 130.575C272.794 130.575 262.586 128.008 253.953 122.875C245.319 117.625 238.611 110.275 233.828 100.825C229.161 91.2583 226.828 80.0583 226.828 67.225C226.828 54.275 229.161 43.075 233.828 33.625C238.611 24.175 245.319 16.8833 253.953 11.75C262.586 6.61666 272.794 4.04999 284.578 4.04999C296.244 4.04999 306.394 6.61666 315.028 11.75C323.778 16.8833 330.486 24.175 335.153 33.625C339.936 43.075 342.328 54.2167 342.328 67.05C342.328 80 339.936 91.2583 335.153 100.825C330.486 110.275 323.778 117.625 315.028 122.875C306.394 128.008 296.244 130.575 284.578 130.575ZM284.578 114.825C296.828 114.825 306.336 110.683 313.103 102.4C319.986 94 323.428 82.275 323.428 67.225C323.428 52.175 320.044 40.5083 313.278 32.225C306.511 23.9417 296.944 19.8 284.578 19.8C272.328 19.8 262.761 23.9417 255.878 32.225C249.111 40.5083 245.728 52.175 245.728 67.225C245.728 82.275 249.111 94 255.878 102.4C262.761 110.683 272.328 114.825 284.578 114.825Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M429.021 130.575C417.238 130.575 407.029 128.008 398.396 122.875C389.763 117.625 383.054 110.275 378.271 100.825C373.604 91.2583 371.271 80.0583 371.271 67.225C371.271 54.275 373.604 43.075 378.271 33.625C383.054 24.175 389.763 16.8833 398.396 11.75C407.029 6.61666 417.238 4.04999 429.021 4.04999C440.688 4.04999 450.838 6.61666 459.471 11.75C468.221 16.8833 474.929 24.175 479.596 33.625C484.379 43.075 486.771 54.2167 486.771 67.05C486.771 80 484.379 91.2583 479.596 100.825C474.929 110.275 468.221 117.625 459.471 122.875C450.838 128.008 440.688 130.575 429.021 130.575ZM429.021 114.825C441.271 114.825 450.779 110.683 457.546 102.4C464.429 94 467.871 82.275 467.871 67.225C467.871 52.175 464.488 40.5083 457.721 32.225C450.954 23.9417 441.388 19.8 429.021 19.8C416.771 19.8 407.204 23.9417 400.321 32.225C393.554 40.5083 390.171 52.175 390.171 67.225C390.171 82.275 393.554 94 400.321 102.4C407.204 110.683 416.771 114.825 429.021 114.825Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M529.715 129C523.181 129 519.914 125.733 519.914 119.2V15.425C519.914 8.89165 523.181 5.62499 529.715 5.62499H563.489C583.789 5.62499 599.423 10.9333 610.389 21.55C621.473 32.1667 627.014 47.3917 627.014 67.225C627.014 87.0583 621.473 102.342 610.389 113.075C599.423 123.692 583.789 129 563.489 129H529.715ZM538.114 113.775H562.439C592.889 113.775 608.114 98.2583 608.114 67.225C608.114 36.3083 592.889 20.85 562.439 20.85H538.114V113.775Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M691.07 130.225C685.003 130.225 681.97 127.075 681.97 120.775V71.425L642.77 16.825C640.903 14.1417 640.553 11.4 641.72 8.59999C643.003 5.79999 645.512 4.39999 649.245 4.39999C652.978 4.39999 656.187 6.32499 658.87 10.175L691.42 55.5L723.97 10.175C725.487 8.07499 726.945 6.61666 728.345 5.79999C729.745 4.86666 731.495 4.39999 733.595 4.39999C737.212 4.39999 739.603 5.74166 740.77 8.425C741.937 10.9917 741.412 13.85 739.195 17L699.995 71.6V120.775C699.995 127.075 697.02 130.225 691.07 130.225Z" stroke="#CFCFCF" stroke-width="8"/>
</svg>
看来您需要将 stroke-linecap 设置为方形
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
height: 100%;
width: 100%;
background-color: #c46313;
stroke-linecap: square;
}
#animate
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes lineanim
{
to
{
stroke-dashoffset: 0;
}
}
#animate path:nth-child(1)
{
stroke-dasharray: 778px;
stroke-dashoffset: 778px;
animation: lineanim 1.5s ease-in-out forwards;
}
#animate path:nth-child(2)
{
stroke-dasharray: 393px;
stroke-dashoffset: 393px;
animation: lineanim 1.5s ease-in-out 0.3s forwards;
}
#animate path:nth-child(3)
{
stroke-dasharray: 665px;
stroke-dashoffset: 665px;
animation: lineanim 1.5s ease-in-out 0.6s forwards;
}
#animate path:nth-child(4)
{
stroke-dasharray: 665px;
stroke-dashoffset: 665px;
animation: lineanim 1.5s ease-in-out 0.9s forwards;
}
#animate path:nth-child(5)
{
stroke-dasharray: 696px;
stroke-dashoffset: 696px;
animation: lineanim 1.5s ease-in-out 1.2s forwards;
}
#animate path:nth-child(6)
{
stroke-dasharray: 434px;
stroke-dashoffset: 434px;
animation: lineanim 1.5s ease-in-out 1.5s forwards;
}
<svg id="animate" width="746" height="135" viewBox="0 0 746 135" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9772 129C7.44382 129 4.17715 125.733 4.17715 119.2V15.425C4.17715 8.89165 7.44382 5.62499 13.9772 5.62499H55.6272C68.4605 5.62499 78.3772 8.48332 85.3772 14.2C92.4938 19.8 96.0522 27.675 96.0522 37.825C96.0522 44.475 94.3022 50.1917 90.8022 54.975C87.3022 59.7583 82.5188 63.2583 76.4522 65.475C83.5688 67.3417 89.1105 70.7833 93.0772 75.8C97.0438 80.8167 99.0272 87.175 99.0272 94.875C99.0272 105.842 95.3522 114.3 88.0022 120.25C80.7688 126.083 70.6772 129 57.7272 129H13.9772ZM21.6772 59.525H52.8272C69.8605 59.525 78.3772 52.875 78.3772 39.575C78.3772 26.275 69.8605 19.625 52.8272 19.625H21.6772V59.525ZM21.6772 115H55.6272C72.7772 115 81.3522 108.058 81.3522 94.175C81.3522 80.4083 72.7772 73.525 55.6272 73.525H21.6772V115Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M141.489 129C135.306 129 132.214 125.908 132.214 119.725V14.2C132.214 8.01666 135.248 4.92499 141.314 4.92499C147.381 4.92499 150.414 8.01666 150.414 14.2V113.425H204.664C210.031 113.425 212.714 115.992 212.714 121.125C212.714 126.375 210.031 129 204.664 129H141.489Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M284.578 130.575C272.794 130.575 262.586 128.008 253.953 122.875C245.319 117.625 238.611 110.275 233.828 100.825C229.161 91.2583 226.828 80.0583 226.828 67.225C226.828 54.275 229.161 43.075 233.828 33.625C238.611 24.175 245.319 16.8833 253.953 11.75C262.586 6.61666 272.794 4.04999 284.578 4.04999C296.244 4.04999 306.394 6.61666 315.028 11.75C323.778 16.8833 330.486 24.175 335.153 33.625C339.936 43.075 342.328 54.2167 342.328 67.05C342.328 80 339.936 91.2583 335.153 100.825C330.486 110.275 323.778 117.625 315.028 122.875C306.394 128.008 296.244 130.575 284.578 130.575ZM284.578 114.825C296.828 114.825 306.336 110.683 313.103 102.4C319.986 94 323.428 82.275 323.428 67.225C323.428 52.175 320.044 40.5083 313.278 32.225C306.511 23.9417 296.944 19.8 284.578 19.8C272.328 19.8 262.761 23.9417 255.878 32.225C249.111 40.5083 245.728 52.175 245.728 67.225C245.728 82.275 249.111 94 255.878 102.4C262.761 110.683 272.328 114.825 284.578 114.825Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M429.021 130.575C417.238 130.575 407.029 128.008 398.396 122.875C389.763 117.625 383.054 110.275 378.271 100.825C373.604 91.2583 371.271 80.0583 371.271 67.225C371.271 54.275 373.604 43.075 378.271 33.625C383.054 24.175 389.763 16.8833 398.396 11.75C407.029 6.61666 417.238 4.04999 429.021 4.04999C440.688 4.04999 450.838 6.61666 459.471 11.75C468.221 16.8833 474.929 24.175 479.596 33.625C484.379 43.075 486.771 54.2167 486.771 67.05C486.771 80 484.379 91.2583 479.596 100.825C474.929 110.275 468.221 117.625 459.471 122.875C450.838 128.008 440.688 130.575 429.021 130.575ZM429.021 114.825C441.271 114.825 450.779 110.683 457.546 102.4C464.429 94 467.871 82.275 467.871 67.225C467.871 52.175 464.488 40.5083 457.721 32.225C450.954 23.9417 441.388 19.8 429.021 19.8C416.771 19.8 407.204 23.9417 400.321 32.225C393.554 40.5083 390.171 52.175 390.171 67.225C390.171 82.275 393.554 94 400.321 102.4C407.204 110.683 416.771 114.825 429.021 114.825Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M529.715 129C523.181 129 519.914 125.733 519.914 119.2V15.425C519.914 8.89165 523.181 5.62499 529.715 5.62499H563.489C583.789 5.62499 599.423 10.9333 610.389 21.55C621.473 32.1667 627.014 47.3917 627.014 67.225C627.014 87.0583 621.473 102.342 610.389 113.075C599.423 123.692 583.789 129 563.489 129H529.715ZM538.114 113.775H562.439C592.889 113.775 608.114 98.2583 608.114 67.225C608.114 36.3083 592.889 20.85 562.439 20.85H538.114V113.775Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M691.07 130.225C685.003 130.225 681.97 127.075 681.97 120.775V71.425L642.77 16.825C640.903 14.1417 640.553 11.4 641.72 8.59999C643.003 5.79999 645.512 4.39999 649.245 4.39999C652.978 4.39999 656.187 6.32499 658.87 10.175L691.42 55.5L723.97 10.175C725.487 8.07499 726.945 6.61666 728.345 5.79999C729.745 4.86666 731.495 4.39999 733.595 4.39999C737.212 4.39999 739.603 5.74166 740.77 8.425C741.937 10.9917 741.412 13.85 739.195 17L699.995 71.6V120.775C699.995 127.075 697.02 130.225 691.07 130.225Z" stroke="#CFCFCF" stroke-width="8"/>
</svg>
好的，所以...
我之前的问题是关于将网站转换为桌面应用程序。现在我正在尝试创建一个主页，我将能够在我的应用程序中使用它。我还想要一个带有我昵称的预加载器，所以我使用 Figma 创建了一个 SVG。然后我将 SVG 代码复制到我的 index.html 文件中。我在 CSS 中为它写了一个动画（文本加载或类似的东西），但是当文本完全加载时 - 我看到字母中缺少像素（字母“B”和字母“D”，请看下图).我该如何解决？
有我的代码：
Link 到 codepen.io - https://codepen.io/BL0_0DY/pen/zYEejEJ?editors=1100
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
height: 100%;
width: 100%;
background-color: #c46313;
}
#animate
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes lineanim
{
to
{
stroke-dashoffset: 0;
}
}
#animate path:nth-child(1)
{
stroke-dasharray: 778px;
stroke-dashoffset: 778px;
animation: lineanim 1.5s ease-in-out forwards;
}
#animate path:nth-child(2)
{
stroke-dasharray: 393px;
stroke-dashoffset: 393px;
animation: lineanim 1.5s ease-in-out 0.3s forwards;
}
#animate path:nth-child(3)
{
stroke-dasharray: 665px;
stroke-dashoffset: 665px;
animation: lineanim 1.5s ease-in-out 0.6s forwards;
}
#animate path:nth-child(4)
{
stroke-dasharray: 665px;
stroke-dashoffset: 665px;
animation: lineanim 1.5s ease-in-out 0.9s forwards;
}
#animate path:nth-child(5)
{
stroke-dasharray: 696px;
stroke-dashoffset: 696px;
animation: lineanim 1.5s ease-in-out 1.2s forwards;
}
#animate path:nth-child(6)
{
stroke-dasharray: 434px;
stroke-dashoffset: 434px;
animation: lineanim 1.5s ease-in-out 1.5s forwards;
}
<svg id="animate" width="746" height="135" viewBox="0 0 746 135" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9772 129C7.44382 129 4.17715 125.733 4.17715 119.2V15.425C4.17715 8.89165 7.44382 5.62499 13.9772 5.62499H55.6272C68.4605 5.62499 78.3772 8.48332 85.3772 14.2C92.4938 19.8 96.0522 27.675 96.0522 37.825C96.0522 44.475 94.3022 50.1917 90.8022 54.975C87.3022 59.7583 82.5188 63.2583 76.4522 65.475C83.5688 67.3417 89.1105 70.7833 93.0772 75.8C97.0438 80.8167 99.0272 87.175 99.0272 94.875C99.0272 105.842 95.3522 114.3 88.0022 120.25C80.7688 126.083 70.6772 129 57.7272 129H13.9772ZM21.6772 59.525H52.8272C69.8605 59.525 78.3772 52.875 78.3772 39.575C78.3772 26.275 69.8605 19.625 52.8272 19.625H21.6772V59.525ZM21.6772 115H55.6272C72.7772 115 81.3522 108.058 81.3522 94.175C81.3522 80.4083 72.7772 73.525 55.6272 73.525H21.6772V115Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M141.489 129C135.306 129 132.214 125.908 132.214 119.725V14.2C132.214 8.01666 135.248 4.92499 141.314 4.92499C147.381 4.92499 150.414 8.01666 150.414 14.2V113.425H204.664C210.031 113.425 212.714 115.992 212.714 121.125C212.714 126.375 210.031 129 204.664 129H141.489Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M284.578 130.575C272.794 130.575 262.586 128.008 253.953 122.875C245.319 117.625 238.611 110.275 233.828 100.825C229.161 91.2583 226.828 80.0583 226.828 67.225C226.828 54.275 229.161 43.075 233.828 33.625C238.611 24.175 245.319 16.8833 253.953 11.75C262.586 6.61666 272.794 4.04999 284.578 4.04999C296.244 4.04999 306.394 6.61666 315.028 11.75C323.778 16.8833 330.486 24.175 335.153 33.625C339.936 43.075 342.328 54.2167 342.328 67.05C342.328 80 339.936 91.2583 335.153 100.825C330.486 110.275 323.778 117.625 315.028 122.875C306.394 128.008 296.244 130.575 284.578 130.575ZM284.578 114.825C296.828 114.825 306.336 110.683 313.103 102.4C319.986 94 323.428 82.275 323.428 67.225C323.428 52.175 320.044 40.5083 313.278 32.225C306.511 23.9417 296.944 19.8 284.578 19.8C272.328 19.8 262.761 23.9417 255.878 32.225C249.111 40.5083 245.728 52.175 245.728 67.225C245.728 82.275 249.111 94 255.878 102.4C262.761 110.683 272.328 114.825 284.578 114.825Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M429.021 130.575C417.238 130.575 407.029 128.008 398.396 122.875C389.763 117.625 383.054 110.275 378.271 100.825C373.604 91.2583 371.271 80.0583 371.271 67.225C371.271 54.275 373.604 43.075 378.271 33.625C383.054 24.175 389.763 16.8833 398.396 11.75C407.029 6.61666 417.238 4.04999 429.021 4.04999C440.688 4.04999 450.838 6.61666 459.471 11.75C468.221 16.8833 474.929 24.175 479.596 33.625C484.379 43.075 486.771 54.2167 486.771 67.05C486.771 80 484.379 91.2583 479.596 100.825C474.929 110.275 468.221 117.625 459.471 122.875C450.838 128.008 440.688 130.575 429.021 130.575ZM429.021 114.825C441.271 114.825 450.779 110.683 457.546 102.4C464.429 94 467.871 82.275 467.871 67.225C467.871 52.175 464.488 40.5083 457.721 32.225C450.954 23.9417 441.388 19.8 429.021 19.8C416.771 19.8 407.204 23.9417 400.321 32.225C393.554 40.5083 390.171 52.175 390.171 67.225C390.171 82.275 393.554 94 400.321 102.4C407.204 110.683 416.771 114.825 429.021 114.825Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M529.715 129C523.181 129 519.914 125.733 519.914 119.2V15.425C519.914 8.89165 523.181 5.62499 529.715 5.62499H563.489C583.789 5.62499 599.423 10.9333 610.389 21.55C621.473 32.1667 627.014 47.3917 627.014 67.225C627.014 87.0583 621.473 102.342 610.389 113.075C599.423 123.692 583.789 129 563.489 129H529.715ZM538.114 113.775H562.439C592.889 113.775 608.114 98.2583 608.114 67.225C608.114 36.3083 592.889 20.85 562.439 20.85H538.114V113.775Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M691.07 130.225C685.003 130.225 681.97 127.075 681.97 120.775V71.425L642.77 16.825C640.903 14.1417 640.553 11.4 641.72 8.59999C643.003 5.79999 645.512 4.39999 649.245 4.39999C652.978 4.39999 656.187 6.32499 658.87 10.175L691.42 55.5L723.97 10.175C725.487 8.07499 726.945 6.61666 728.345 5.79999C729.745 4.86666 731.495 4.39999 733.595 4.39999C737.212 4.39999 739.603 5.74166 740.77 8.425C741.937 10.9917 741.412 13.85 739.195 17L699.995 71.6V120.775C699.995 127.075 697.02 130.225 691.07 130.225Z" stroke="#CFCFCF" stroke-width="8"/>
</svg>
看来您需要将 stroke-linecap 设置为方形
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
height: 100%;
width: 100%;
background-color: #c46313;
stroke-linecap: square;
}
#animate
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes lineanim
{
to
{
stroke-dashoffset: 0;
}
}
#animate path:nth-child(1)
{
stroke-dasharray: 778px;
stroke-dashoffset: 778px;
animation: lineanim 1.5s ease-in-out forwards;
}
#animate path:nth-child(2)
{
stroke-dasharray: 393px;
stroke-dashoffset: 393px;
animation: lineanim 1.5s ease-in-out 0.3s forwards;
}
#animate path:nth-child(3)
{
stroke-dasharray: 665px;
stroke-dashoffset: 665px;
animation: lineanim 1.5s ease-in-out 0.6s forwards;
}
#animate path:nth-child(4)
{
stroke-dasharray: 665px;
stroke-dashoffset: 665px;
animation: lineanim 1.5s ease-in-out 0.9s forwards;
}
#animate path:nth-child(5)
{
stroke-dasharray: 696px;
stroke-dashoffset: 696px;
animation: lineanim 1.5s ease-in-out 1.2s forwards;
}
#animate path:nth-child(6)
{
stroke-dasharray: 434px;
stroke-dashoffset: 434px;
animation: lineanim 1.5s ease-in-out 1.5s forwards;
}
<svg id="animate" width="746" height="135" viewBox="0 0 746 135" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9772 129C7.44382 129 4.17715 125.733 4.17715 119.2V15.425C4.17715 8.89165 7.44382 5.62499 13.9772 5.62499H55.6272C68.4605 5.62499 78.3772 8.48332 85.3772 14.2C92.4938 19.8 96.0522 27.675 96.0522 37.825C96.0522 44.475 94.3022 50.1917 90.8022 54.975C87.3022 59.7583 82.5188 63.2583 76.4522 65.475C83.5688 67.3417 89.1105 70.7833 93.0772 75.8C97.0438 80.8167 99.0272 87.175 99.0272 94.875C99.0272 105.842 95.3522 114.3 88.0022 120.25C80.7688 126.083 70.6772 129 57.7272 129H13.9772ZM21.6772 59.525H52.8272C69.8605 59.525 78.3772 52.875 78.3772 39.575C78.3772 26.275 69.8605 19.625 52.8272 19.625H21.6772V59.525ZM21.6772 115H55.6272C72.7772 115 81.3522 108.058 81.3522 94.175C81.3522 80.4083 72.7772 73.525 55.6272 73.525H21.6772V115Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M141.489 129C135.306 129 132.214 125.908 132.214 119.725V14.2C132.214 8.01666 135.248 4.92499 141.314 4.92499C147.381 4.92499 150.414 8.01666 150.414 14.2V113.425H204.664C210.031 113.425 212.714 115.992 212.714 121.125C212.714 126.375 210.031 129 204.664 129H141.489Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M284.578 130.575C272.794 130.575 262.586 128.008 253.953 122.875C245.319 117.625 238.611 110.275 233.828 100.825C229.161 91.2583 226.828 80.0583 226.828 67.225C226.828 54.275 229.161 43.075 233.828 33.625C238.611 24.175 245.319 16.8833 253.953 11.75C262.586 6.61666 272.794 4.04999 284.578 4.04999C296.244 4.04999 306.394 6.61666 315.028 11.75C323.778 16.8833 330.486 24.175 335.153 33.625C339.936 43.075 342.328 54.2167 342.328 67.05C342.328 80 339.936 91.2583 335.153 100.825C330.486 110.275 323.778 117.625 315.028 122.875C306.394 128.008 296.244 130.575 284.578 130.575ZM284.578 114.825C296.828 114.825 306.336 110.683 313.103 102.4C319.986 94 323.428 82.275 323.428 67.225C323.428 52.175 320.044 40.5083 313.278 32.225C306.511 23.9417 296.944 19.8 284.578 19.8C272.328 19.8 262.761 23.9417 255.878 32.225C249.111 40.5083 245.728 52.175 245.728 67.225C245.728 82.275 249.111 94 255.878 102.4C262.761 110.683 272.328 114.825 284.578 114.825Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M429.021 130.575C417.238 130.575 407.029 128.008 398.396 122.875C389.763 117.625 383.054 110.275 378.271 100.825C373.604 91.2583 371.271 80.0583 371.271 67.225C371.271 54.275 373.604 43.075 378.271 33.625C383.054 24.175 389.763 16.8833 398.396 11.75C407.029 6.61666 417.238 4.04999 429.021 4.04999C440.688 4.04999 450.838 6.61666 459.471 11.75C468.221 16.8833 474.929 24.175 479.596 33.625C484.379 43.075 486.771 54.2167 486.771 67.05C486.771 80 484.379 91.2583 479.596 100.825C474.929 110.275 468.221 117.625 459.471 122.875C450.838 128.008 440.688 130.575 429.021 130.575ZM429.021 114.825C441.271 114.825 450.779 110.683 457.546 102.4C464.429 94 467.871 82.275 467.871 67.225C467.871 52.175 464.488 40.5083 457.721 32.225C450.954 23.9417 441.388 19.8 429.021 19.8C416.771 19.8 407.204 23.9417 400.321 32.225C393.554 40.5083 390.171 52.175 390.171 67.225C390.171 82.275 393.554 94 400.321 102.4C407.204 110.683 416.771 114.825 429.021 114.825Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M529.715 129C523.181 129 519.914 125.733 519.914 119.2V15.425C519.914 8.89165 523.181 5.62499 529.715 5.62499H563.489C583.789 5.62499 599.423 10.9333 610.389 21.55C621.473 32.1667 627.014 47.3917 627.014 67.225C627.014 87.0583 621.473 102.342 610.389 113.075C599.423 123.692 583.789 129 563.489 129H529.715ZM538.114 113.775H562.439C592.889 113.775 608.114 98.2583 608.114 67.225C608.114 36.3083 592.889 20.85 562.439 20.85H538.114V113.775Z" stroke="#CFCFCF" stroke-width="8"/>
<path d="M691.07 130.225C685.003 130.225 681.97 127.075 681.97 120.775V71.425L642.77 16.825C640.903 14.1417 640.553 11.4 641.72 8.59999C643.003 5.79999 645.512 4.39999 649.245 4.39999C652.978 4.39999 656.187 6.32499 658.87 10.175L691.42 55.5L723.97 10.175C725.487 8.07499 726.945 6.61666 728.345 5.79999C729.745 4.86666 731.495 4.39999 733.595 4.39999C737.212 4.39999 739.603 5.74166 740.77 8.425C741.937 10.9917 741.412 13.85 739.195 17L699.995 71.6V120.775C699.995 127.075 697.02 130.225 691.07 130.225Z" stroke="#CFCFCF" stroke-width="8"/>
</svg>