Как верстать фигуры с этого макета?

Рейтинг: -2Ответов: 1Опубликовано: 12.06.2023
  1. Как правильно верстать все фигуры на этом макете? Мне нужно каждую SVG позиционировать или есть какой-то другой способ? Как бы это делали вы?
  2. Все бэкграунды — сделать их на всю доступную ширину экрана или же max-width: 1440px как на макете?
  3. И еще их просто скачать с макета или все градиенты и волны как-то можно сверстать самому?

Макет на Figma.

css html figma svg
Источник: Stack Overflow на русском

Ответы

▲ 1

их просто скачать с макета или все градиенты и волны как-то можно сверстать самому?

В принципе, в теории, Figma тот же самый векторный редактор, а значит можно если не скачать, то сконвертировать. Но вопрос в другом, сконвертировать что, вот это? Я понимаю, что Figma многим полюбилась за её простоту и функциональность, дизайнеры прям тащатся с неё. Но, за этой простотой скрываются такие вот завитки за пределами видимой области, поэтому тут варианта два: либо нанимать дизайнера, который не будет так делать, и сделает всё оптимально, либо нанимать хорошего верстальщика / верстать самому.
К слову, завитки не самая большая проблема. Использовать 342 элипса там где можно использовать паттерн с точками 🤦‍♂️
Ладно, макет он на то и макет, надеюсь объяснил по поводу скачивания.

Все бэкграунды — сделать их на всю доступную ширину экрана или же max-width: 1440px как на макете?

Эээ… как лучше — решать вам. Или не вам, надо от задач отталкиваться. max-width довольно типичны для Figma и Tilda, если есть желание ограничивать ширину, можно сразу в Tilda собирать, там программировать не надо уметь, от слова, совсем. Но если есть желание сделать качественно, то есть смысл смотреть в сторону responsive и bootstrap. Градиент лучше смотрится на полную ширину, но, опять же, возможно у вас будут причины ширину ограничить.

Как правильно верстать все фигуры на этом макете? Мне нужно каждую SVG позиционировать или есть какой-то другой способ? Как бы это делали вы?

Можно позиционировать, что-то можно исключительно средствами CSS отрисовать. Но, учитывая, что фигуры повторяются, руки чешутся сделать это исключительно средствами SVG. А почему нет? Symbols сэкономят количество кода за счёт переиспользования.

К тому же SVG изначально scalable, первая буква в аббревиатуре, а значит будет растягиваться во весь экран.

Вот, например, отрисовка исключительно средствами SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2056.59 1200">
 <defs>
  <linearGradient id="b" x1="0" x2="2025" y1="0" y2="0" gradientUnits="userSpaceOnUse" spreadMethod="pad">
   <stop offset="0" stop-color="#2628fc"/>
   <stop offset=".33" stop-color="#4443fb"/>
   <stop offset=".63" stop-color="#c657ff"/>
   <stop offset="1" stop-color="#fe8ab5"/>
  </linearGradient>
  <linearGradient id="l" x1="1837" x2="1837" y1="819" y2="847" gradientUnits="userSpaceOnUse">
   <stop offset="0" stop-color="#f6f6f6"/>
   <stop offset="1" stop-color="#bfc0c1"/>
  </linearGradient>
  <linearGradient id="m" x1="1800" x2="1800" y1="830" y2="845" gradientUnits="userSpaceOnUse">
   <stop offset="0" stop-color="transparent"/>
   <stop offset="1" stop-color="#dedfe0"/>
  </linearGradient>
  <linearGradient id="h" x1="1615" x2="1615" y1="276" y2="714" gradientUnits="userSpaceOnUse">
   <stop offset=".85" stop-color="#eee"/>
   <stop offset=".86" stop-color="#c4c4c4"/>
  </linearGradient>
  <linearGradient id="i" x1="1293" x2="1936" y1="0" y2="0" gradientUnits="userSpaceOnUse">
   <stop offset="0" stop-color="#fff" stop-opacity="0"/>
   <stop offset=".5" stop-color="#fff" stop-opacity=".5"/>
   <stop offset="1" stop-color="#fff" stop-opacity="0"/>
  </linearGradient>
  <linearGradient id="f" x1="1615" x2="1615" y1="714" y2="812" gradientUnits="userSpaceOnUse">
   <stop offset="0" stop-color="#717171"/>
   <stop offset=".4" stop-color="#9f9f9fcc"/>
   <stop offset=".85" stop-color="#717171"/>
   <stop offset=".88" stop-color="#bcbcbc"/>
   <stop offset=".9" stop-color="#bfbfbf"/>
   <stop offset=".95" stop-color="#e0e0e0"/>
   <stop offset="1" stop-color="#e8e8e8"/>
  </linearGradient>
  <linearGradient id="g" x1="1536" x2="1693" y1="815" y2="815" gradientUnits="userSpaceOnUse">
   <stop offset="0" stop-color="#e3e3e3"/>
   <stop offset=".05" stop-color="#bdbdbd"/>
   <stop offset=".1" stop-color="#e3e3e3"/>
   <stop offset=".2" stop-color="#b8b8b8"/>
   <stop offset=".5" stop-color="#b8b8b8"/>
   <stop offset=".8" stop-color="#b8b8b8"/>
   <stop offset=".9" stop-color="#e3e3e3"/>
   <stop offset=".95" stop-color="#bdbdbd"/>
   <stop offset="1" stop-color="#e3e3e3"/>
  </linearGradient>
  <linearGradient id="k" x1="1810" x2="1807" y1="830" y2="845" gradientUnits="userSpaceOnUse">
   <stop offset="0" stop-color="#d8d9da"/>
   <stop offset="1" stop-color="#909192"/>
  </linearGradient>
  <symbol id="c" viewBox="0 0 16 16">
   <polygon points="8 0 6 6 0 8 6 10 8 16 10 10 16 8 10 6"/>
  </symbol>
  <symbol id="d" viewBox="0 0 9 18">
   <circle cx="9" cy="9" r="8" fill="none" stroke="#f0f0ff45" stroke-width="1.5"/>
  </symbol>
  <symbol id="n" viewBox="0 0 36 44">
   <path d="M34 15c-8 5-5 14 1 17-8 16-11 9-17 9-4 0-7 6-13-4-6-7-7-25 6-26 3 0 6 2 7 2 2 0 5-2 8-2 1 0 5 0 8 4Zm-16-4c4 0 9-5 8-10-3-1-9 3-8 10Z"/>
  </symbol>
  <symbol bx:pinned="true" id="o" viewBox="0 3 65 3">
   <rect width="65" height="6" x="1444" y="815" fill="#d8d8d8" filter="url(#a)" transform="translate(-1444 -815)"/>
  </symbol>
  <filter id="j" width="1000%" height="1000%" x="-500%" y="-500%" color-interpolation-filters="sRGB">
   <feGaussianBlur in="SourceGraphic" result="gaussian-blur-0" stdDeviation="4 4"/>
  </filter>
  <filter id="a" width="150%" height="150%" x="-10%" y="-10%" filterUnits="objectBoundingBox">
   <feGaussianBlur in="SourceAlpha" result="blur" stdDeviation=".5"/>
   <feSpecularLighting in="blur" result="specOut" specularConstant="6.5" specularExponent="9" surfaceScale="5">
    <fePointLight/>
   </feSpecularLighting>
   <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
   <feComposite in="SourceGraphic" in2="specOut2" k2="1" k3="1.2" k4="-.2" operator="arithmetic" result="litPaint"/>
  </filter>
  <pattern id="e" width="15.8" height="16" x="7" y="6" patternUnits="userSpaceOnUse" viewBox="0 0 9 9">
   <circle cx="2" cy="2" r="2" fill="rgba(240,240,255,.44)"/>
  </pattern>
 </defs>
 <path fill="url(#b)" d="M2057 0H0v1175c353-146 1223 201 2057-109V0Z"/>
 <g stroke-linecap="round" stroke-width="27">
  <line x1="127" x2="154" y1="113" y2="65" stroke="#fcbc04"/>
  <line x1="182" x2="154" y1="113" y2="65" stroke="#4285f4"/>
 </g>
 <circle cx="127" cy="113" r="14" fill="#34a853"/>
 <g fill="none" stroke="#e3dcff" stroke-width=".3">
  <use xlink:href="#c" width="89" height="89" transform="translate(1021 513)"/>
  <use xlink:href="#c" width="89" height="89" transform="translate(1094 1038)"/>
 </g>
 <g fill="#e3dcff">
  <use xlink:href="#c" width="60" height="60" transform="translate(1257 923)"/>
  <use xlink:href="#c" width="60" height="60" transform="translate(994 256)"/>
 </g>
 <use xlink:href="#d" width="65" height="130" transform="translate(1893 860)"/>
 <use xlink:href="#d" width="62" height="123" transform="matrix(-.9 .5 -.5 -.8 1249 426)"/>
 <g fill="url(#e)">
  <rect width="600" height="141" x="95" y="929"/>
  <polygon points="859 836 1079 836 1079 1057 1001 1057 1001 914 859 914" transform="rotate(-7)"/>
  <g transform="rotate(22)">
   <rect width="125" height="95" x="1760" y="355"/>
   <rect width="125" height="95" x="1822" y="240"/>
  </g>
 </g>
 <g stroke="#ff288b">
  <line x1="141" x2="421" y1="790" y2="790" stroke-linecap="round" stroke-width="76"/>
  <rect width="269" height="74" x="1687" y="52" fill="#fff" stroke-width="4" rx="36" ry="36"/>
 </g>
 <g fill="#fdfdff" font-family="Arial">
  <text font-size="33" style="white-space:pre"><tspan x="101" y="592" word-spacing="0">Эффективные рекламные стратегии, подходящие для</tspan><tspan x="101" dy="1.4em" word-spacing="0">вашего бизнеса и обспечивающие рост продаж</tspan></text>
  <g font-weight="700">
   <g font-size="23" letter-spacing=".8">
    <text x="133" y="798" style="white-space:pre">Получить консультацию</text>
    <text x="1171" y="97" style="white-space:pre">Проекты</text>
    <text x="1048" y="97" style="white-space:pre">О нас</text>
    <text x="1334" y="97" style="white-space:pre">Отзывы</text>
    <text x="1491" y="97" style="white-space:pre">Контакты</text>
    <text x="1713" y="97" fill="#ff288b" style="white-space:pre">Обратный звонок</text>
   </g>
   <text font-size="73" style="white-space:pre"><tspan x="105" y="385" letter-spacing="1" word-spacing="1">Превратите клики в</tspan><tspan x="105" dy="1.4em" letter-spacing="1" word-spacing="1">клиентов с Google Ads</tspan></text>
  </g>
 </g>
 <rect width="643" height="438" x="1293" y="276" fill="url(#h)" stroke="#cacaca66" rx="11"/>
 <rect width="643" height="438" x="1293" y="276" fill="url(#i)" rx="11"/>
 <rect width="610" height="343" x="1309" y="291" fill="none" stroke="#000"/>
 <ellipse cx="1534" cy="807" filter="url(#j)" opacity=".3" rx="266" ry="11"/>
 <circle cx="1615" cy="283" r="3"/>
 <circle cx="1624" cy="283" r="1"/>
 <polygon fill="url(#f)" points="1537 714 1691 714 1691 803 1693 812 1536 812 1538 803"/>
 <rect width="157" height="6" x="1536" y="812" fill="url(#g)"/>
 <ellipse cx="1890" cy="685" filter="url(#j)" rx="50" ry="5" transform="rotate(5)"/>
 <path fill="url(#k)" d="m1784 832 8-6 83 23s-80 7-91-17Z"/>
 <path fill="url(#l)" stroke="url(#m)" stroke-width="2" d="M1784 832c-10-13 104-22 106 5 2 16-44 13-62 7-27-14-28-21-44-12Z"/>
 <use xlink:href="#n" width="36" height="44" style="mix-blend-mode:overlay" transform="matrix(.3 0 0 .1 1841 824)"/>
 <path fill="#d8d8d8" d="m1336 848 9-17h379l3 17c0 6-225 3-225 3s-166 3-166-3Z" filter="drop-shadow(rgba(0,0,0,.3) -5px 4px 2px)"/>
 <path fill="url(#g)" d="M1337 852h387s4 0 3-4c0 1-8 1-8 1h-377s-6 0-6-1c-1 4 1 4 1 4Z"/>
 <g>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.5 0 0 -.8 1383.28 831.96)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1409.19 831.94)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1435.24 831.79)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1461.04 831.95)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1487.57 831.84)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1513.6 831.62)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1539.01 831.73)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1565.72 831.9)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1591.3 831.62)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1616.65 831.73)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1643.13 831.67)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1668.37 831.79)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1694.74 831.79)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1719.3 831.84)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1368.43 834.8)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1395.71 835.04)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1421.85 835.04)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1448.13 835.05)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1473.4 835.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1500 835)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1525.6 835.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1551.82 835.31)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1578.62 835.31)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1604.8 835.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1630.8 835.2)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1656.61 835.2)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1683.2 834.94)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1709 835.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.2 0 0 -.8 1721.15 835.15)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.5 0 0 -.8 1380.46 837.75)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1407.22 837.97)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1434.22 838.04)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1460.2 838.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1485.8 838.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1512.63 838.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1539.24 838.04)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1565.2 838.18)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1590.9 838.4)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1617.57 838.32)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1643.47 838.18)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1670.08 838.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1696.34 838.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1721.16 838.18)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.7 0 0 -.8 1386.34 841.62)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1411.44 841.41)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1438.62 841.51)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1465.38 841.62)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1491.62 841.62)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1518.9 841.62)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1544.53 841.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1571.29 841.41)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1597.84 841.3)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1623.3 841.1)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1651.05 841.3)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1676.37 840.9)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.7 0 0 -.8 1721.63 841)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.9 0 0 -.8 1398.27 844.39)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1424.36 844.39)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1451.7 844.28)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1478.62 844.28)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1504.5 844.5)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1530.43 844.5)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1556.94 844.28)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1583.65 844.39)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1610.43 844.53)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1636.98 844.08)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.3 0 0 -.8 1662.23 844.39)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.9 0 0 -.8 1721.71 843.97)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1362.9 848.13)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1389.68 848.28)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1416.4 847.95)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.5 0 0 -.8 1449.77 848.11)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-2 0 0 -.8 1583.85 848.11)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.5 0 0 -.8 1616.63 848.28)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1643.23 847.78)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1670.78 848.11)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1697.09 847.95)"/>
  <use xlink:href="#o" width="65" height="3" transform="matrix(-.4 0 0 -.8 1723.38 847.95)"/>
 </g>
</svg>

Тут всё кроме клавиатуры iMac довольно оптимально, без клавиш на клавиатуре получается 7.88 Kb, что весьма неплохо. С клавиатурой получается 15.1 Kb, вдвое больше, но всё равно меньше чем размытое PNG изображение компьютера, которое весит 68.3 Kb 😁

Думаю, если с клавиатурой подольше поколдовать, можно сделать более оптимально и уменьшить вес, сильно заморачиваться с ней не хочу в рамках ответа. В остальном использованы символы, паттерны, получилось довольно оптимально, и можно сделать ещё оптимальнее.

Можно ли сделать градиент с кругляшами без SVG в CSS? Да, можно:

section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 50px;
  padding-top: 100px;
  background: linear-gradient(90deg, rgba(38,40,252,1) 0%, rgba(68,67,251,1) 33%, rgba(198,87,255,1) 63%, rgba(254,138,181,1) 100%);
}

.curve {
  position: absolute;
  height: 250px;
  width: 100%;
  bottom: 0;
  text-align: center;
}

.curve::before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 55%;
  height: 100%;
  transform: translate(85%, 60%);
  background-color: #fff;
}

.curve::after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, rgba(38,40,252,1) 0%, rgba(68,67,251,1) 66%, rgba(198,87,255,1) 126%);
  transform: translate(-4%, 40%);
  z-index: -1;
}
<section>
  <!-- content here -->
  <div class="curve"></div>
</section>

Но в SVG я вижу больше возможностей для анимации и т.д., а также кода для создания завитка объективно меньше.