HTML Spiral

Flying back from the east coast, lost in a day dream, the image of a golden spiral entered my head and I wondered if I could recreate it with HTML & CSS. LAX doesn't provide free wifi so I spent my layover trying this experiment rather than working on, you know, work.

Check out the full example to see it conforming to the browser's viewport.

HTML

<div id="spiral"> <div class="sp left"> <img src="/sites/default/post_files/spiral/bl.png"> <div class="sp-inner"> <div class="sp bottom"> <img src="/sites/default/post_files/spiral/br.png"> <div class="sp-inner"> <div class="sp right"> <img src="/sites/default/post_files/spiral/tr.png"> <div class="sp-inner"> <div class="sp top"> <img src="/sites/default/post_files/spiral/tl.png"> <div class="sp-inner"> ...one loop completed... ...this can continue to infinity... </div> </div> </div> </div> </div> </div> </div> </div> </div>

CSS

.sp { position: absolute; width: 100%; height: 100%; } .left > img { position: absolute; top: 0; left: 0; width: 60%; height: 100%; } .left > .sp-inner { position: absolute; top: 0; right: 0; width: 40%; height: 100%; } .bottom > img { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; } .bottom > .sp-inner { position: absolute; top: 0; left: 0; width: 100%; height: 40%; } .right > img { position: absolute; top: 0; right: 0; width: 60%; height: 100%; } .right > .sp-inner { position: absolute; top: 0; left: 0; width: 40%; height: 100%; } .top > img { position: absolute; top: 0; left: 0; width: 100%; height: 60%; } .top > .sp-inner { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; }

It was surprisingly easy to put together since the nested structure of such a shape made the css simple and reusable. Basically, there are four "states", each representing a curved side; top-left, bottom-left, bottom-right and top-right.

The HTML is similarly simple and can be endlessly nested. Considering the repetition involved, I wrote a jQuery plugin to add the HTML elements. It continues nesting them until the box size is less than 2px.

An actual golden spiral is based on the (approx. 1.618) but I opted to keep things simple with a 60%/40% size split; a ratio of 1.5. Since all of the spiral's css dimensions are in percentages, the spiral will take on the size of whatever container it is applied to.

Check out the full example to see it conforming to the browser's viewport.