От автора: Недавно в портфолио одного из моих учеников я увидел привлекательные масштабируемые фоновые рисунки SVG, закодированные в base64. Я раскодировал текстуру с помощью обратной запаковки кода и исправил получившийся SVG рисунок; также я создал простой фоновый шаблон в виде шестиугольников, которым поделюсь с вами в этой статье.
Рыбья чешуя
Разметка чешуи довольно проста:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<svg xmlns="//www.w3.org/2000/svg" xmlns:xlink="//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 задействует стандартную технику pattern, которую я показывал в предыдущих статьях; есть одно необычное отличие – дизайн в шаблоне это тег группы. SVG фон ассоциируется со следующими стилями:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
svg { background: #0F7173; } #scales { fill: #0F7173; } #inner { stroke: #0c4c4d; stroke-width: 3.1; } #outer { stroke: #098f92; stroke-width: 0.9; } |
Обратите внимание на то, что у тега svg и идентификатора scales задан один и тот же цвет для фона background и fill соответственно. Такой же подход применяется и для шестиугольников ниже. Шаблон можно улучшить, задав обводку тега пути в rgba, а не в шестнадцатеричной системе. Так можно автоматически корректировать цвет, если изменились background и fill.
Шестиугольники
Разметка для шестиугольников минимальна:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<svg xmlns="//www.w3.org/2000/svg" xmlns:xlink="//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:
1 2 3 4 5 6 7 8 |
svg { background: rgb(125,155,132); } polygon { fill: rgb(125,155,132); stroke-width: 2; stroke: #000; } |
И опять же, SVG использует тот же подход – задаются одинаковые цвета background и fill для svg и его полигонов для заполнения любого пустого пространства. В нашем случае я применил несколько трансформаций, чтобы правильно разместить фон на странице.
Свойство translate имеет особенно важное значение, так как у шестиугольника у края области просмотра одна сторона будет больше другой. Так как SVG обводка пути расширяется равномерно от «средней линии», увеличив значение stroke-width, мы уменьшим внутренние шестиугольники относительно их внешней границы.
Демо на CodePen
Для ясности в демо на CodePen SVG код вставляется напрямую в HTML; в реальности же CSS стили будут находиться внутри SVG, и все это будет закодировано в base64 код, который будет использоваться как значение для свойства background-image. Чтобы вы лучше поняли, о чем речь, я создал два отдельных демо с шестиугольниками и чешуйками на CodePen.
Источник: //thenewcode.com/
Редакция: Команда webformyself.