Как сверстать графические элементы из макета

Question

Есть макет с большим количеством графических элементов, как прямоугольник на фоне и кружок с градиентом. Подскажите, пожалуйста, все эти элементы нужно верстать вручную или можно экспортировать их как изображения и просто вставить в верстку?
Как будет правильнее?

Answer 1

Моё предстовление изготовляения подобных банеров

завтра чуть чуть допилю

<svg viewBox="60 50 854 380" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      svg{
        font-family: sans-serif;
      }
      .fo .items div{
        width: 200px;
        margin-left: 10px;
      }
      .fo .items div h3{
        font-size: 18px;
        text-transform: uppercase;
        color: lightblue;
        
      }
      .fo .items div p{
        font-size: 10px;
      }
      .fo .items{
        display: flex;
      }
    </style>
    <radialGradient id="rg">
      <stop offset="3%" stop-color="white"/>
      <stop offset="90%" stop-color="lightblue"/>
      <stop offset="100%" stop-color="lightblue"/>
    </radialGradient>
      <filter id="f" x="0" y="0" width="120%" height="120%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
    </filter>
  </defs>
  <path d="M130,67 901,67 901,390 Q890,410 868,410 L196,384 Q112 377 104,300 L68,130 Q75,70 130,67" fill="blue" fill-opacity="0.1"/>
  <circle cx="820" cy="110" r="60" filter="url(#f)" fill="url(#rg)"/>
  <text x="135" y="145" font-size="20px" font-family="sans-serif" font-weight="800" letter-spacing="1.1">Кому и зачем знать Customer Development </text>
  
<foreignObject x="150" y="160" width="460" height="300" class="fo">
  <div class="items">
    <div>
      <h3>lorem ipsum</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem itaque dolores magnam temporibus non modi unde.
      </p>
    </div>
    <div>
      <h3>lorem ipsum</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem.
      </p>
    </div>
    <div>
      <h3>lorem ipsum</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem itaque dolores.
      </p>
    </div>
  </div>
 </foreignObject>
</svg>

БЛОГ НА HUSL

Как сверстать графические элементы из макета

Ответы (1 шт):