Built with blockbuilder.org
forked from anonymous's block: fresh block
license: mit |
Built with blockbuilder.org
forked from anonymous's block: fresh block
<!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; } | |
rect { | |
fill: white; | |
stroke: blue; | |
} | |
</style> | |
</head> | |
<button id="b1">Start</button> | |
<button id="b2">Reset</button> | |
<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) | |
var square = svg.append("rect") | |
.attr("width", 60) | |
.attr("height",60) | |
.attr("x",75) | |
.attr("y",75); | |
var b1 = d3.select("#b1"), | |
b2 = d3.select("#b2"); | |
b1.on("click", function() { | |
square.transition() | |
.attr("x",320) | |
.style("fill","yellow") | |
.style("stroke-width",.25) | |
.style("stroke", "brown") | |
.duration(1000) | |
.delay(100) | |
.ease("cubic-in-out"); | |
}); | |
b2.on("click", function() { | |
square.transition() | |
.attr("x", 60) | |
.style("fill", "LightGrey") | |
.style("stroke-width", 2) | |
.style("stroke","lightGreen") | |
.duration(1000) | |
.delay(250) | |
.ease("elastic"); | |
}); | |
</script> | |
</body> |