Максим

Это Grid



Кстати даже на табличной вёрстке получилось

Я полностью смоделировал ситуацию от json до адаптивного меню : https://codepen.io/topicstarter/pen/ZEbJeME

<div class="a">
  <div class="b"></div>
  <div class="c">
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
  </div>
</div>

.a{
  width: 300px;
  height: 320px;
  flex-direction: column;
  display: flex;
  justify-content: space-between;
}

.b{
  width: 300px;
  height: 200px;
  background: #ccc;
}

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

.d{
  width: 90px;
  height: 100px;
  background: #ccc;
}

Кнопка кликабельна

если я верно понял

.wrapper{
  background-color: #fff;
  height: 3000px;
}

.wrap-2 {
  width: 100vw;
  height: 20vh;
  position: absolute;
  bottom: -50%;
  background-color: red;
 
  animation: go 1s linear  forwards;
}

@keyframes go{
  100%{
    position: fixed;
    bottom: 0;
  }
}

<svg height="200" viewBox="0 0 400 400"  xmlns="http://www.w3.org/2000/svg">
<path d="M 15.498 487.577 L 15.498 431.037 L 62.884 396.913 L 94.033 351.883 L 158.319 309.973 L 189.252 236.175 L 280.039 205.522 L 302.034 124.519 L 320.749 62.004 L 384.937 13.925 L 445.421 30.396 L 469.462 54.445 L 469.462 488.53" stroke="red" stroke-width="4" fill="red" fill-opacity="0" stroke-dasharray="0 1637">
   <animate attributeName="stroke-dasharray"
            dur="2s"
            begin="0s"
            repeatCount="1"
            values="0 1637; 1637 1637"
            id="path"
            fill="freeze"/>
   <animate attributeName="stroke"
            dur="1s"
            begin="path.end"
            repeatCount="1"
            values="red; blue"
            fill="freeze"/>
   <animate attributeName="fill-opacity"
            dur="1s"
            begin="path.end"
            repeatCount="1"
            values="0; 1"
            fill="freeze"/>
  </path>
</svg>

header {
display: flex;
border: Black 2px dotted;
justify-content: center;
align-items: center;
background-color: #20B2AA;
}

https://codepen.io/topicstarter/pen/MWaKYgZ - transition-delay: 0.34s

С разной длинной

Фон и прочее поменяете

Если вставить SVG как img или как background то теряется возможность анимации
Если же SVG просто статичная картинка то разницы нет

left: calc(100% - 50px);
или

position:fixed;
 right: 0;
 top:calc(100px + 150px)

или

position:absolute;
  right: 0;
  top:calc(100px + 150px)

фон укажите в rgba то есть red,green,blue,aplha и записывается это так: rgba(255,0,0,0.5) где 0.5 это прозрачность

Любые знания без практики не имеют смысла

Берёте любой шаблон в сети и делаете то что там изображено вот и будет вам практика

Потом в процессе появятся вопросы ..почему не так выглядит или почему работает криво или как сократить то пишите сюда и здесь разжуют

у меня поместился placeholder

https://ru.stackoverflow.com/a/1104085/308951 - зря удалил свой вопрос на SO

anime.js - в этом духе
pixi.js - сложнее но с webGL
gsap - вообще крутяк но есть платные плагины но хялявных с головой хватит