Building Drip-Castles using JS and CSS

[Post written by Mario August 22nd, 2010 at 3:10 pm]

...recovered

While looking for some way to draw HTML (sooo lazy :) I came up with some kind of Structure Generation based on divide & conquer. With some CSS it turned out to look like "Kleckerburgen" (engl. Drip Castles). Done by capturing "Mouse-Over" - Event on the initial Element-node, that get divided in 2 child-nodes and so on until reaching a defined max. depth. CSS is adding some visual "offset" to the child-nodes of each level + some shading to each node level.

Elementcount = 1

The poor scripty isn't a beauty at all, but highlights the depth of the nodes created, and so the underlaying html structure.

Here is the Demo @ jsFiddle

Have fun drawing!