В этом уроке мы покажем, как создать простые фоновые узоры в виде чешуи и шестиугольников, используя SVG. С помощью этого эффекта можно создать самые разные узоры. Например, эмитировать мозаику, рыбную чешую или черепицу.

Фоновые узоры в виде чешуи

Разметка для создания фона в виде чешуи довольно простая:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
    <pattern id="scales" width="30" height="30" patternUnits="userSpaceOnUse" patternTransform="scale(2)">
            <g id="curves">
                <path id="inner" d="M0 0c0,30, 30,30 30,0" />
                <path id="outer" d="M0 0c0,30, 30,30 30,0" />
            </g>
            <use x="15" y="15" xlink:href="#curves" />
            <use x="-15" y="15" xlink:href="#curves" />
            <use x="0" y="0" xlink:href="#curves" />
            <use x="15" y="-15" xlink:href="#curves" />
            <use x="-15" y="-15" xlink:href="#curves" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#scales)" />
</svg>

В SVG использован обычный способ создания фона с помощью элемента узора, а также элемент группы.

Фон SVG связан со следующими стилями:

svg {
  background: #0F7173;
}
#scales {
  fill: #0F7173;
}
#inner {
    stroke: #0c4c4d;
    stroke-width: 3.1;
}
#outer {
  stroke: #098f92;
  stroke-width: 0.9;
}

Обратите внимание, элемент SVG и идентификатор #scales используют один и тот же цвет для свойств фона и заполнения соответственно, этот же способ используется и для создания шестиугольника ниже.

Этот узор можно улучшить, задав цвет линии не в шестнадцатеричном формате, а в формате rgba. Таким образом их можно было бы автоматически исправлять, если бы изменились цвета фона и заполнения.

Шестиугольники

Код ниже содержит минимальную разметку для фона в виде шестиугольников:

<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;
}

И снова код SVG использует тот же самый способ с одинаковыми цветами фона и заполнения для элемента SVG и его полигонов, чтобы заполнить этим цветом все пустое место. В этом случае использована последовательность трансформаций узора, чтобы он отображался на веб-странице слегка под углом. Свойство переноса особенно важно, так как если одна из сторон шестиугольника находится на краю видимой области, то создастся впечатление, что у него одна сторона длиннее других.

Так как линии SVG одинаково увеличиваются с каждой стороны средней линии пути SVG, увеличение значения ширины линии сделает все шестиугольники в равной степени меньше относительно их внешней линии.

Демонстрация работы

Примеры на сайте Codepen используют код SVG внутри кода HTML для ясности, но при использовании можно внести код CSS в код SVG и создать из всей сборки код в формате base 64, который можно использовать как значение для свойства фонового изображения. Чтобы полностью разобраться, посмотрите на демонстрации работы фонов в виде чешуи и в виде шестиугольников:

Автор урока Dudley Storey

Смотрите также:

• Создание рекурсивного дизайна SVG, часть первая
• Создание рекурсивного дизайна SVG, часть вторая
• Использование изображений в формате DataURI