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

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

От автора: Недавно в портфолио одного из моих учеников я увидел привлекательные масштабируемые фоновые рисунки SVG, закодированные в base64. Я раскодировал текстуру с помощью обратной запаковки кода и исправил получившийся 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 задействует стандартную технику 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.

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

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

<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 использует тот же подход – задаются одинаковые цвета background и fill для svg и его полигонов для заполнения любого пустого пространства. В нашем случае я применил несколько трансформаций, чтобы правильно разместить фон на странице.

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

Демо на CodePen

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree