Pizza!

Pizza, with generative log spiral pepperoni layout! Made with D3.js.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pizza!</title>
<style>
.dough {
    fill: #E7AF37;
}
.sauce {
    fill: #BD3A2B;
}
.pepperoni {
    fill: #8C140F;
    stroke: #7C0400;
    stroke-width: 3;
}
.cheese {
    fill: #E9C288;
}
.slice {
    fill: none;
    stroke: black;
    stroke-width: 1;
    stroke-opacity: 0.2;
}
</style>
<script src="//d3js.org/d3.v3.js"></script>
</head>
<body>

var width = 480,
    height = width,
    pepperonis = 80,
    slices = 8;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("circle")
    .attr("class", "dough")
    .attr("r", width/2)
    .attr("transform", "translate("+width/2+","+height/2+")");

svg.append("circle")
    .attr("class", "sauce")
    .attr("r", width/2)
    .attr("transform", "translate("+width/2+","+height/2+") scale(0.9)");

svg.append("circle")
    .attr("class", "cheese")
    .attr("r", width/2)
    .attr("transform", "translate("+width/2+","+height/2+") scale(0.875)");

var angle = d3.scale.linear()
    .domain([0, slices])
    .range([0, 360]);

svg.selectAll(".slice")
    .data(d3.range(slices))
  .enter().append("g")
    .attr("class", "slice")
    .attr("transform", function(d) { return "translate("+width/2+","+height/2+") rotate(" + -angle(d) + ")"; })
    .append("line")
    .attr("x1", 0)
    .attr("x2", 0)
    .attr("y1", 0)
    .attr("y2", width/2)

// Log spiral
function Θ(r) {
    return (1/Θ.a) * Math.log(r+1/Θ.b);
};

// Constants for log spiral function
Θ.a = .045;
Θ.b = .9;

var r = d3.scale.linear()
    .domain([0, 2])
    .range([0, d3.min([width, height])/2-40]);

var c = d3.scale.linear()
    .domain([0, pepperonis])
    .range([0, 2]);

function spiralX(d) {
    return r(c(d)) * Math.cos(Θ(r(c(d))));
}

function spiralY(d) {
    return r(c(d)) * Math.sin(Θ(r(c(d))));
}

function update() {
    var pepperoni = svg.selectAll(".pepperoni")
        .data(d3.range(pepperonis));

pepperoni
      .enter().append("circle")
        .attr("class", "pepperoni")
        .attr("r", 16);

pepperoni
        .attr("cx", spiralX)
        .attr("cy", spiralY)
        .attr("transform", "translate("+width/2+","+height/2+")");

pepperoni
      .exit().remove();
}

var oscillate = d3.scale.linear()
    .domain([-1, 1])
    .rangeRound([0, pepperonis]);

update();

var i = 0;
setInterval(function() {
    pepperonis = oscillate(Math.sin(i++/Math.PI));
    update();
}, 166);

</script>

</body>
</html>

https://d3js.org/d3.v3.js