Штриховка на SVG

С помощью SVG можно создать паттерн для штриховки.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        line { stroke: #ccc; }
    </style>
<defs>
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
  <line x1="0" y1="0" x2="0" y2="10" />
</pattern>
</defs>
    <rect width="100%" height="100%" fill="url(#diagonalHatch)" />
</svg>

Плотность штриховки контролируется шириной pattern, чем меньше значение, тем ближе линии штриховки и наоборот. Цвет линий можно задать в CSS. Толщину можно задать через stroke-width.

body {
	background-image: url(hatch-diagonal.svg);
}

Пример.

Сетка

Проведём линии под прямым углом друг другу - получим сетку. Рисуем через центр паттерна. Сетку можно повернуть на любой угол через атрибут patternTransform:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        line { stroke: #ccc; }
    </style>
    <defs>
        <pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
            <line x1="5" y1="0" x2="5" y2="10" />
            <line x1="0" y1="5" x2="10" y2="5" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)" />
</svg>

body {
	background-image: url(hatch-grid.svg);
}

Можно поиграться с настройками. Сетку можно сделать побольше, добавив scale() в значение patternTransform.

Поперечная штриховка

Усиливаем штриховку наложением второй штриховки под другим углом. Также можно менять цвет и ширину в CSS для SVG:

line { stroke: #333; stroke-width: 6px; }

Также можно применить селектор nth-child.

line:nth-child(odd) {
	stroke: #555; stroke-width: 6px;
}

line:nth-child(even) {
	stroke: #333; stroke-width: 5px;
}

Разместив каждую штриховку в собственном паттерне со своим углом поворота, мы можем создать разные варианты узора.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        line { stroke: #ccc; stroke-width: 3; }
    </style>
    <defs>
        <pattern id="grid1" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(16)">
            <line x1="5" y1="0" x2="5" y2="10" />
        </pattern>
        <pattern id="grid2" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(32)">
            <line x1="5" y1="0" x2="5" y2="10" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid1)" />
    <rect width="100%" height="100%" fill="url(#grid2)" />
</svg>

body {
	background-image: url(hatch-cross.svg);
}

Шахматный узор

Схожая техника пригодится для создания шахматного узора.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        #checkerboard { fill: #ccc; }
    </style>
    <defs>
        <pattern id="checkerboard" patternUnits="userSpaceOnUse" 
        width="50" height="50">
            <rect x="0" y="0" width="25" height="25" />
            <rect x="25" y="25" width="25" height="25" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#checkerboard)" />
</svg>

body {
	background-image: url(hatch-chess.svg);
}

Вернуться в раздел SVG в качестве фонового рисунка.

Реклама