Show logo by letter-CodePudding

I want to make the same effect of the appearance of letters in the logo example. But I can't get the same effect as pushing out the letters.

How can I achieve the same effect?

I have letters in svg format

.title-container{
display:flex;
justify-content:space-between;
}

<div >
    <div >
    <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 >
    <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 >
    <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 >
    <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 >
    <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 >
    <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 >
    <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 >
    <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>

CodePudding user response：

Here's a simple mockup of how you could get it done.

Start the SVGs with a transform of translateX(-150%) and give their parent container an overflow of hidden. Then, make use of @keyframe animation in CSS to move the SVGs into place.

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 >
    <div >
    <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 >
    <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 >
    <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 >
    <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 >
    <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 >
    <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 >
    <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 >
    <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>

CodePudding user response：

If you are wondering exactly how they did it. That animation is a lottie file you can inspect the code for the example you provided and you will find the lottie file (https://uploads-ssl.webflow.com/6092b6e3980b4b3a2f5cd160/60da3867752ffa10ae6c4ae6_LOGO VIBOR HOME.json)

However this is a simple animation you can either learn lottie files or you can use css animations on the elements that you provided.

An animation that moves the element from left to right with increasingly animation-delay values should do the trick for you.

Have a look at this example https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

Edit: Here is a demo, you might need to tweak the timings and if you are using scss you could use a for loop.

.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 >
    <div >
    <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 >
    <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 >
    <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 >
    <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 >
    <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 >
    <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 >
    <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 >
    <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>