Fractals Visualization Using SVG

Madhuri Gollu

Graduate Student
San Jose State University
Department of Computer Science

San Jose 
1 Washington Street 


"Fractal is a structure that consists of the parts which are similar to the whole" is given by Mandelbrot.Fractals are irregular in shape and have a property of self-similarity.Self-similar objects are, in some specific sense, composed of smaller copies of themselves.Fractals can be derived from Iterated function systems and Escape time fractals.The property of self-similarity allows fractals to generate a large set of real-world images.Fractals can be used in various fields including Astronomy, Biology,Chemical and fractals art etc.We can find fractals like patterns in creative works.This paper deals with implementing both static and animated fractals based on iterative transformation functions.Fractals presented include Sierpinski Carpet,Pentadentrite.Implementing fractals in SVG is fun when used with random colors and shapes.

Table of Contents

Code fragment
Conclusion and Future work


The main idea behind fractals is that by doing mathematical calcutations we can create great arts.Scalable Vector Graphics [SVG 1.1 ], defines an XML language for describing 2D vector graphics. SVG allows vector graphic shapes (paths,lines, curves,and basic shapes) and Graphical objects can be grouped, styled, transformed and composted into previously rendered objects.Displacement ,compression and rotation techniques are especially suited to SVG. SVG content can be animated using the built-in animation elements such as animate, animateMotion and animateColor. Animation can also be done by manipulating the DOM using ECMAScript, and scripting language's built-in timers(setinterval and settimeout). SVG animation has been designed to be compatible with current and future versions of Synchronized Multimedia Integration Language (SMIL). Animations can be continuous, they can loop and repeat and they can respond to user events. SVG drawings can be interactive and dynamic.In most scenarios people have used static iterative fractals.My work involves visualizing animated fractals using SVG and Javascript DOM. Animations can be defined either declaratively or via scripting.


Using SVG trasformation functions we can achieve static fractals.For example, to draw a Sierpinski Carpet fractal(Fig 2), we will take one solid square and divide it into nine equal squares by using translate,scaling and rotation functions. The original square will be scaled by factor of r .Based on the number of levels, the same process will be repeated for each individual square. To draw a Pentadentrite fractal(Fig 1), we will start from drawing a line from origin.In first iteration, we will draw six lines of length r, with an angle of 72 or 144.We will repeat the same process upto four levels to achieve the below mentioned fractal.Using Javascript DOM and SVG,we can develop animated fractals.

Code fragment

Static Fractal Code :


<line x1="0" y1="0" x2="1" y2="0" id="t"
style="stroke:green;stroke-width:0.4" />
<g id="i1" >
   <use xlink:href="#t"  transform="matrix(0.341 0.071 -0.071 0.341 0 0)" />
   <use xlink:href="#t"  transform="matrix(0.038 0.346 -0.346 0.038 0.341 0.071)" />
   <use xlink:href="#t"  transform="matrix(0.341 0.071 -0.071 0.341 0.379 0.418)" />
   <use xlink:href="#t" transform="matrix(-0.234 -0.258 0.258 -0.234 0.720 0.489)" />
   <use xlink:href="#t" transform="matrix(0.173 -0.302 0.302 0.173 0.486 0.231)" />
   <use xlink:href="#t" transform="matrix(0.341 0.071 -0.071 0.341 0.659 -0.071)" />

Animated Fractal Code :


function createUseElement() {
      var newUseEl = document.createElementNS(svgNS,"use");
      window.setTimeout("createUseElement()", 200);	


Fig1.Pentadentrite and Fig2. Sierpinski Carpet

Conclusion and Future work

The current work uses iterative transformation based fractals with animations.we can develop richer fractal arts can be implemented using SVG and Javascript DOM.Declarative animations also have issues. SMIL animations are browser dependent.Firefox doesn't support SMIL but we can these animations on Opera browser. It is possible to use a scripting language to perform animation of the object. However, scripting animations have several problems. The problem is that scripting animations by definition will be slower than the declarative animations. Second, the scripting engine by itself does not provide time based animation framework, so all required calculations need to be implemented in the scripting language.


[1] THE YALE JOURNAL OF BIOLOGY AND MEDICINE . “Fractals in Physiology and Medicine”. GOLDBERGER ARY L . WEST BRUCE J. 1987. 421-435.

[2] “Calculating Fractal Dimension from Vector Images”. Ran Kelly .

[3] Fractal Memory for Visual Form. Clayton Keith and Frey Barbara . June 1996. Society for Chaos Theory in Psychology and the Life Sciences. Berkeley, CA. .

[4] Journal of Online Mathematics and its Applications . “Mountains of Fractals”. Tim Chartier . May 2008. Copyright © 2008 Timothy Chartier.

[5] “Introduction to FRACTALS”. Shabarshin Alexander . June 1998.

[6] IBM Journal of Research and Development . “A study of the representation of fractal curves by L systems and their equivalences”. Alfonseca M . Ortega A. IBM Corp.. RivertonNJ USA . 1997. 727-736.

[7] Complexity and Fractals in Nature. Fractal 200X. 10. .

[8] Fractal Geometry and Complex Bases. Gilbert William J..

[9] Exploring the Effect of Direction on Vector-Based Fractals. Ibrahim Magdy . Krawczyk Robert J. . September, 2002. eCAADe 2002 Conference. Warsaw, Poland. .

[10] Adaptive Level-of-Detail in SVG. Yi-Hong Chang , Tyng-Ruey Chuang, and Hao-Chuan Wang. September, 2004. SVG Open 2004 Conference and Exhibition. 3. Tokyo, Japan. Canon, Inc.. .