Skip to content

Instantly share code, notes, and snippets.

@Andrew-Reid

Andrew-Reid/index.html

Last active October 17, 2023 02:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Andrew-Reid/e475b756f5dbcdb7f41ebca4a7ed2d06 to your computer and use it in GitHub Desktop.
Save Andrew-Reid/e475b756f5dbcdb7f41ebca4a7ed2d06 to your computer and use it in GitHub Desktop.
Download ZIP
~20 000 Simultaneous SVG Transitions
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG Lots of Transitions</title>
<script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
</head>
<body>
<svg style="width: 960px; height: 500px"></svg>
<script>
var width = 960;
var height = 500;
var data = d3.range(19200)
var svg = d3.select("svg");
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width",4)
.attr("height",4)
.attr("x", function(d) { return d % (960/5) * 5; })
.attr("y", function(d) { return Math.floor (d/(960/5)) * 5; })
.attr("fill", "steelblue")
rects.transition()
.duration(3000)
.delay(function(d) { return d % (960/5) + Math.floor(d/(960/5) ) })
.attr("x", function(d) { return 960 - d % (960/5) * 5; })
.attr("y", function(d) { return 500 - Math.floor (d/(960/5)) * 5; })
.attr("fill","lightgreen");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment