Фоновый рисунок на SVG в виде шестиугольника и рыбьей чешуи

Фоновый рисунок на SVG в виде шестиугольника и рыбьей чешуи

От автора: Недавно в портфолио одного из моих учеников я увидел привлекательные масштабируемые фоновые рисунки SVG, закодированные в base64. Я раскодировал текстуру с помощью обратной запаковки кода и исправил получившийся SVG рисунок; также я создал простой фоновый шаблон в виде шестиугольников, которым поделюсь с вами в этой статье.

Рыбья чешуя

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

SVG задействует стандартную технику pattern, которую я показывал в предыдущих статьях; есть одно необычное отличие – дизайн в шаблоне это тег группы. SVG фон ассоциируется со следующими стилями:

Обратите внимание на то, что у тега svg и идентификатора scales задан один и тот же цвет для фона background и fill соответственно. Такой же подход применяется и для шестиугольников ниже. Шаблон можно улучшить, задав обводку тега пути в rgba, а не в шестнадцатеричной системе. Так можно автоматически корректировать цвет, если изменились background и fill.

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

Разметка для шестиугольников минимальна:

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

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

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

Демо на CodePen

Для ясности в демо на CodePen SVG код вставляется напрямую в HTML; в реальности же CSS стили будут находиться внутри SVG, и все это будет закодировано в base64 код, который будет использоваться как значение для свойства background-image. Чтобы вы лучше поняли, о чем речь, я создал два отдельных демо с шестиугольниками и чешуйками на CodePen.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: