Шестиугольная решётка

С помощью SVG можно создать паттерн для шестиугольной решётки.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%">
     <defs>
        <pattern id="hexagons" width="50" height="43.4" 
        patternUnits="userSpaceOnUse" 
        patternTransform="scale(5) translate(2) rotate(45)">
            <polygon 
            points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2" 
            id="hex" />
            <use xlink:href="#hex" x="25" />
            <use xlink:href="#hex" x="-25" />
            <use xlink:href="#hex" x="12.5" y="-21.7" />
            <use xlink:href="#hex" x="-12.5" y="-21.7" />
        </pattern>
     </defs>
<rect width="100%" height="100%" fill="url(#hexagons)" />
</svg>

Шаблон использует следующий код CSS:

svg { 
  background: rgb(125,155,132); 
}
polygon { 
  fill: rgb(125,155,132); 
  stroke-width: 2;
  stroke: #000;
}

Задаются одинаковые цвета background и fill для svg и его полигонов для заполнения любого пустого пространства. Применим несколько трансформаций, чтобы правильно разместить фон на странице.

Свойство translate имеет особенно важное значение, так как у шестиугольника у края области просмотра одна сторона будет больше другой. Так как SVG обводка пути расширяется равномерно от «средней линии», увеличив значение stroke-width, мы уменьшим внутренние шестиугольники относительно их внешней границы.

Пример.

CodePen

Вернуться в раздел SVG в качестве фонового рисунка.

Реклама