Skip to content

Instantly share code, notes, and snippets.

@djamshed

djamshed/.block

Last active July 12, 2018 03:40
Show Gist options
  • Save djamshed/d8fa8911cb78326bef580cd30e5adbc2 to your computer and use it in GitHub Desktop.
Save djamshed/d8fa8911cb78326bef580cd30e5adbc2 to your computer and use it in GitHub Desktop.
Download ZIP
Point-Along-Path Interpolation: half circle
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
cursor: pointer;
fill: #eee;
stroke: #666;
stroke-width: 1.5px;
}
circle {
fill: steelblue;
stroke: white;
stroke-width: 1.5px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = svg.append("path")
.attr("d", d3.svg.arc()
.innerRadius(height / 4)
.outerRadius(height / 3)
.startAngle(0)
.endAngle(Math.PI));
var circle = svg.append("circle")
.attr("r", 6.5)
.attr("transform", "translate(0," + -height / 3 + ")");
function transition() {
circle.transition()
.duration(5000)
.attrTween("transform", translateAlong(path.node()))
.each("end", transition);
}
transition();
// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
var l = path.getTotalLength();
return function(d, i, a) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
</script>
Raw
license
license: gpl-3.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment