Африканские мотивы

Raffia

Узор Raffia используется в одежде. Сохраним в файле raffia.svg код.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
    <pattern id="tiles" patternUnits="userSpaceOnUse" width="12" height="12" patternTransform="scale(12) rotate(45)">
        <defs>
            <g id="tile">
                <rect x="-2" y="0" width="1" height="1" />           
    <polyline points="3,.5 .5,.5 .5,4.5 4.5,4.5 4.5,2" fill="none" stroke="#000" />
                <rect x="2" y="2" width="1" height="1"/>
                <rect x="4" y="0" width="1" height="1"/>
                <rect x="4" y="6" width="1" height="1"/>
            </g>
        </defs>
        <use xlink:href="#tile" />
		<use xlink:href="#tile" transform="rotate(90 4 4) translate(2 -3)" />
		<use xlink:href="#tile" transform="rotate(-90 4 4) translate(-3 10)" />
		<use xlink:href="#tile" transform="rotate(-180 4 4) translate(-1 -5)" />
		<use xlink:href="#tile" transform="rotate(-180 4 4) translate(-1 7)" />
		<use xlink:href="#tile" transform="rotate(-90 4 4) translate(-3 -2)"/> 
    </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#tiles)" />
</svg>

Создадим сетку размером 12 × 12. Элемент rect размером 1 × 1 без всяких атрибутов выводит квадратную точку. С помощью polyline создаём массив точек. Данный элемент автоматически создаёт контур толщиной 1 единицу, поэтому нужно позиционировать по средней линии сетки. Отдельный элемент узора выглядит следующим образом.

Далее повторяем элемент узора в разных позициях, вращая его. Приведем последовательность операций.

Первый проход.

Второй проход

Третий проход

Четвертый проход

Пятый проход

Окончательный вариант.

Pottery

Сохраним в файле pottery.svg код.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
    <pattern id="tiles" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="scale(15) rotate(45)">
        <g id="blackboxwhitefill">
            <rect width="3" height="3" id="bigbox" />
            <use xlink:href="#smallbox" fill="#fff" transform="translate(-3)" />
        </g>
        <g id="whiteboxblackfill">
            <use xlink:href="#bigbox" fill="#fff" transform="translate(3)" />
            <rect width="1" height="1" x="4" y="1" id="smallbox" />
        </g>
    <use xlink:href="#whiteboxblackfill" transform="translate(-3,3)" />
    <use xlink:href="#blackboxwhitefill" transform="translate(3,3)" />
    </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#tiles)" />
</svg>

На этот раз используется сетка 6 × 6.

Источник: the new code – SVG Patterns of Africa

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

Реклама