Skip to content

Instantly share code, notes, and snippets.

@claudiopro

claudiopro/fib.html

Last active March 25, 2025 08:16
Show Gist options
  • Save claudiopro/ec6e7f44ae079a2e0f66145fc1c8235f to your computer and use it in GitHub Desktop.
Save claudiopro/ec6e7f44ae079a2e0f66145fc1c8235f to your computer and use it in GitHub Desktop.
Download ZIP
Fibonacci Spiral in pure HTML + CSS
Raw
fib.html
<!-- @format -->
<!--
The Fibonacci spiral is an approximation of the golden spiral created by drawing circular
arcs connecting the opposite corners of squares in the Fibonacci tiling, a tiling with
squares whose side lengths are successive Fibonacci numbers: 1, 1, 2, 3, 5, 8, 13, 21...
+-------------------------+----------------------------------------+
| | |
| | |
| | |
| | |
| | |
| 8 | |
| | |
| | |
| | |
| | |
| | 13 |
| | |
| | |
+----------------+-+------+ |
| |1| | |
| +-+ 2 | |
| |1| | |
| 5 +-+------+ |
| | | |
| | 3 | |
| | | |
| | | |
+----------------+--------+----------------------------------------+
-->
<!doctype html>
<html>
<head>
<title>Fibonacci Spiral</title>
<style type="text/css">
:root {
--spiral-stroke-width: 4px;
}
.d {
box-sizing: border-box;
overflow: hidden;
position: absolute;
}
.debug .d {
border: 1px solid #000;
}
.d::before {
border: var(--spiral-stroke-width) solid #000;
box-sizing: border-box;
content: '';
display: block;
}
#d1 {
/* background-color: red; */
height: 10px;
left: 50%;
top: 50%;
width: 10px;
}
#d1::before {
border-radius: 10px;
height: 20px;
transform: translate3d(0, -10px, 0);
width: 20px;
}
#d2 {
/* background-color: yellow; */
height: 10px;
left: 50%;
top: calc(50% - 10px);
width: 10px;
}
#d2::before {
border-radius: 10px;
height: 20px;
width: 20px;
}
#d3 {
/* background-color: green; */
height: 20px;
left: calc(50% + 10px);
top: calc(50% - 10px);
width: 20px;
}
#d3::before {
border-radius: 20px;
height: 40px;
transform: translate3d(-20px, 0, 0);
width: 40px;
}
#d4 {
/* background-color: blue; */
height: 30px;
left: 50%;
top: calc(50% + 10px);
width: 30px;
}
#d4::before {
border-radius: 30px;
height: 60px;
transform: translate3d(-30px, -30px, 0);
width: 60px;
}
#d5 {
/* background-color: purple; */
height: 50px;
left: calc(50% - 50px);
top: calc(50% - 10px);
width: 50px;
}
#d5::before {
border-radius: 50px;
height: 100px;
transform: translate3d(0, -50px, 0);
width: 100px;
}
#d6 {
/* background-color: teal; */
height: 80px;
left: calc(50% - 50px);
top: calc(50% - 90px);
width: 80px;
}
#d6::before {
border-radius: 80px;
height: 160px;
transform: translate3d(0, 0, 0);
width: 160px;
}
#d7 {
/* background-color: orange; */
height: 130px;
left: calc(50% + 30px);
top: calc(50% - 90px);
width: 130px;
}
#d7::before {
border-radius: 130px;
height: 260px;
transform: translate3d(-130px, 0, 0);
width: 260px;
}
#d8 {
/* background-color: magenta; */
height: 210px;
left: calc(50% - 50px);
top: calc(50% + 40px);
width: 210px;
}
#d8::before {
border-radius: 210px;
height: 420px;
transform: translate3d(-210px, -210px, 0);
width: 420px;
}
#d9 {
/* background-color: cyan; */
height: 340px;
left: calc(50% - 390px);
top: calc(50% - 90px);
width: 340px;
}
#d9::before {
border-radius: 340px;
height: 680px;
transform: translate3d(0, -340px, 0);
width: 680px;
}
#d10 {
/* background-color: khaki; */
height: 550px;
left: calc(50% - 390px);
top: calc(50% - 640px);
width: 550px;
}
#d10::before {
border-radius: 550px;
height: 1100px;
transform: translate3d(0, 0, 0);
width: 1100px;
}
#d11 {
/* background-color: maroon; */
height: 890px;
left: calc(50% + 160px);
top: calc(50% - 10px - 80px - 550px);
width: 890px;
}
#d11::before {
border-radius: 890px;
height: 1780px;
transform: translate3d(-890px, 0, 0);
width: 1780px;
}
</style>
</head>
<body class="_debug">
<div
class="d"
id="d1"
></div>
<div
class="d"
id="d2"
></div>
<div
class="d"
id="d3"
></div>
<div
class="d"
id="d4"
></div>
<div
class="d"
id="d5"
></div>
<div
class="d"
id="d6"
></div>
<div
class="d"
id="d7"
></div>
<div
class="d"
id="d8"
></div>
<div
class="d"
id="d9"
></div>
<div
class="d"
id="d10"
></div>
<div
class="d"
id="d11"
></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment