DEV Community

Cover image for The Golden Ratio in CSS

The Golden Ratio in CSS

Mads Stoumann on September 25, 2024

The golden ratio, also called the golden number, golden proportion, or even the divine proportion, is a special relationship between two numbers th...
Collapse
 
rust_will_eat_the_world profile image
Nathan Stevens

Now THAT is interesting. I want more of this!
There's way too many listicles on this site.

Every day there's a dozen posts about top 20 tools to bring back your loved ones from the dead or something at the top of the lists.

Same rehashed stuff.

This is what I want more of.
And if there's a better place for things like this, please recommend. :)

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you! You can take a look at some of my earlier posts — recently, I wrote about the solar system and the periodic table in CSS grid.

Collapse
 
drazenbebic profile image
Drazen Bebic

That is a very creative project, Love it!

This got me thinking: If you can find a way to maybe randomize patterns, streaks, colors, etc., you could programmatically create abstract art. Could also be using the HTML canvas tag instead of CSS. Not sure if something like this already exists?

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you! I have a work-in-progress project with svg-based art generators, here’s one of them: browser.style/art/bauhaus/

Collapse
 
madsstoumann profile image
Mads Stoumann

This is without overflow:hidden — kinda beautiful!
Without overflow

Collapse
 
mannuelf profile image
Mannuel

very cool

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
annavi11arrea1 profile image
Anna Villarreal

I absolutely love this. Super clear, easy to follow, and it's just interesting. Thanks!

Collapse
 
madsstoumann profile image
Mads Stoumann

Happy to hear that — thanks!

Collapse
 
martinbaun profile image
Martin Baun

Brilliant move, respect!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
best_codes profile image
Best Codes

Love it! I like the Fibonacci sequence as well.

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
edchtzwe profile image
Ed

Noobs draw art on excel.
Pros draw art with CSS haha
Fascinating stuff you got there

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you! I’m just a former graphic designer who see grids everywhere 😂

Collapse
 
aditya_075 profile image
Aditya Mhambrey

As someone starting out with web design, this article opened my eyes to a new world of possibilities. Bravo!

Collapse
 
madsstoumann profile image
Mads Stoumann

Nice! Thanks!