Из простых линий и полос, сделанных с помощью SVG, из которых можно сформировать плиточное фоновое изображение для веб-страницы, в этом уроке мы создадим более сложные формы, которые вместе с режимами наложения и растровыми изображениями произведут эффект многослойных фоновых изображений в стиле поп-арт. С помощью этих способов можно добиться более богатых визуальных эффектов при меньшем размере кода и большей гибкости, чем при использовании градиентов CSS.

Узор шахматной доски

Создать узор шахматной доски с использованием SVG можно при помощи всего двух квадратных элементов, расположенных по диагонали:

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <g fill="#ccc">
        <rect width="25" height="25" />
        <rect x="25" y="25" width="25" height="25" />
    </g>
</svg>

Так получается подобный узор:

Который совмещается с растровым изображением:

section#grid {
    background-image:
      url(checkerboard.svg),
      url(grace-kelly.jpg);
  background-size: 100px 100px, cover;
  background-blend-mode: overlay;
}

И создает первый эффект из показанных ниже. Использованному растровому изображению задается покрытие всего элемента, а узору — повторение каждые 100 пикселей по горизонтали и вертикали. Но вместо того, чтобы просто закрывать собой изображение, узор объединяется с изображением в режиме наложения.

Узор в горошек 

Подобным образом можно изобразить узор в горошек, используя пять кругов, созданных с помощью SVG, — один расположить в центре области отображения и остальные четыре — центрами в углах:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
    <style type="text/css">
        circle { fill: #f99; }
    </style>
    <circle cx="0" cy="0" r="100"/>
    <circle cx="300" cy="0" r="100"/>
    <circle cx="0" cy="300" r="100" />
    <circle cx="300" cy="300" r="100"/>
    <circle cx="150" cy="150" r="100"/>
</svg>

Это создаст следующий узор:

Этот код сохраняется как circle-grid.svg и совмещается с растровым изображением, являющимся фоном элемента:

section#circles {
    background-image:
        url(kelly-brook-as-gilda.jpg),
        url(circle-grid.svg);
    background-size: cover, 100px 100px;
    background-blend-mode: multiply;
}

Заключение 

Эти примеры могут помочь Вам воплотить Ваши идеи. Есть много возможностей для использования подобного в дизайне.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание улучшенных фонов с помощью режима наложения
• Улучшенные рамки изображения с помощью режима наложения
• Создание улучшенных диаграмм с помощью режимов наложения и SVG