Este artículo también está disponible en español

The geometrical designs of Greek antiquity tend to be applied in rows and columns, rather than area-filling tiles, reflecting their familiar use on friezes and architraves. As such, they are easiest to make as single tiles, with their repetition created in CSS, rather than .

Classical Greek Meander

The meander tile in SVG

Sometimes referred to as a “Greek key” or “Greek fret”, this pattern is probably the most familiar from classical antiquity. Historically, it may have symbolized eternity or unity; its design also echoes the pattern of the classical labyrinth, together with the waves of the Mediterranean and the twists of a river.

Its construction in SVG couldn’t be much simpler. There are just two components: a line and a polyline.

<svg xmlns="" viewBox="0 0 18 18" xmlns:xlink="">
    <style type="text/css">
        line, polyline { fill: none; stroke: #000; stroke-width: 2.5; }
    <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)" />

Employing <use> to make copies of the elements works in our favour: changes to the style of the design are controlled by CSS, as they should be, but changes to the geometry of the line and polyline, such as the treatment of caps and corners, will be instantly reflected in the copies generated by <use>.

Adding this as a decorative border to an HTML element is also quite straightforward:

div {  
    background-image: url(meander.svg);
    background-repeat: repeat-x;
    background-size: 50px 50px; 

This will place the border at the top of the element. If you wanted it on both the top and bottom, you could use two copies of the same referenced file:

div {  
    background-image: url(meander.svg), url(meander.svg);
    background-repeat: repeat-x;
    background-size: 50px 50px; 
    background-position: top, bottom;

Once you have that basic technique, it’s relatively easy to produce more, including the following:

Vine Meander

Using the same principles, it’s possible to make a simple vine decorative element:

<svg xmlns="" xmlns:xlink="" viewBox="0 0 30 30">
    <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"/>
<use xlink:href="#leafpair" transform="translate(-15,0)" />
<use xlink:href="#leafpair" transform="translate(15,0)" />

Recall that almost any HTML element can be provided with a background image, providing the opportunity to make a horizontal rule decorated with a background image:

hr { 
    height: 30px;
    border: none;
    background-image: url(leaf.svg);
    opacity: 0.3;

The result can be seen at the top of this article, and on the associated CodePen demo.

Simple Wave Meander

The final pattern is in many ways the most basic:

<svg version="1.1" xmlns="" viewBox="0 0 16.8 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 "/>

It’s also simple to turn this into a geometric pattern that decorates all sides of an element, using border-image with SVG… a combination I will explore in the next article.

Enjoy this piece? I invite you to follow me at to learn more.
Check out the CodePen demo for this article at