Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/index.html Secret

Created September 12, 2017 17:40
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 mbostock/98edae5ce16c3400b5bcd180653a3717 to your computer and use it in GitHub Desktop.
Save mbostock/98edae5ce16c3400b5bcd180653a3717 to your computer and use it in GitHub Desktop.
Download ZIP
Transform Transition Test
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
#transition-css polygon,
#transition-css-matrix polygon {
transition: all 2s linear;
}
</style>
<svg id="transition-css" height="200" width="200">
<text dy="0.35em" y="10" x="10">CSS rotate Transition</text>
<polygon transform="rotate(20, 100, 100)" fill="red" points="100 90 100 110 10 100"></polygon>
</svg>
<svg id="transition-css-matrix" height="200" width="200">
<text dy="0.35em" y="10" x="10">CSS matrix Transition</text>
<polygon transform="matrix(0.9396926207859084, 0.3420201433256687, -0.3420201433256687, 0.9396926207859084, 40.232752253976024, -28.17127641115772)" fill="red" points="100 90 100 110 10 100"></polygon>
</svg>
<svg id="transition-js" height="200" width="200">
<text dy="0.35em" y="10" x="10">D3 rotate Transition</text>
<polygon transform="rotate(20, 100, 100)" fill="red" points="100 90 100 110 10 100"></polygon>
</svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
d3.timeout(() => {
d3.select("#transition-css polygon")
.attr("fill", "blue")
.attr("transform", "rotate(160, 100, 100)");
});
d3.timeout(() => {
d3.select("#transition-css-matrix polygon")
.attr("fill", "blue")
.attr("transform", "matrix(-0.9396926207859083, 0.3420201433256689, -0.3420201433256689, -0.9396926207859083, 228.17127641115772, 159.76724774602394)");
});
d3.timeout(() => {
d3.select("#transition-js polygon")
.transition()
.duration(2000)
.ease(d3.easeLinear)
.attr("transform", "rotate(160, 100, 100)")
.attr("fill", "blue");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment