Skip to content

Instantly share code, notes, and snippets.

@lordliquid

lordliquid/.block

Last active March 1, 2018 03:57
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 lordliquid/d2dc58a5de54009a5edd55307c7f7c4f to your computer and use it in GitHub Desktop.
Save lordliquid/d2dc58a5de54009a5edd55307c7f7c4f to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
let group = svg.append('g')
.attr('transform', 'translate(200, 200)')
let line = group.append('path').attr('class', 'line');
var i = 1;
function complete() {
d3.select('.line')
.style('fill', 'green')
}
function myLoop() {
setTimeout(function() {
i++;
d3.select('.line')
.transition()
.duration(250)
.ease(d3.easeLinear)
.attr('d',
`M ${0} ${0} C ${i* 2} ${i *2} ${i * 2} ${0} ${100} ${0}`
);
if (i < 250) {
myLoop();
} else {
complete();
}
}, 20);
}
myLoop();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment