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

Демонстрация создания трансформированного смасштабированного SVG с неизменным масштабом линий, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
viewBox="0 0 750 750">
    <defs>
        <g id="hex">
            <polygon points="229.3,627.5 83.6,375.5 229.3,123.5 520.7,123.5 666.4,375.5 520.7,627.5" />
            <line x1="229.3" y1="123.5" x2="520.7" y2="627.5"/>
            <line x1="666" y1="375.5" x2="84" y2="375.5"/>
            <line x1="520.7" y1="123.5" x2="229.3" y2="627.5"/>
        </g>
    </defs> 
    <use xlink:href="#hex" />
    <use xlink:href="#hex" transform="translate(187.5, 187.5) scale(.5)" />
</svg>

CSS

polygon, line { 
    fill: none; stroke: #32679D; stroke-width: 7px;
    vector-effect: non-scaling-stroke; 
}