Мозаика Эшера

Разметка для мозаики в файле escher.svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<style type="text/css">
    svg { background: #777; }
    rect { stroke: none; }
    #left { fill: #888; }
    #right { fill: #666; }
</style>
<defs>
<pattern id="boxes" patternUnits="userSpaceOnUse" width="300" height="573" patternTransform="scale(.5)">
        <rect width="150" height="200" transform="skewY(30)" id="left" />
        <rect x="150" y="173" width="150" height="200"  transform="skewY(-30)" id="right" />
        <use xlink:href="#right" transform="translate(-150, 285)" />
        <use xlink:href="#left" transform="translate(150, 285)" />
    </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#boxes)" />
</svg>

body {
	background-image: url(escher.svg);
}

Источник

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

Реклама