Skip to content

Instantly share code, notes, and snippets.

@bricedev
Last active November 20, 2016 20:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bricedev/f6cd895d1d23c9b9711b to your computer and use it in GitHub Desktop.
Save bricedev/f6cd895d1d23c9b9711b to your computer and use it in GitHub Desktop.
Fibonacci Spiral
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 600;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var iterationNumber = 15;
var u = [];
u[0]= 1;
u[1]= 1;
var d = "m" + width * .5 + "," +height * .5;
for (i=0; i<iterationNumber ; i++) {
r = u[i];
x = (i % 4 < 2) ? r : r * (-1);
y = ((i+1) % 4 < 2) ? r : r * (-1);
d += "a" + r + "," + r + " 0 0 0" + x + "," + y
u[i+2] = u[i] + u[i+1];
}
var path = svg.append("path")
.attr("d", d)
.style("stroke-width", 3)
.style("stroke","#1f78b4")
.style("fill","none");
var totalLength = path.node().getTotalLength();
path.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.delay(500)
.ease("exp")
.attr("stroke-dashoffset", 0);
d3.select(self.frameElement).style("height", height + "px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment