CSS and the Golden Ratio 🌔 October 28 2013
A few weekes ago while at Brooklyn Beta, I was lucky enough to sit next to Scott Kellum during lunch. He mentioned how recently he had been interested in the idea of making fractals using nested CSS shapes with sizes defined by ems.
I was excited to play with the idea, and so I began working with the golden ratio (1.618033988…). (after 4 years of architecture school, it still has a soft spot in my heart.) Getting the basic shape was easy enough, though I needed to do some tweaking with the positioning to keep the rectangles radiating from the center.
click to toggle css visibility
.golden-ratio{
font-size: 1.618033988749894848204586834em;
background-color: #F00;
opacity: .75;
}
.golden-ratio.horiz {
height: 1em;
width: 1.618033988749894848204586834em;
}
.golden-ratio.vert {
width: 1em;
height: 1.618033988749894848204586834em;
}
.postition-tweak.vert {
position:relative;
bottom:1em;
}
.postition-tweak.horiz {
position:relative;
right:1em;
}
click to toggle html visibility
<div class="experiment-container">
<div class="golden-ratio horiz">
<div class="golden-ratio vert">
<div class="golden-ratio horiz">
<div class="golden-ratio vert postition-tweak">
<div class="golden-ratio horiz postition-tweak">
</div>
</div>
</div>
</div>
</div>
</div>
Then I began work to create the ubiquitous golden spiral. however, after a bit, I realized my css was flawed (see below). nothing aligned quite right.
click to toggle css visibility
/* below is the additional css for the curve */
.golden-ratio.spiral {
background-color: #09F;
}
.spiral.top {
border-radius: 1.618033988749894848204586834em 1.618033988749894848204586834em 0 0;
-moz-border-radius: 1.618033988749894848204586834em 1.618033988749894848204586834em 0 0;
-webkit-border-radius: 1.618033988749894848204586834em 1.618033988749894848204586834em 0 0;
}
.spiral.bottom {
border-radius: 0 0 1.618033988749894848204586834em 1.618033988749894848204586834em;
-moz-border-radius: 0 0 1.618033988749894848204586834em 1.618033988749894848204586834em;
-webkit-border-radius: 0 0 1.618033988749894848204586834em 1.618033988749894848204586834em;
}
.spiral.right {
border-radius: 1.618033988749894848204586834em 0 0 1.618033988749894848204586834em;
-moz-border-radius: 1.618033988749894848204586834em 0 0 1.618033988749894848204586834em;
-webkit-border-radius: 1.618033988749894848204586834em 0 0 1.618033988749894848204586834em;
}
.spiral.left {
border-radius: 0 1.618033988749894848204586834em 1.618033988749894848204586834em 0;
-moz-border-radius: 0 1.618033988749894848204586834em 1.618033988749894848204586834em 0;
-webkit-border-radius: 0 1.618033988749894848204586834em 1.618033988749894848204586834em 0;
}
click to toggle html visibility (same old, just some more classes)
<div class="experiment-container">
<div class="golden-ratio spiral top horiz">
<div class="golden-ratio spiral right vert">
<div class="golden-ratio spiral bottom horiz">
<div class="golden-ratio spiral vert left postition-tweak">
<div class="golden-ratio spiral horiz top postition-tweak">
</div>
</div>
</div>
</div>
</div>
</div>
After getting lost in the possibilities and hacking away at the CSS, I realized the answer was simple (as is the case with most problems of this type). I was using even border-radii when the arcs in a golden spiral are actually lopsided. whoops.
click to toggle css visibility
.golden-ratio.spiral {
background-color: #0A2;
}
.spiral.top {
border-radius: 12em 8em 0 0;
-moz-border-radius: 12em 8em 0 0;
-webkit-border-radius: 12em 8em 0 0;
}
.spiral.bottom {
border-radius: 0 0 12em 8em;
-moz-border-radius: 0 0 12em 8em;
-webkit-border-radius: 0 0 12em 8em;
}
.spiral.right {
border-radius: 8em 0 0 12em;
-moz-border-radius: 8em 0 0 12em;
-webkit-border-radius: 8em 0 0 12em;
}
.spiral.left {
border-radius: 0 12em 8em 0;
-moz-border-radius: 0 12em 8em 0;
-webkit-border-radius: 0 12em 8em 0;
}
click to toggle html visibility (only the classes really change)
<div class="experiment-container">
<div class="golden-ratio spiral top horiz">
<div class="golden-ratio spiral right vert">
<div class="golden-ratio spiral bottom horiz">
<div class="golden-ratio spiral vert left postition-tweak">
<div class="golden-ratio spiral horiz top postition-tweak">
</div>
</div>
</div>
</div>
</div>
</div>
One step closer to global domination! Then next step was some basic interactivity. Scroll up and down on the beginning of the spiral below to grow and shrink it.
It’s pretty basic, but it’s a start. I’m interested in exploring what else can be done in this same vein.
Now, time to tackle the Mandelbrot set.