Built with blockbuilder.org
Last active
January 17, 2017 06:12
-
-
Save ericsoco/1470dd23c29b2095635b1e7e20b75f44 to your computer and use it in GitHub Desktop.
dot-to-bar transition
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></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); | |
var r = 50, | |
isCircle = false; | |
var rect = svg.append("rect") | |
.attr("x", 100) | |
.attr("y", 100) | |
.attr("rx", r) | |
.attr("ry", r) | |
.attr("width", r*2) | |
.attr("height", r*2); | |
// use d3.v4 named transitions to run | |
// concurrent transitions with different timing | |
function runTween (toRect) { | |
if (!toRect) { | |
// circle to rect | |
rect.transition('corners') | |
.duration(1500) | |
.attr("rx", 0) | |
.attr("ry", 0); | |
rect.transition('width') | |
.delay(750) | |
.duration(2500) | |
.attr("width", 760); | |
} else { | |
// rect to circle | |
rect.transition('width') | |
.duration(2500) | |
.attr("width", r*2); | |
rect.transition('corners') | |
.delay(1250) | |
.duration(1500) | |
.attr("rx", r) | |
.attr("ry", r); | |
} | |
} | |
setInterval(function () { | |
runTween(isCircle = !isCircle); | |
}, 4000); | |
runTween(); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment