Греческие мотивы

Лабиринт

Для античного орнамента нам понадобится отдельный шаблон, который напоминает лабиринт (вспоминаем греческие мифы).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xmlns:xlink="http://www.w3.org/1999/xlink"
    class="square">
    <style type="text/css">
        line, polyline { fill: none; stroke: #000; stroke-width: 2.5; }
    </style>
    <line x1="0" y1="1.25" x2="18" y2="1.25" id="border" />
    <use xlink:href="#border" transform="translate(0 15.5)" />
    <polyline points="1.25,16.7 1.25,5.7 9.9,5.7 9.9,9.4" id="wave" />
    <use xlink:href="#wave" transform="rotate(180 7.75 9)" />
</svg>

Сохраним в файле greek1.svg и применим правила CSS для размножения.

#greek1 {  
    background-image: url(greek1.svg);
    background-repeat: repeat-x;
    background-size: 50px 50px; 
}

Узор выводится в верхней части контейнера. Если нужно вывести узор в верхней и нижней части контейнера, то пропишем дополнительные правила.

#greek2 {  
    background-image: url(greek1.svg), url(greek1.svg);
    background-repeat: repeat-x;
    background-size: 50px 50px; 
    background-position: top, bottom;
    outline: solid 1px;
}

Виноградный лист

Ещё один греческий мотив, который встречается на кувшинах с вином.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30"
  class="square">
    <rect y="14.2" width="24.8" height="1.2" id="stem" />
        <g id="leafpair">
            <path d="M0.5,0c6,0,16.4,1.3,18,10.5c4.5,2.2,6.2,3.7,6.2,3.7h-2.5l-4.9-2.8c0,0-13.5,0.1-17.4-11.5"/>
            <path d="M0.5,29.5c6,0,16.4-1.3,18-10.5c4.5-2.2,6.2-3.7,6.2-3.7h-2.5L17.4,18c0,0-13.5-0.1-17.4,11.5"/>
        </g>
<use xlink:href="#leafpair" transform="translate(-15,0)" />
<use xlink:href="#leafpair" transform="translate(15,0)" />
</svg>

Сохраним в файле greek2.svg. На этот раз применим его в качестве разделителя <hr>.

hr#greek_leaf { 
    height: 30px;
    border: none;
    background-image: url(greek2.svg);
    opacity: 0.3;
}

---

Волна

Ещё один популярный греческий узор.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.8 15.2"
 class="square">
    <polyline fill="none" stroke="#000" stroke-width="3" points="-1,13.8 9.5,13.8 9.5,7.5 4.2,7.5 4.2,1.5 15.2,1.5 15.2,13.8 16.8,13.8 "/>
</svg>

Применим файл greek3.svg либо в качестве фона как в первом примере, или как разделитель как во втором примере.

---

Источник: the new code – Classical Greek Geometric Borders In SVG

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

Реклама