Создание фонов SVG в виде штриховки, сетки и шахматной доски

Демонстрация работы фона в виде шахматной доски, созданного с использованием SVG, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="margin: 2rem auto">
    <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>
            <rect x="25" y="25" width="25" height="25"></rect>
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#checkerboard)"></rect>
</svg>