Может кто помочь с SVG моментом?

#html #css #html5 #вёрстка #svg

Пытаюсь сделать эту секцию SVG методом.
Смотрю видеоролики, читаю статьи, но все ровно ничего не получается.
Может кто объяснить полностью как сделать эту секцию, или скинуть именно нужные ролики
и статьи, по которым вы поняли как делать подобные секции. 
И заранее попросил бы не кидать первые видео с ютуба(ибо их я и смотрел)

    

Ответы

Ответ 1

Пошаговая инструкция: 


Для получения точной привязки контуров фигур к фоновой картинке
загружаем картинку в векторный редактор и присваиваем значения SVG в
соответствии с габаритными размерами картинки.

width="1330" height="880" viewBox="0 0 1330 880"




    	 



В векторном редакторе с помощью инструмента - Рисовать кривые Безье
и прямые отрезки 

наносим узловые точки по контурам красной линии и шестиугольников    

   
Сохраняем файл SVG, забираем из него path общей
линии и  шестиугольников.    
Добавляем в каждый шестиугольник текст, который  позиционируем
координатами X, Y        

 STEP
  1 


Добавляем картинку в шестиугольник с помощью pattern 


  
  











Добавляем красные кружки с галочкой, вместо них можно добавить иконки, как на
эскизе


  
  ✔




Ниже полный пример кода, добавил анимацию общей линии 



 .h1{
 fill-opacity:0.6;
  } 
 
  .h2 {
 fill-opacity:0.9;
  }
 .txt1 {
  font-size:32px;
  fill:#595959;
  text-decoration: underline;
   font-weight:500;
   } 
  .txt2 {
  font-size:20px;
  fill:#444444;
   font-weight:500;
   } 
 tspan {
 fill:#FC635E;
 font-weight:500;
 font-size:36px;
  } 



Ответ 2

Вот на toster вчера задали вопрос о том как делать такие shape я там ответил и даже
записал видео как это делается: Как делать Shape 

На выходе получаем вот это :



body {
  height: 100vh;
  background: #F3F5F5;
}

.item {
  max-width: 800px;
  height: 600px;
  margin: auto;
  overflow: hidden;
}