Греческие узоры

css

by Denis Tverdokhlebov

HTML

<hr />
<hr />
<hr />
<!--
-- Greek key --

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xmlns:xlink="http://www.w3.org/1999/xlink">
    <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>

-- Vine Meander --

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30">
    <rect x="-15" y="14.2" width="55" 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>

-- Classical Meander --

<svg version="1.1 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.7 15.2">
<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>

-->

CSS

body {
  margin: 0;
}
hr { 
  border: none; 
  margin: 3rem 0; 
  height: 30px;
}
hr:nth-child(1) {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wave.svg); 
  height: 35px;
}
hr:nth-child(2) { 
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/leaf.svg);
}
hr:nth-child(3) { 
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/simple-wave.svg);
}