按字母显示徽标
Show logo by letter
我想在徽标中制作字母外观的相同效果 example。但是我无法得到和推出字母一样的效果
怎样才能达到同样的效果？
我有 svg 格式的字母
.title-container{
display:flex;
justify-content:space-between;
}
<div class="title-container">
<div class="title-container__box">
<svg width="159" height="216" viewBox="0 0 159 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M102.104 211.928C113.226 209.799 122.985 206.298 131.361 201.413C139.747 196.529 146.382 190.142 151.266 182.264C156.161 174.385 158.598 164.636 158.598 153.027C158.598 144.621 157.205 137.25 154.41 130.913C151.614 124.576 147.586 118.946 142.323 114.012C137.061 109.078 130.744 104.661 123.383 100.741C116.021 96.822 107.725 93.1214 98.4832 89.6396C91.7187 87.1328 85.6406 84.6956 80.2688 82.3181C74.897 79.9505 70.331 77.5332 66.5707 75.0661C62.8104 72.5991 59.9057 69.9828 57.8664 67.2272C55.8271 64.4817 54.8024 61.358 54.8024 57.8763C54.8024 54.6831 55.7176 51.8082 57.548 49.2416C59.3685 46.685 61.945 44.4866 65.2775 42.6462C68.61 40.8059 72.6985 39.3834 77.5332 38.3687C82.3678 37.354 87.7396 36.8467 93.6486 36.8467C97.9461 36.8467 102.482 37.1351 107.267 37.7121C112.042 38.2891 116.857 39.1844 121.691 40.398C126.526 41.6017 131.231 43.1337 135.797 44.9641C140.363 46.8044 144.581 48.9332 148.451 51.3506V7.97814C140.602 5.27234 132.037 3.26288 122.736 1.95972C113.445 0.656555 102.781 0 90.7438 0C78.4981 0 66.889 1.18379 55.9365 3.55137C44.974 5.91894 35.3246 9.61953 26.9983 14.6531C18.672 19.6768 12.0965 26.0831 7.26189 33.8723C2.42726 41.6515 0 50.9626 0 61.7957C0 75.6232 4.43672 87.4213 13.3002 97.19C22.1637 106.959 35.6231 115.225 53.6783 121.99C60.7711 124.606 67.3765 127.163 73.5043 129.68C79.6222 132.196 84.9144 134.803 89.381 137.518C93.8376 140.224 97.3591 143.169 99.9356 146.362C102.512 149.555 103.805 153.176 103.805 157.235C103.805 160.239 103 163.015 101.388 165.581C99.7765 168.148 97.3293 170.366 94.0465 172.256C90.7737 174.136 86.6852 175.618 81.8008 176.673C76.9065 177.747 71.1865 178.275 64.6408 178.275C53.4595 178.275 42.3975 176.514 31.4351 172.982C20.4726 169.451 10.3159 164.149 0.974884 157.096V203.512C9.35093 207.382 19.2689 210.287 30.7089 212.216C42.1488 214.146 54.2155 215.121 66.889 215.121C79.2442 215.121 90.9925 214.057 102.104 211.928Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="264" height="209" viewBox="0 0 264 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M214.028 39.4972C212.735 55.742 212.089 70.594 212.089 84.0335V208.49H263.509V0.481934H189.199L141.976 123.487C138.753 132.002 135.689 142.009 132.795 153.519H131.83C130.109 143.551 127.363 133.643 123.603 123.775L76.3806 0.481934H0.140625V208.49H47.0445V93.464C47.0445 77.9853 46.3481 59.9996 44.9554 39.4972H46.4079C49.7305 55.0755 52.1477 64.7447 53.6598 68.515L108.781 208.49H151.327L205.483 67.0626C207.632 61.462 210.049 52.2702 212.735 39.4972H214.028Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="229" height="209" viewBox="0 0 229 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.691 162.223H73.4918L57.2073 208.49H0.803223L84.9319 0.481934H146.658L228.857 208.49H172.124L155.691 162.223ZM115.074 37.6171C115.82 44.869 117.113 51.1063 118.943 56.3289L143.763 126.242H84.6135L109.752 55.742C111.9 49.7534 113.243 43.7051 113.781 37.6171H115.074Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="139" height="209" viewBox="0 0 139 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.371094 208.49V0.481934H52.4378V170.49H138.019V208.49H0.371094Z" fill="#DCDCDC"/>
</svg></div>
</div>
如果您想知道他们到底是怎么做到的。该动画是一个 lottie 文件，您可以检查您提供的示例的代码，您会找到 lottie 文件 (https://uploads-ssl.webflow.com/6092b6e3980b4b3a2f5cd160/60da3867752ffa10ae6c4ae6_LOGO%20VIBOR%20HOME.json)
不过，这是一个简单的动画，您可以学习 lottie 文件，也可以在您提供的元素上使用 css animations。
将元素从左向右移动并增加 animation-delay 值的动画应该可以满足您的需要。
看看这个例子https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
编辑：这是一个演示，您可能需要调整时间，如果您使用的是 scss，则可以使用 for 循环。
.title-container {
display: flex;
justify-content: space-between;
}
.title-container__box, .text-container__box {
opacity: 0;
}
@keyframes leftToRight {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0%);
}
}
.title-container__box {
animation: leftToRight 1s forwards;
}
.text-container__box:nth-of-type(2) {
animation: leftToRight 1s 0.4s forwards;
}
.text-container__box:nth-of-type(3) {
animation: leftToRight 1s 0.6s forwards;
}
.text-container__box:nth-of-type(4) {
animation: leftToRight 1s 0.9s forwards;
}
.text-container__box:nth-of-type(5) {
animation: leftToRight 1s 1.2s forwards;
}
.text-container__box:nth-of-type(6) {
animation: leftToRight 1s 1.5s forwards;
}
.text-container__box:nth-of-type(7) {
animation: leftToRight 1s 1.7s forwards;
}
.text-container__box:nth-of-type(8) {
animation: leftToRight 1s 1.9s forwards;
}
<div class="title-container">
<div class="title-container__box">
<svg width="159" height="216" viewBox="0 0 159 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M102.104 211.928C113.226 209.799 122.985 206.298 131.361 201.413C139.747 196.529 146.382 190.142 151.266 182.264C156.161 174.385 158.598 164.636 158.598 153.027C158.598 144.621 157.205 137.25 154.41 130.913C151.614 124.576 147.586 118.946 142.323 114.012C137.061 109.078 130.744 104.661 123.383 100.741C116.021 96.822 107.725 93.1214 98.4832 89.6396C91.7187 87.1328 85.6406 84.6956 80.2688 82.3181C74.897 79.9505 70.331 77.5332 66.5707 75.0661C62.8104 72.5991 59.9057 69.9828 57.8664 67.2272C55.8271 64.4817 54.8024 61.358 54.8024 57.8763C54.8024 54.6831 55.7176 51.8082 57.548 49.2416C59.3685 46.685 61.945 44.4866 65.2775 42.6462C68.61 40.8059 72.6985 39.3834 77.5332 38.3687C82.3678 37.354 87.7396 36.8467 93.6486 36.8467C97.9461 36.8467 102.482 37.1351 107.267 37.7121C112.042 38.2891 116.857 39.1844 121.691 40.398C126.526 41.6017 131.231 43.1337 135.797 44.9641C140.363 46.8044 144.581 48.9332 148.451 51.3506V7.97814C140.602 5.27234 132.037 3.26288 122.736 1.95972C113.445 0.656555 102.781 0 90.7438 0C78.4981 0 66.889 1.18379 55.9365 3.55137C44.974 5.91894 35.3246 9.61953 26.9983 14.6531C18.672 19.6768 12.0965 26.0831 7.26189 33.8723C2.42726 41.6515 0 50.9626 0 61.7957C0 75.6232 4.43672 87.4213 13.3002 97.19C22.1637 106.959 35.6231 115.225 53.6783 121.99C60.7711 124.606 67.3765 127.163 73.5043 129.68C79.6222 132.196 84.9144 134.803 89.381 137.518C93.8376 140.224 97.3591 143.169 99.9356 146.362C102.512 149.555 103.805 153.176 103.805 157.235C103.805 160.239 103 163.015 101.388 165.581C99.7765 168.148 97.3293 170.366 94.0465 172.256C90.7737 174.136 86.6852 175.618 81.8008 176.673C76.9065 177.747 71.1865 178.275 64.6408 178.275C53.4595 178.275 42.3975 176.514 31.4351 172.982C20.4726 169.451 10.3159 164.149 0.974884 157.096V203.512C9.35093 207.382 19.2689 210.287 30.7089 212.216C42.1488 214.146 54.2155 215.121 66.889 215.121C79.2442 215.121 90.9925 214.057 102.104 211.928Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="264" height="209" viewBox="0 0 264 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M214.028 39.4972C212.735 55.742 212.089 70.594 212.089 84.0335V208.49H263.509V0.481934H189.199L141.976 123.487C138.753 132.002 135.689 142.009 132.795 153.519H131.83C130.109 143.551 127.363 133.643 123.603 123.775L76.3806 0.481934H0.140625V208.49H47.0445V93.464C47.0445 77.9853 46.3481 59.9996 44.9554 39.4972H46.4079C49.7305 55.0755 52.1477 64.7447 53.6598 68.515L108.781 208.49H151.327L205.483 67.0626C207.632 61.462 210.049 52.2702 212.735 39.4972H214.028Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="229" height="209" viewBox="0 0 229 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.691 162.223H73.4918L57.2073 208.49H0.803223L84.9319 0.481934H146.658L228.857 208.49H172.124L155.691 162.223ZM115.074 37.6171C115.82 44.869 117.113 51.1063 118.943 56.3289L143.763 126.242H84.6135L109.752 55.742C111.9 49.7534 113.243 43.7051 113.781 37.6171H115.074Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="139" height="209" viewBox="0 0 139 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.371094 208.49V0.481934H52.4378V170.49H138.019V208.49H0.371094Z" fill="#DCDCDC"/>
</svg></div>
</div>
这是一个简单的模型，说明如何完成它。
使用 translateX(-150%) 的转换启动 SVG，并为其父容器提供隐藏溢出。然后，利用 CSS 中的 @keyframe 动画将 SVG 移动到位。
svg {
transform: translateX(-150%);
animation: slide-in 800ms ease forwards;
}
@keyframes slide-in {
to {transform: translateX(0);}
}
.title-container {
display:flex;
justify-content:space-between;
width: fit-content;
}
.text-container__box {
overflow: hidden;
}
<div class="title-container">
<div class="title-container__box">
<svg width="159" height="216" viewBox="0 0 159 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M102.104 211.928C113.226 209.799 122.985 206.298 131.361 201.413C139.747 196.529 146.382 190.142 151.266 182.264C156.161 174.385 158.598 164.636 158.598 153.027C158.598 144.621 157.205 137.25 154.41 130.913C151.614 124.576 147.586 118.946 142.323 114.012C137.061 109.078 130.744 104.661 123.383 100.741C116.021 96.822 107.725 93.1214 98.4832 89.6396C91.7187 87.1328 85.6406 84.6956 80.2688 82.3181C74.897 79.9505 70.331 77.5332 66.5707 75.0661C62.8104 72.5991 59.9057 69.9828 57.8664 67.2272C55.8271 64.4817 54.8024 61.358 54.8024 57.8763C54.8024 54.6831 55.7176 51.8082 57.548 49.2416C59.3685 46.685 61.945 44.4866 65.2775 42.6462C68.61 40.8059 72.6985 39.3834 77.5332 38.3687C82.3678 37.354 87.7396 36.8467 93.6486 36.8467C97.9461 36.8467 102.482 37.1351 107.267 37.7121C112.042 38.2891 116.857 39.1844 121.691 40.398C126.526 41.6017 131.231 43.1337 135.797 44.9641C140.363 46.8044 144.581 48.9332 148.451 51.3506V7.97814C140.602 5.27234 132.037 3.26288 122.736 1.95972C113.445 0.656555 102.781 0 90.7438 0C78.4981 0 66.889 1.18379 55.9365 3.55137C44.974 5.91894 35.3246 9.61953 26.9983 14.6531C18.672 19.6768 12.0965 26.0831 7.26189 33.8723C2.42726 41.6515 0 50.9626 0 61.7957C0 75.6232 4.43672 87.4213 13.3002 97.19C22.1637 106.959 35.6231 115.225 53.6783 121.99C60.7711 124.606 67.3765 127.163 73.5043 129.68C79.6222 132.196 84.9144 134.803 89.381 137.518C93.8376 140.224 97.3591 143.169 99.9356 146.362C102.512 149.555 103.805 153.176 103.805 157.235C103.805 160.239 103 163.015 101.388 165.581C99.7765 168.148 97.3293 170.366 94.0465 172.256C90.7737 174.136 86.6852 175.618 81.8008 176.673C76.9065 177.747 71.1865 178.275 64.6408 178.275C53.4595 178.275 42.3975 176.514 31.4351 172.982C20.4726 169.451 10.3159 164.149 0.974884 157.096V203.512C9.35093 207.382 19.2689 210.287 30.7089 212.216C42.1488 214.146 54.2155 215.121 66.889 215.121C79.2442 215.121 90.9925 214.057 102.104 211.928Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="264" height="209" viewBox="0 0 264 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M214.028 39.4972C212.735 55.742 212.089 70.594 212.089 84.0335V208.49H263.509V0.481934H189.199L141.976 123.487C138.753 132.002 135.689 142.009 132.795 153.519H131.83C130.109 143.551 127.363 133.643 123.603 123.775L76.3806 0.481934H0.140625V208.49H47.0445V93.464C47.0445 77.9853 46.3481 59.9996 44.9554 39.4972H46.4079C49.7305 55.0755 52.1477 64.7447 53.6598 68.515L108.781 208.49H151.327L205.483 67.0626C207.632 61.462 210.049 52.2702 212.735 39.4972H214.028Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="229" height="209" viewBox="0 0 229 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.691 162.223H73.4918L57.2073 208.49H0.803223L84.9319 0.481934H146.658L228.857 208.49H172.124L155.691 162.223ZM115.074 37.6171C115.82 44.869 117.113 51.1063 118.943 56.3289L143.763 126.242H84.6135L109.752 55.742C111.9 49.7534 113.243 43.7051 113.781 37.6171H115.074Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="139" height="209" viewBox="0 0 139 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.371094 208.49V0.481934H52.4378V170.49H138.019V208.49H0.371094Z" fill="#DCDCDC"/>
</svg></div>
</div>
我想在徽标中制作字母外观的相同效果 example。但是我无法得到和推出字母一样的效果
怎样才能达到同样的效果？
我有 svg 格式的字母
.title-container{
display:flex;
justify-content:space-between;
}
<div class="title-container">
<div class="title-container__box">
<svg width="159" height="216" viewBox="0 0 159 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M102.104 211.928C113.226 209.799 122.985 206.298 131.361 201.413C139.747 196.529 146.382 190.142 151.266 182.264C156.161 174.385 158.598 164.636 158.598 153.027C158.598 144.621 157.205 137.25 154.41 130.913C151.614 124.576 147.586 118.946 142.323 114.012C137.061 109.078 130.744 104.661 123.383 100.741C116.021 96.822 107.725 93.1214 98.4832 89.6396C91.7187 87.1328 85.6406 84.6956 80.2688 82.3181C74.897 79.9505 70.331 77.5332 66.5707 75.0661C62.8104 72.5991 59.9057 69.9828 57.8664 67.2272C55.8271 64.4817 54.8024 61.358 54.8024 57.8763C54.8024 54.6831 55.7176 51.8082 57.548 49.2416C59.3685 46.685 61.945 44.4866 65.2775 42.6462C68.61 40.8059 72.6985 39.3834 77.5332 38.3687C82.3678 37.354 87.7396 36.8467 93.6486 36.8467C97.9461 36.8467 102.482 37.1351 107.267 37.7121C112.042 38.2891 116.857 39.1844 121.691 40.398C126.526 41.6017 131.231 43.1337 135.797 44.9641C140.363 46.8044 144.581 48.9332 148.451 51.3506V7.97814C140.602 5.27234 132.037 3.26288 122.736 1.95972C113.445 0.656555 102.781 0 90.7438 0C78.4981 0 66.889 1.18379 55.9365 3.55137C44.974 5.91894 35.3246 9.61953 26.9983 14.6531C18.672 19.6768 12.0965 26.0831 7.26189 33.8723C2.42726 41.6515 0 50.9626 0 61.7957C0 75.6232 4.43672 87.4213 13.3002 97.19C22.1637 106.959 35.6231 115.225 53.6783 121.99C60.7711 124.606 67.3765 127.163 73.5043 129.68C79.6222 132.196 84.9144 134.803 89.381 137.518C93.8376 140.224 97.3591 143.169 99.9356 146.362C102.512 149.555 103.805 153.176 103.805 157.235C103.805 160.239 103 163.015 101.388 165.581C99.7765 168.148 97.3293 170.366 94.0465 172.256C90.7737 174.136 86.6852 175.618 81.8008 176.673C76.9065 177.747 71.1865 178.275 64.6408 178.275C53.4595 178.275 42.3975 176.514 31.4351 172.982C20.4726 169.451 10.3159 164.149 0.974884 157.096V203.512C9.35093 207.382 19.2689 210.287 30.7089 212.216C42.1488 214.146 54.2155 215.121 66.889 215.121C79.2442 215.121 90.9925 214.057 102.104 211.928Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="264" height="209" viewBox="0 0 264 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M214.028 39.4972C212.735 55.742 212.089 70.594 212.089 84.0335V208.49H263.509V0.481934H189.199L141.976 123.487C138.753 132.002 135.689 142.009 132.795 153.519H131.83C130.109 143.551 127.363 133.643 123.603 123.775L76.3806 0.481934H0.140625V208.49H47.0445V93.464C47.0445 77.9853 46.3481 59.9996 44.9554 39.4972H46.4079C49.7305 55.0755 52.1477 64.7447 53.6598 68.515L108.781 208.49H151.327L205.483 67.0626C207.632 61.462 210.049 52.2702 212.735 39.4972H214.028Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="229" height="209" viewBox="0 0 229 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.691 162.223H73.4918L57.2073 208.49H0.803223L84.9319 0.481934H146.658L228.857 208.49H172.124L155.691 162.223ZM115.074 37.6171C115.82 44.869 117.113 51.1063 118.943 56.3289L143.763 126.242H84.6135L109.752 55.742C111.9 49.7534 113.243 43.7051 113.781 37.6171H115.074Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="139" height="209" viewBox="0 0 139 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.371094 208.49V0.481934H52.4378V170.49H138.019V208.49H0.371094Z" fill="#DCDCDC"/>
</svg></div>
</div>
如果您想知道他们到底是怎么做到的。该动画是一个 lottie 文件，您可以检查您提供的示例的代码，您会找到 lottie 文件 (https://uploads-ssl.webflow.com/6092b6e3980b4b3a2f5cd160/60da3867752ffa10ae6c4ae6_LOGO%20VIBOR%20HOME.json)
不过，这是一个简单的动画，您可以学习 lottie 文件，也可以在您提供的元素上使用 css animations。
将元素从左向右移动并增加 animation-delay 值的动画应该可以满足您的需要。
看看这个例子https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
编辑：这是一个演示，您可能需要调整时间，如果您使用的是 scss，则可以使用 for 循环。
.title-container {
display: flex;
justify-content: space-between;
}
.title-container__box, .text-container__box {
opacity: 0;
}
@keyframes leftToRight {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0%);
}
}
.title-container__box {
animation: leftToRight 1s forwards;
}
.text-container__box:nth-of-type(2) {
animation: leftToRight 1s 0.4s forwards;
}
.text-container__box:nth-of-type(3) {
animation: leftToRight 1s 0.6s forwards;
}
.text-container__box:nth-of-type(4) {
animation: leftToRight 1s 0.9s forwards;
}
.text-container__box:nth-of-type(5) {
animation: leftToRight 1s 1.2s forwards;
}
.text-container__box:nth-of-type(6) {
animation: leftToRight 1s 1.5s forwards;
}
.text-container__box:nth-of-type(7) {
animation: leftToRight 1s 1.7s forwards;
}
.text-container__box:nth-of-type(8) {
animation: leftToRight 1s 1.9s forwards;
}
<div class="title-container">
<div class="title-container__box">
<svg width="159" height="216" viewBox="0 0 159 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M102.104 211.928C113.226 209.799 122.985 206.298 131.361 201.413C139.747 196.529 146.382 190.142 151.266 182.264C156.161 174.385 158.598 164.636 158.598 153.027C158.598 144.621 157.205 137.25 154.41 130.913C151.614 124.576 147.586 118.946 142.323 114.012C137.061 109.078 130.744 104.661 123.383 100.741C116.021 96.822 107.725 93.1214 98.4832 89.6396C91.7187 87.1328 85.6406 84.6956 80.2688 82.3181C74.897 79.9505 70.331 77.5332 66.5707 75.0661C62.8104 72.5991 59.9057 69.9828 57.8664 67.2272C55.8271 64.4817 54.8024 61.358 54.8024 57.8763C54.8024 54.6831 55.7176 51.8082 57.548 49.2416C59.3685 46.685 61.945 44.4866 65.2775 42.6462C68.61 40.8059 72.6985 39.3834 77.5332 38.3687C82.3678 37.354 87.7396 36.8467 93.6486 36.8467C97.9461 36.8467 102.482 37.1351 107.267 37.7121C112.042 38.2891 116.857 39.1844 121.691 40.398C126.526 41.6017 131.231 43.1337 135.797 44.9641C140.363 46.8044 144.581 48.9332 148.451 51.3506V7.97814C140.602 5.27234 132.037 3.26288 122.736 1.95972C113.445 0.656555 102.781 0 90.7438 0C78.4981 0 66.889 1.18379 55.9365 3.55137C44.974 5.91894 35.3246 9.61953 26.9983 14.6531C18.672 19.6768 12.0965 26.0831 7.26189 33.8723C2.42726 41.6515 0 50.9626 0 61.7957C0 75.6232 4.43672 87.4213 13.3002 97.19C22.1637 106.959 35.6231 115.225 53.6783 121.99C60.7711 124.606 67.3765 127.163 73.5043 129.68C79.6222 132.196 84.9144 134.803 89.381 137.518C93.8376 140.224 97.3591 143.169 99.9356 146.362C102.512 149.555 103.805 153.176 103.805 157.235C103.805 160.239 103 163.015 101.388 165.581C99.7765 168.148 97.3293 170.366 94.0465 172.256C90.7737 174.136 86.6852 175.618 81.8008 176.673C76.9065 177.747 71.1865 178.275 64.6408 178.275C53.4595 178.275 42.3975 176.514 31.4351 172.982C20.4726 169.451 10.3159 164.149 0.974884 157.096V203.512C9.35093 207.382 19.2689 210.287 30.7089 212.216C42.1488 214.146 54.2155 215.121 66.889 215.121C79.2442 215.121 90.9925 214.057 102.104 211.928Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="264" height="209" viewBox="0 0 264 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M214.028 39.4972C212.735 55.742 212.089 70.594 212.089 84.0335V208.49H263.509V0.481934H189.199L141.976 123.487C138.753 132.002 135.689 142.009 132.795 153.519H131.83C130.109 143.551 127.363 133.643 123.603 123.775L76.3806 0.481934H0.140625V208.49H47.0445V93.464C47.0445 77.9853 46.3481 59.9996 44.9554 39.4972H46.4079C49.7305 55.0755 52.1477 64.7447 53.6598 68.515L108.781 208.49H151.327L205.483 67.0626C207.632 61.462 210.049 52.2702 212.735 39.4972H214.028Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="229" height="209" viewBox="0 0 229 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.691 162.223H73.4918L57.2073 208.49H0.803223L84.9319 0.481934H146.658L228.857 208.49H172.124L155.691 162.223ZM115.074 37.6171C115.82 44.869 117.113 51.1063 118.943 56.3289L143.763 126.242H84.6135L109.752 55.742C111.9 49.7534 113.243 43.7051 113.781 37.6171H115.074Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="139" height="209" viewBox="0 0 139 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.371094 208.49V0.481934H52.4378V170.49H138.019V208.49H0.371094Z" fill="#DCDCDC"/>
</svg></div>
</div>
这是一个简单的模型，说明如何完成它。
使用 translateX(-150%) 的转换启动 SVG，并为其父容器提供隐藏溢出。然后，利用 CSS 中的 @keyframe 动画将 SVG 移动到位。
svg {
transform: translateX(-150%);
animation: slide-in 800ms ease forwards;
}
@keyframes slide-in {
to {transform: translateX(0);}
}
.title-container {
display:flex;
justify-content:space-between;
width: fit-content;
}
.text-container__box {
overflow: hidden;
}
<div class="title-container">
<div class="title-container__box">
<svg width="159" height="216" viewBox="0 0 159 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M102.104 211.928C113.226 209.799 122.985 206.298 131.361 201.413C139.747 196.529 146.382 190.142 151.266 182.264C156.161 174.385 158.598 164.636 158.598 153.027C158.598 144.621 157.205 137.25 154.41 130.913C151.614 124.576 147.586 118.946 142.323 114.012C137.061 109.078 130.744 104.661 123.383 100.741C116.021 96.822 107.725 93.1214 98.4832 89.6396C91.7187 87.1328 85.6406 84.6956 80.2688 82.3181C74.897 79.9505 70.331 77.5332 66.5707 75.0661C62.8104 72.5991 59.9057 69.9828 57.8664 67.2272C55.8271 64.4817 54.8024 61.358 54.8024 57.8763C54.8024 54.6831 55.7176 51.8082 57.548 49.2416C59.3685 46.685 61.945 44.4866 65.2775 42.6462C68.61 40.8059 72.6985 39.3834 77.5332 38.3687C82.3678 37.354 87.7396 36.8467 93.6486 36.8467C97.9461 36.8467 102.482 37.1351 107.267 37.7121C112.042 38.2891 116.857 39.1844 121.691 40.398C126.526 41.6017 131.231 43.1337 135.797 44.9641C140.363 46.8044 144.581 48.9332 148.451 51.3506V7.97814C140.602 5.27234 132.037 3.26288 122.736 1.95972C113.445 0.656555 102.781 0 90.7438 0C78.4981 0 66.889 1.18379 55.9365 3.55137C44.974 5.91894 35.3246 9.61953 26.9983 14.6531C18.672 19.6768 12.0965 26.0831 7.26189 33.8723C2.42726 41.6515 0 50.9626 0 61.7957C0 75.6232 4.43672 87.4213 13.3002 97.19C22.1637 106.959 35.6231 115.225 53.6783 121.99C60.7711 124.606 67.3765 127.163 73.5043 129.68C79.6222 132.196 84.9144 134.803 89.381 137.518C93.8376 140.224 97.3591 143.169 99.9356 146.362C102.512 149.555 103.805 153.176 103.805 157.235C103.805 160.239 103 163.015 101.388 165.581C99.7765 168.148 97.3293 170.366 94.0465 172.256C90.7737 174.136 86.6852 175.618 81.8008 176.673C76.9065 177.747 71.1865 178.275 64.6408 178.275C53.4595 178.275 42.3975 176.514 31.4351 172.982C20.4726 169.451 10.3159 164.149 0.974884 157.096V203.512C9.35093 207.382 19.2689 210.287 30.7089 212.216C42.1488 214.146 54.2155 215.121 66.889 215.121C79.2442 215.121 90.9925 214.057 102.104 211.928Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="264" height="209" viewBox="0 0 264 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M214.028 39.4972C212.735 55.742 212.089 70.594 212.089 84.0335V208.49H263.509V0.481934H189.199L141.976 123.487C138.753 132.002 135.689 142.009 132.795 153.519H131.83C130.109 143.551 127.363 133.643 123.603 123.775L76.3806 0.481934H0.140625V208.49H47.0445V93.464C47.0445 77.9853 46.3481 59.9996 44.9554 39.4972H46.4079C49.7305 55.0755 52.1477 64.7447 53.6598 68.515L108.781 208.49H151.327L205.483 67.0626C207.632 61.462 210.049 52.2702 212.735 39.4972H214.028Z" fill="#DCDCDC"/>
</svg>
</div>
<div class="text-container__box">
<svg width="229" height="209" viewBox="0 0 229 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.691 162.223H73.4918L57.2073 208.49H0.803223L84.9319 0.481934H146.658L228.857 208.49H172.124L155.691 162.223ZM115.074 37.6171C115.82 44.869 117.113 51.1063 118.943 56.3289L143.763 126.242H84.6135L109.752 55.742C111.9 49.7534 113.243 43.7051 113.781 37.6171H115.074Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="185" height="209" viewBox="0 0 185 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.525 208.49H118.741V38.6318H184.665V0.481934H0.929199V38.6318H66.525V208.49Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="228" height="216" viewBox="0 0 228 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.86 215.121C79.764 215.121 52.7955 205.422 31.9549 186.034C11.1043 166.646 0.688965 141.388 0.688965 110.242C0.688965 77.3641 11.2734 50.7636 32.4423 30.4602C53.6013 10.1468 81.6442 0 116.571 0C149.558 0 176.228 9.719 196.591 29.157C216.954 48.595 227.141 74.2206 227.141 106.034C227.141 138.722 216.576 165.074 195.467 185.089C174.348 205.104 146.812 215.121 112.86 215.121ZM115.119 40.3284C132.846 40.3284 146.812 46.3269 157.029 58.314C167.235 70.3011 172.338 87.0831 172.338 108.65C172.338 129.341 167.076 145.516 156.541 157.165C146.006 168.824 131.771 174.644 113.835 174.644C96.4266 174.644 82.3504 168.655 71.6068 156.658C60.8532 144.671 55.4814 128.376 55.4814 107.774C55.4814 87.471 60.8532 71.1467 71.6068 58.8214C82.3504 46.4861 96.8544 40.3284 115.119 40.3284Z" fill="#DCDCDC"/>
</svg></div>
<div class="text-container__box">
<svg width="139" height="209" viewBox="0 0 139 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.371094 208.49V0.481934H52.4378V170.49H138.019V208.49H0.371094Z" fill="#DCDCDC"/>
</svg></div>
</div>