SVG Fractals

I put this here as a quick exploration of Fractals and SVG. If you think about it, many classes of fractals are an ideal application of SVG in that SVG defines shapes and operations which readily lend themselves to the application of affine transformations which can be used to create fractal patterns. Throw in ecmascript, and you have a perfect system for the implementation of Iterated Function Systems (IFS's).

Example: The Sierpinsky Triangle in SVG and Ecmascript

Here's the Sierpinsky Triangle in SVG and ecmascript. Left click the pattern to iterate into the fractal. Right click to reverse. Zoom in and out to see the self-similarity within the figure at different scales.

View source...

With respect to transformations, SVG allows you to define groups over which transformations can be applied using matrix operations (as exemplified in the Sierpinsky triangle fractal inlined below). The following code fragment from the example illustrates:

  <defs>
    <polygon 
      id="iteration_0" 
      fill="#003399" 
      points="0,0 2,0 1,1.732" />
<!--
ON EACH ITERATION WE SCALE BY HALF (matrix elements 1 and 4 are 
the x and y scaling factors) AND TRANSLATE EACH RESULTANT TRIANGLE
GROUP OUT TO CORNERS...
-->
    <g id='iteration_1'>
      <use 
        xlink:href="#iteration_0" 
        transform="matrix(0.5 0 0 0.5 0 0)" />
      <use 
        xlink:href="#iteration_0" 
        transform="matrix(0.5 0 0 0.5 1  0)" />
      <use 
        xlink:href="#iteration_0" 
        transform="matrix(0.5 0 0 0.5 0.5 0.866)" />
    </g>
  </defs>

The code fragment shows how recursive SVG groups can be constructed for successive iterations over the shape to generate the fractal pattern. (With thank to the anonymous post here...). Once you have the groups set up, it's easy to create the javascript iterative function to generate increasing levels of detail on the fractal pattern. The details on SVG transformation matrices are provided in the spec...