Skip to content

Instantly share code, notes, and snippets.

@paulvollmer
Last active December 17, 2015 21:48
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 paulvollmer/5676899 to your computer and use it in GitHub Desktop.
Save paulvollmer/5676899 to your computer and use it in GitHub Desktop.
SVG timeout

Draw SVG's with timeout.

<!DOCTYPE html>
<meta charset="utf-8">
<!-- The stylecheet ------------------------------------------------------- -->
<style>
/* HTML style */
#block-content {
width: 960px;
height: 500px;
background-color: #EEE;
}
/* SVG style */
svg {
margin-top: -5px;
}
rect {
fill: black;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- This is the main div for this block -->
<div id="block-content"></div>
<!-- The javascript ------------------------------------------------------- -->
<script>
for (var i=0; i<100; i++) {
setTimeout("drawSvg()", 100*i);
};
function drawSvg() {
var width = 96,
height = 50;
var svg = d3.select("#block-content")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment