RAX7

Почитай как делают рукописный текст на SVG https://css-tricks.com/animate-calligraphy-with-svg/

Анимируй fill-opacity у фигуры от 0 до 1.
Начало анимации можно задавать либо через задержку в секундах, либо по событиям begin/end от других анимаций.
https://css-live.ru/articles/rukovodstvo-po-svg-an...

С помощью clip-path с clipPathUnits="objectBoundingBox" можно вот такое соорудить без паттернов

<svg>
  <!-- Градиент -->
  <linearGradient id="linear-gradient">
    <stop offset="0%" stop-color="gold"/>
    <stop offset="100%" stop-color="teal"/>
  </linearGradient>

  <!-- Фигура с градиентной заливкой -->
  <rect fill="url(#linear-gradient)"
        width="100%" height="100%"/>
</svg>

css.yoksel.ru/svg-gradients

Проще сначала нарисовать как оно должно выглядеть в браузерах которые не могут в SMIL, а уже потом все это попытаться расшевелить.

Можно на масках заменить сетчатые градиенты на радиальные, либо создать переходы похожие на сетку.

ai файл https://we.tl/t-MIBFjwQbzH

Создаем параллельный контур для правой фигуры со смещением допустим 5px

Рисуем эллипс по форме левой фигуры

Переноси параллельный контур поверх всех объектов

Вычитаем из эллипса параллельный контур

готово

уголки доработать скруглением и пером

Всё дело в CMYK, это изображение делали для печати в типографии, для вэб нужно изображение в RGB. Поищи эту картинку в rgb или сконветируй самостоятельно. https://www.youtube.com/watch?v=rzJoNimdUh4

Можно нарисовать полоску на svg с помощь js и анимировать её через stroke-dashoffset

у .swiper-button-next убери position: fixed

Использовать эту фигуру как SVG clip-path для изображения. css.yoksel.ru/css-and-svg-masks

Это не инлайн svg, инлайн это когда прямо в html вставляют <svg>..... </svg>
В less переменную можно вставить как {@bright} lesscss.org/features/#variables-feature
https://codepen.io/anon/pen/MLYLgB?editors=0110

Посмотри как сделано тут
https://codepen.io/munkholm/pen/EaZJQE
https://codepen.io/marinamcpeak/pen/XYNdvd

Текст нужно преобразовать в кривые. В иллюстраторе и фотошопе Текст -> преобразовать в кривые.

• У иконки #search не правильно прописан xlink:href
  
• у #home убрать fill в svg, что красился в css
  
• иконки #smartphone_icon1 нет в спрайте
  
• что такое строка "хлебные крошки" вообще не понял
  

В этом примере обводка по моему вообще вручную нарисована

Почитать вот тут https://webdesign.tutsplus.com/ru/tutorials/how-to...
и сделать