Фоновий малюнок на SVG у вигляді шестикутника і рибячої луски

16

Від автора: Нещодавно в портфоліо одного з моїх учнів я побачив привабливі масштабовані фонові малюнки 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.