Skip to content

Instantly share code, notes, and snippets.

/.block

Created June 12, 2017 01:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/836b5b9be7c25f4a6b32caf4d98816e2 to your computer and use it in GitHub Desktop.
Save anonymous/836b5b9be7c25f4a6b32caf4d98816e2 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
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>
// Feel free to change or delete any of the code you see in this editor!
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")
.transition().duration(2000)
.attrTween("d", function() {
return outward;
})
.transition().delay(1000).duration(2000)
.attrTween("d", function() {
return inward;
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment