The Beauty Of SVG Fractals

Fractals are beautiful and looking at the elegant way they can be created with SVG they become even more beautiful.

Iterated Function Systems (IFS) are a fascinating type of selfsimilar fractals. The theory behind them is not so much complicated. All we need to do is to apply a set of affine transformations to a shape.

Let's start with a triangle

triangle

<?xml version="1.0" ?>
<svg width="600" height="400">
   <defs>
     <path id="level_0" fill="#003399" d="M0 0,2 0,1 1.732,z" />
   </defs>
   <use xlink:href="#level_0" transform="translate(200,200) scale(100)" />
</svg>

Now we reuse this triangle three times, while we scale it down by the factor 0.5 and position it at the corners of the - now unused - original triangle.
3 rectangles

<?xml version="1.0" ?>
<svg width="600" height="400">
   <defs>
     <path id="level_0" fill="#003399" d="M0 0,2 0,1 1.732,z" />
     <g id="level_1">
         <use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5   0  0)" />
         <use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5   1  0)" />
         <use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5  0.5 0.866)" />
     </g>
   </defs>
   <use xlink:href="#level_1" transform="translate(200,200) scale(100)" />
</svg>

We repeat this transformation in a simple recursive manner and yield .. the Sierpinsky triangle.

Sierpinsky triangle

<?xml version="1.0" ?>
<svg width="600" height="400">
   <defs>
     <path id="level_0" fill="#003399" d="M0 0,2 0,1 1.732,z" />
     <g id="level_1">
         <use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5   0  0)" />
         <use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5   1  0)" />
         <use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5  0.5 0.866)" />
     </g>
     <g id="level_2">
         <use xlink:href="#level_1" transform="matrix(0.5 0 0 0.5   0  0)" />
         <use xlink:href="#level_1" transform="matrix(0.5 0 0 0.5   1  0)" />
         <use xlink:href="#level_1" transform="matrix(0.5 0 0 0.5  0.5 0.866)" />
     </g>
     <g id="level_3">
         <use xlink:href="#level_2" transform="matrix(0.5 0 0 0.5   0  0)" />
         <use xlink:href="#level_2" transform="matrix(0.5 0 0 0.5   1  0)" />
         <use xlink:href="#level_2" transform="matrix(0.5 0 0 0.5  0.5 0.866)" />
     </g>
     <g id="level_4">
         <use xlink:href="#level_3" transform="matrix(0.5 0 0 0.5   0  0)" />
         <use xlink:href="#level_3" transform="matrix(0.5 0 0 0.5   1  0)" />
         <use xlink:href="#level_3" transform="matrix(0.5 0 0 0.5  0.5 0.866)" />
     </g>
     <g id="level_5">
         <use xlink:href="#level_4" transform="matrix(0.5 0 0 0.5   0  0)" />
         <use xlink:href="#level_4" transform="matrix(0.5 0 0 0.5   1  0)" />
         <use xlink:href="#level_4" transform="matrix(0.5 0 0 0.5  0.5 0.866)" />
     </g>
   </defs>
   <use xlink:href="#level_5" transform="translate(200,200) scale(100)" />
</svg>

You can zoom into the fractal, you can increase the level of iterations (recursions), you can even assign different colors and you can play with other shapes and transformations - rotation, shearing - of course.

one more fractal another fractal

Another feature, that is possible with vector graphics, but not with the pixel based fractals (the majority on the web), is to visualize not only the last level, but all levels.

yet another fractal

It is not very difficult, to get the fractals interactively created by some ecmascript code. The recursive nature of XSLT would also be very useful.

If you want to learn more about IFS and fractals, type iterated function systems or simply fractals into your favorite search engine.

enjoy ..

Don't forget to look at Michel Hitzler's interactive ifs generator.