Skip to content

Instantly share code, notes, and snippets.

@tblondelle

tblondelle/.block

Last active January 14, 2018 13:51
Show Gist options
  • Save tblondelle/a3b48d4b837cc8106ad49d0eef92a563 to your computer and use it in GitHub Desktop.
Save tblondelle/a3b48d4b837cc8106ad49d0eef92a563 to your computer and use it in GitHub Desktop.
Download ZIP
Hypnotic circles
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<title>home</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
</head>
<body>
<svg></svg>
<script>
var svg = d3.select("svg")
.attr("width", 800)
.attr("height", 600);
var data = []
for (var i = 0; i < 128; i++){
data.push(i)
}
svg.selectAll(".circle").data(data).enter()
.insert("circle")
.attr("class", "circle")
.attr("cx", 800/2)
.attr("cy", 600/2)
.attr("r", function(d,i){
return 0
})
.attr("stroke", function(d,i){
return d3.interpolateCool(1 - i/(data.length))
})
.attr("stroke-width", "2px")
.attr("fill", function(d,i){
if (i == 1){
return d3.interpolateCool(1)
} else {
return "rgba(255,255,255,0)"
}
})
.transition()
.duration(1000)
.delay(function(d, i) { return (data.length - i) * 100; })
.ease(d3.easeLinear)
.attr("r", function(d,i){
return 1000
})
.attr("stroke-width", "200px")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment