Skip to content

Instantly share code, notes, and snippets.

@newsroomdev
Last active May 9, 2020 15:02
Show Gist options
  • Save newsroomdev/517fd965090d9beb2ea5831ccb9d9af8 to your computer and use it in GitHub Desktop.
Save newsroomdev/517fd965090d9beb2ea5831ccb9d9af8 to your computer and use it in GitHub Desktop.
Fibonacci Spiral
license: mit
<!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.25;
var d = "m" + width * .5 + "," +height * .55;
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