skip to content

CSS Fibonacci spirals

Example #1 - Using four images

north-west quadrantnorth-east quadrant south-west quadrantsouth-east quadrant north-east quadrantnorth-west quadrant south-west quadrant south-east quadrant

Example #2 - Pure CSS (no images)

Example #3 - and finally for mozilla etc (not IE)

using -moz-border-radius


Information

Prompted by a recent comment I give you my CSS version of Fibonacci's spiral (and no, I hadn't heard of it either). But here it is, produced by using just four quadrants of a circle images and sizes in ems so that it will scale up and down with text sizes.

1st July 2005

My pure CSS version using no graphics (but a bit chunky) added. This used em size containers and percentage size 'curves'.

Cascading Style Sheet
#spiral {position:relative; height:34em;}
#spiral21 {width:21em; position:absolute; left:0; top:13em;}
#spiral13 {width:13em; position:absolute; left:8em; top:0;}
#spiral8 {width:8em; position:absolute; left:0; top:0;}
#spiral5 {width:5em; position:absolute; top:8em; left:0;}
#spiral3 {width:3em; position:absolute; top:10em; left:5em;}
#spiral2 {width:2em; position:absolute; top:8em; left:6em;}
#spiral1a {width:1em; position:absolute; top:8em; left:5em;}
#spiral1b {width:1em; position:absolute; top:9em; left:5em;}

xhtml

<div id="spiral">
  <img id="spiral8" src="nw.gif" />
  <img id="spiral13" src="ne.gif" />
  <img id="spiral5" src="sw.gif" />
  <img id="spiral3" src="se.gif" />
  <img id="spiral2" src="ne.gif" />
  <img id="spiral1a" src="nw.gif" />
  <img id="spiral1b" src="sw.gif" />
  <img id="spiral21" src="se.gif" />
</div>

Copyright

Please ask permission before using or copying this example to your own web site.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.




CSS play recommend

SitegrinderFree, practical CSS menus, layouts, and examplesQuality UK Web HostingPSD to HTMLSocial Media Applications On Demand