Screen Shot 2015-01-26 at 14.56.45

Some time ago I was captivated by the capabilities of CSS3. Although I didn’t (and still don’t) like designing websites and messing around with CSS (seriously, who likes spending hours trying to center objects properly) I noticed that the language itself had quite some power. That was when all sorts of mad ideas started popping in my head. Would it be possible to create a turing machine with only CSS and HTML? Could you program Tetris with it that way? What about rendering fractals, would that be possible?

Regarding the Turing machine, I haven’t successfully gotten that to work (I’m lacking a way to access (and store) data easily, it would help if I could use the attr method on alternate attributes other than data). In any case, I did manage to render some (simple) fractals.

Many fractals are defined in function of themselves, in other words they are recursive. CSS rules can be applied to children of a HTML object that already have the rules applied. If we build a specific HTML node tree, we can achieve some sort of semi-recursion.

Let me demonstrate this with a classical fractal, the Pythagoras tree:

The construction of the Pythagoras tree begins with a square. Upon this square are constructed two squares, each scaled down by a linear factor of ½√2, such that the corners of the squares coincide pairwise. The same procedure is then applied recursively to the two smaller squares, ad infinitum.
Construction of the Pythagoras tree, order 0Order 1Order 2Order 3
Source: Wikipedia
Let’s imagine we define a square using a div tag. That would be <div></div>. Using CSS would could render it as a pretty square. But of course, a square is defined as three squares, so we need to add two other div tags. These have to be defined (styled) in function of the first square. We need to add them as child nodes.

Using CSS we can now scale, translate and rotate the children with some CSS:

The 0.707107 can be simply calculated using the law of Pythagoras and doesn’t need any adjusting because it’s relative to the size of his parent.

But this is just one level, how do we generate a fractal of multiple levels deep? Well, sadly enough we can’t dynamically generate HTML with CSS, so we have to hard code the HTML for every level. This is easier than it sounds. Just use your favorite code editor and replace the sequence ‘<div></div>’ with ‘<div><div></div><div></div></div>’. Do this multiple times. That way we will give every cube two child cubes. And gives those child cubes child cubes. And those .. you get the idea :D

Next up just add some CSS that make your cubes pretty. I added some opacity to the mix and got the following result:Screen Shot 2015-01-26 at 14.15.49

Isn’t that pretty? I think it is. You can see it live here.

Using the same technique we can render Koch’s snowflake:

Screen Shot 2015-01-26 at 14.56.45

But in the end, why do this? Why not just use some JavaScript and generate everything? The answer is simple: because I can. Playing around with languages and tools, trying to make it do stuff it was never intended will help you learn a great deal.

I hope you enjoyed this post and that you possibly learned something from it.

Edit:

It seems I’m not the first to do this: http://codepen.io/pixelass/blog/fractals-in-pure-css. Although I made this code in september last year, it seems he already did in August. And he has some pretty interesting tricks, so definitely check that out too!