Rendering Fractals With Just HTML And CSS

What’s better than spending hours and hours with CSS
trying to get images and text to center properly? Not [Jim], but he did notice that
CSS3 was a very powerful language. He wondered about building Tetris, a Turing Machine, or rendering fractals purely in CSS and HTML. The jury is still out if a Turing machine is possible, but he did manage to generate some simple fractals using just CSS and HTML, no JavaScript required.

Most fractals are recursive, and CSS rules can be applied to HTML objects that have already have rules applied to them. It’s not quite recursion, because there’s no way to dynamically generate HTML with CSS. However, with just a few tags, [Jim] can generate one level of a Pythagoras Tree. This method requires placing tags in the HTML for every level of the tree, greatly limiting the cool factor. That’s easily remedied by a few CTRL+Cs and CTRL+Vs.

The same technique can be used to render a Koch snowflake – seen on this page. Yes, it’s all HTML and CSS, without JavaScript. Why? Because he can, and that’s good enough for us.

18 thoughts on “Rendering Fractals With Just HTML And CSS

  1. “What’s better than spending hours and hours with CSS
    trying to get images and text to center properly? Not [Jim], but he did notice that
    CSS3 was a very powerful language”

    copy-pasta

  2. “because there’s no way to dynamically generate HTML with CSS” Not quite. There are in fact several ways, even more if you use the latest CSS3 additions, not implemented by all browsers yet (there are things like variables, math and counters in CSS now). Usually you just use clever combinations of :before and :after statements, but there are more experimental tricks like building shapes from pseudo-elements (borders, shadows, backgrounds, gradients, etc). And if everything else fails, you can even directly insert content from CSS by using base64-encoded data strings, although smuggling in encoded data would hardly count as “generating HTML”. ;) And of course CSS can not only style HTML, but also SVG, which can be put directly into the HTML code! I think I know what you wanted to say, but that comment is quite wrong. ;)

    1. That is true, what I actually meant was you can’t dynamically insert HTML that can have CSS rules applied against it. Before and after are closer to achieving that but it still wouldn’t allow what is needed to cut of the excess HTML nodes that I use to generate the tree.

      1. Cool, didn’t know box-reflect yet. I’m working on a “Desktop” system running in the browser, with the whole system being inside a single html (including an inbuild webserver to serve itself). Since my goal for the html code is to have not one element that’s not part of the content, you can imagine that generating stuff via css is a big part of my life right now… It’s quite fun to hack CSS to do things it wasn’t intended for. But personally to have fun I need the new additions like variables ( https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables ) and math ( https://developer.mozilla.org/en-US/docs/Web/CSS/calc ). I’m sure I haven’t found even half the strange tricks you can do with it yet. ;)

      1. I just had a look at HTML 5 / SVG after being prompted by this article. I can just use a HTML doctype declaration without knowing anything specifically about HTML 5 and then use Javascript just as I have been but use SVG for rendering. Too easy. Now I can also easily place axis quantities and notes (text) in the rendered image. Perfect.

        SVG took about 2 minutes to learn lol. It’s dead easy, just a cut down of other simple rendering platforms. About 9 or 10 primitives and that’s it.

  3. The main reason no one is using this awesome techniques (CSS Transitions, SVG animation, etc.) is that they are not supported by IE7 the maximum Browser Version for Win7. Thus it will still take a long time until reliable Websites can use this kind of magnificent, JavaScript free and OpenSource Design.

    1. Update: The browser war is over and Microsoft Internet Explorer lost. Seriously MSIE only has any hold on desktops now and there on the way down as far as internet traffic is concerned.

      For so many years MSIE lead the war by introducing ‘cool’ features and downgrading features introduced by other browsers. The result was that every front end developer hates MSIE. You either write code for MSIE or write code for ‘every other browser’. It’s like the issue of pirating media. You can’t p.ss off so many people and then expect it wont come back and bit you on the ass!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.