CHAPTER 12 WEB DEVELOPMENT AND FRACTALS WITH SVG	

Extract

Von Koch snow flake

Let's start with a line.
We reuse this line for times after we scale it down by the factor 1/3 :
- one at the begin of the original line
- one rotated from –60 degrees and positionned at the end of the previous new line
- one rotated from 60 degrees and positionned at the end of the previous
- one at the end of the previous.

Figure 12-7.  Von Koch curve step 0 and 1

<svg width="650" height="120">
   <defs>
     <path id="level_0" fill="none" stroke="black" d="M0 0h300" />
     <g id="level_1">
         <use xlink:href="#level_0" transform="scale(0.333)" />
         <use xlink:href="#level_0" transform="translate(100 0) rotate(-60) scale(0.333)"/>
         <use xlink:href="#level_0" transform="translate(150 -86.6) rotate(60) scale(0.333)"/>
         <use xlink:href="#level_0" transform="translate(200 0) scale(0.333)"/>
     </g>
   </defs>
   <use xlink:href="#level_0" stroke-width="1" transform="translate(20,100)"/>
   <use xlink:href="#level_1" stroke-width="3" transform="translate(340,100)"/>
</svg>

( view as SVG )

You can see in this code that to get same stroke-width,  we use different values. When we scale a svg object, stroke-width is also scaled.
We repeat this transformation in a simple recursive manner and yield .. the Von Koch curve

Figure 12-8.  Steps 2 3 4 and 5 of the IFS Process 

Here is the code for this steps 

<svg width="650" height="220">
   <defs>
     <path id="level_0" fill="none" stroke="black" d="M0 0h300" />
     <g id="level_1">
         <use xlink:href="#level_0" transform="scale(0.333)" />
         <use xlink:href="#level_0" transform="translate(100 0) rotate(-60) scale(0.333)" />
         <use xlink:href="#level_0" transform="translate(150 -86.6) rotate(60) scale(0.333)" />
         <use xlink:href="#level_0" transform="translate(200 0) scale(0.333)" />
     </g>
     <g id="level_2">
         <use xlink:href="#level_1" transform="scale(0.333)" />
         <use xlink:href="#level_1" transform="translate(100 0) rotate(-60) scale(0.333)" />
         <use xlink:href="#level_1" transform="translate(150 -86.6) rotate(60) scale(0.333)" />
         <use xlink:href="#level_1" transform="translate(200 0) scale(0.333)" />
     </g>
     <g id="level_3">
         <use xlink:href="#level_2" transform="scale(0.333)" />
         <use xlink:href="#level_2" transform="translate(100 0) rotate(-60) scale(0.333)" />
         <use xlink:href="#level_2" transform="translate(150 -86.6) rotate(60) scale(0.333)" />
         <use xlink:href="#level_2" transform="translate(200 0) scale(0.333)" />
     </g>
     <g id="level_4">
         <use xlink:href="#level_3" transform="scale(0.333)" />
         <use xlink:href="#level_3" transform="translate(100 0) rotate(-60) scale(0.333)" />
         <use xlink:href="#level_3" transform="translate(150 -86.6) rotate(60) scale(0.333)" />
         <use xlink:href="#level_3" transform="translate(200 0) scale(0.333)" />
     </g>
     <g id="level_5">
         <use xlink:href="#level_4" transform="scale(0.333)" />
         <use xlink:href="#level_4" transform="translate(100 0) rotate(-60) scale(0.333)" />
         <use xlink:href="#level_4" transform="translate(150 -86.6) rotate(60) scale(0.333)" />
         <use xlink:href="#level_4" transform="translate(200 0) scale(0.333)" />
     </g>
   </defs>
   <use xlink:href="#level_2" stroke-width="9" transform="translate(20,100)" />
   <use xlink:href="#level_3" stroke-width="27" transform="translate(340,100)" />
   <use xlink:href="#level_4" stroke-width="81" transform="translate(20,200)" />
   <use xlink:href="#level_5" stroke-width="243" transform="translate(340,200)" />
</svg>

( view as SVG ) 

And the snow flake ?
We use three lines with id="level_5" to build a triangle. 

With same <defs> part, we have this code : 

   <use xlink:href="#level_5" stroke-width="243" transform="translate(20,100)" />
   <use xlink:href="#level_5" stroke-width="243" transform="translate(320,100) rotate(120)" />
   <use xlink:href="#level_5" stroke-width="243" transform="translate(170,360) rotate(-120)" />

Figure 12-9.  The Von Koch snow flake in SVG

( view as SVG )