Фрактальное дерево на svg

Этот пример относится к числу классических задач для тех, кто начинает изучать новый язык программирования и его графику. Для реализации фрактального дерева надо научиться создавать рекурсивные программы и строить графические изображения. О фракталах говорят много. В Паутине созданы сотни сайтов, посвящённых фракталам. Но большая часть информации сводится к тому, что фракталы это красиво. Да, это так. Множество заблуждений связано с фрактальностью деревьев. Древовидные объекты во многом напоминают фракталы: они строятся итеративно, они выглядят «фрактально», и иногда они даже являются фракталами. Фракталы с одной стороны — сложные (содержащие бесконечно много элементов), с другой стороны — построенные по очень простым законам. Благодаря этому свойству, фракталы обнаруживают много общего со многими природными объектами. Но фрактал выгодно отличается от природного объекта тем, что фрактал имеет строгое математическое определение и поддаётся строгому описанию и анализу. Но, целью данное й публикации не является изучение фрактальных деревьев. Здесь всего лишь демонстрируется возможность нарисовать такое дерево с использованием векторной графики svg, поэтому просто приведем svg-код, построенного здесь дерева.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="320" > <style type="text/css"><![CDATA[ line { stroke: black; stroke-width: .05; } circle { fill: black; } ]]>< /style > <defs> <g id="stem"> <line x1="0" y1="0" x2="0" y2="-1"/> </g> <g id="l0"><use xlink:href="#stem"/></g> <!-- These are identical except for the id and href. --> <g id="l1"> <use xlink:href="#l0" transform="translate(0, -1) rotate(-35) scale(.7)"/> <use xlink:href="#l0" transform="translate(0, -1) rotate(+35) scale(.7)"/> <use xlink:href="#stem"/></g> <g id="l2"> <use xlink:href="#l1" transform="translate(0, -1) rotate(-35) scale(.7)"/> <use xlink:href="#l1" transform="translate(0, -1) rotate(+35) scale(.7)"/> <use xlink:href="#stem"/></g> <g id="l3"> <use xlink:href="#l2" transform="translate(0, -1) rotate(-35) scale(.7)"/> <use xlink:href="#l2" transform="translate(0, -1) rotate(+35) scale(.7)"/> <use xlink:href="#stem"/></g> <g id="l4"> <use xlink:href="#l3" transform="translate(0, -1) rotate(-35) scale(.7)"/> <use xlink:href="#l3" transform="translate(0, -1) rotate(+35) scale(.7)"/> <use xlink:href="#stem"/></g> <g id="l5"> <use xlink:href="#l4" transform="translate(0, -1) rotate(-35) scale(.7)"/> <use xlink:href="#l4" transform="translate(0, -1) rotate(+35) scale(.7)"/> <use xlink:href="#stem"/></g> <g id="l6"> <use xlink:href="#l5" transform="translate(0, -1) rotate(-35) scale(.7)"/> <use xlink:href="#l5" transform="translate(0, -1) rotate(+35) scale(.7)"/> <use xlink:href="#stem"/></g> <g id="l7"> <use xlink:href="#l6" transform="translate(0, -1) rotate(-35) scale(.7)"/> <use xlink:href="#l6" transform="translate(0, -1) rotate(+35) scale(.7)"/> <use xlink:href="#stem"/></g> <g id="l8"> <use xlink:href="#l7" transform="translate(0, -1) rotate(-35) scale(.7)"/> <use xlink:href="#l7" transform="translate(0, -1) rotate(+35) scale(.7)"/> <use xlink:href="#stem"/></g> <g id="l9"> <use xlink:href="#l8" transform="translate(0, -1) rotate(-35) scale(.7)"/> <use xlink:href="#l8" transform="translate(0, -1) rotate(+35) scale(.7)"/> <use xlink:href="#stem"/></g> </ defs > <g transform="translate(200, 320) scale(100)"> <use xlink:href="#l9"/> </g> </ svg >