Learn SVG: CHAPTER 12 WEB DEVELOPMENT AND FRACTALS WITH SVG

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

( 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 :



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

( view as 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.