Skip to content

Instantly share code, notes, and snippets.

@kforeman

kforeman/.block

Last active June 12, 2017 01:55
Show Gist options
  • Save kforeman/bd35296e5539de7f6696924dd95c50d0 to your computer and use it in GitHub Desktop.
Save kforeman/bd35296e5539de7f6696924dd95c50d0 to your computer and use it in GitHub Desktop.
Download ZIP
flubber tests
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/flubber"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
function circlePath(x, y, radius) {
var l = `${x - radius},${y}`,
r = `${x + radius},${y}`,
pre = `A${radius},${radius},0,1,1`;
return `M${l}${pre},${r}${pre},${l}Z`;
}
var littleCircles = d3.range(3).map(function(d) {
return circlePath((d+1)*20, (d+1)*20, 10)
})
svg.selectAll(".little-circle")
.data(littleCircles)
.enter().append("path")
.classed("little-circle", true)
.attr("d", function(d) { return d; })
.style("fill", "black");
var bigCircle = circlePath(200, 200, 50);
svg.append("path")
.classed("big-circle", true)
.attr("d", bigCircle);
var inward = flubber.combine(littleCircles, bigCircle,
{single: true}),
outward = flubber.separate(bigCircle, littleCircles,
{single: true});
var path = svg.append("path")
.attr("d", bigCircle)
.style("fill", "steelblue");
function morph() {
path
.transition().delay(1000).duration(2000)
.attrTween("d", function() {
return outward;
})
.transition().delay(1000).duration(2000)
.attrTween("d", function() {
return inward;
})
.on("end", morph)
}
morph();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment