Skip to content

Instantly share code, notes, and snippets.

@thole

thole/index.html

Last active October 20, 2018 07:04
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 thole/47386662da834f1f144d96103820d8c9 to your computer and use it in GitHub Desktop.
Save thole/47386662da834f1f144d96103820d8c9 to your computer and use it in GitHub Desktop.
Download ZIP
stars
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="600"></svg>
<style>
body {
background-color: #171b1e;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var filter = svg.append("defs")
.append("filter")
.attr("id", "blur")
.append("feGaussianBlur")
.attr("stdDeviation", 0.25);
var colors = ['#278d99','#f9ffff','#a4977a','#5299c3', '#d1988f']
var randomX = d3.randomUniform(0,width);
var randomY = d3.randomUniform(0,height);
var randomS = d3.randomNormal(0.5,0.5);
var randomC = d3.randomUniform(0,colors.length-1);
var stars = d3.range(2000).map(function(){
return {'x':randomX(),'y':randomY(),'s':Math.abs(randomS()),'c':Math.round(randomC())};
});
var g = svg.append("g")
g.selectAll("circle")
.data(stars)
.enter().append("circle")
.attr("cx", function(d) { return d.x })
.attr("cy", function(d) { return d.y })
.attr("r", function(d) { return d.s })
.attr("fill", function(d) { return colors[d.c] })
.attr("filter", "url(#blur)")
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment