Создание рекурсивного дизайна SVG, часть вторая

28 июля 2017 | Опубликовано в css | 1 Комментарий »

В предыдущем уроке о создании рекурсивного дизайна SVG мы показали, как создать рекурсивное изображение, используя единственный элемент. Этот урок более сложный, в нем мы покажем, как создать узоры со ссылками на вложенные группы.

Весь узор создан из единственного полигона:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 562.6" 325"> <polygon id="base" points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" /> </svg>

Нам кажется, проще создать подобную сложную конструкцию внутри стандартной области отображения, передвигая ее в окончательный синтаксис позже, так как после перенесения ее в элемент узора она будет невидима по умолчанию, пока на нее не будут ссылаться.

К конструкции применяется простой код CSS:

polygon {
fill: none;
stroke: rgba(0,0,0,0.3);
stroke-width: 3;
}

Из-за того, что линии при масштабировании элемента изменяются по ширине, задание цвета в формате rgba поможет создать более светлые копии.

Базовый элемент полигона находится в корне расширенной группы элементов:

<g id="group">
<polygon points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" id="base" />

Каждый вариант изначального полигона получает собственный идентификатор, на который можно ссылаться с помощью xlink и который в свою очередь может стать основой для дальнейших вариантов внутри своей группы:

<g id="group">
<polygon points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" id="base" />
<g id="basetwist" >
<use xlink:href="#base" transform="rotate(90 280 162.5) translate(116, 67) scale(.58)" id="base_level1" />

Весь узор:

<g id="group">
<polygon points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" id="base" />
<g id="basetwist" >
<use xlink:href="#base" transform="rotate(90 280 162.5) translate(116, 67) scale(.58)" id="base_level1" />
<g id="diamond">
<use xlink:href="#base" transform="translate(188.85, 108) scale(.33)" id="base_level2" />
<g id="sidediamond">
<use xlink:href="#base_level1" transform="translate(188.85, 108) scale(.33)" id="base_level3" />
<use xlink:href="#base_level2" transform="translate(188.85, 108) scale(.33)" id="base_level4" />
<use xlink:href="#base_level3" transform="translate(188.85, 108) scale(.33)" />
<use xlink:href="#base_level4" transform="translate(188.85, 108) scale(.33)" />
</g>
</g>
<use xlink:href="#sidediamond" transform="translate(62,0)" />
<use xlink:href="#sidediamond" transform="translate(-62,0)" />
<use xlink:href="#diamond" transform="translate(0,-107)" />
<use xlink:href="#diamond" transform="translate(0, 107)" />
</g>
</g>

Обратите внимание, что элементы с идентификатором #base_level — это настоящие рекурсии: каждый элемент использует предыдущую версию и те же значения трансформаций и переходов, чтобы создать уменьшенную копию.

Для создания всей конструкции нужно сослаться на то, что уже было сделано как одна группа, все еще работая внутри элемента узора. Для начала создадим множество копий узора, повернутых относительно верхней и нижней точки изначальной формы:

<g id="tesselation">
<use xlink:href="#group" />
<use xlink:href="#group" transform="rotate(60 281 0)" />
<use xlink:href="#group" transform="rotate(-60 281 0)" />
<use xlink:href="#group" transform="rotate(-60 281 325)" />
<use xlink:href="#group" transform="rotate(60 281 325)" />
…
</g>

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

<g id="vert">
<use xlink:href="#group" transform="translate(-282, -162)" />
<use xlink:href="#group" transform="translate(-282, 162)" />
</g>
<use xlink:href="#vert" transform="translate(564, 0)" />

Использование узора

Для использования узора на странице нужно создать прямоугольник и заполнить его окончательным полным узором:

<rect width="100%" height="100%" fill="url(#tesselation)" />

Результат можно увидеть ниже или на сайте CodePen.

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

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

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

Опубликовано в css, июля 28, 2017
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Создание рекурсивного дизайна SVG, часть вторая

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые