Від автора: Нещодавно в портфоліо одного з моїх учнів я побачив привабливі масштабовані фонові малюнки SVG, закодовані в base64. Я раскодировал текстуру за допомогою зворотного запаковування коду і виправив цей SVG малюнок; також я створив простий фоновий шаблон у вигляді шестикутників, якими поділюся з вами в цій статті.
Риб’яча луска
Розмітка луски досить проста:
SVG задіює стандартну техніку pattern, яку я показував у попередніх статтях; є одне незвичайне відмінність – дизайн шаблону це тег групи. SVG фон асоціюється з наступними стилями:
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.
Шестикутники
Розмітка для шестикутників мінімальна:
Шаблон використовує наступний код CSS:
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.
