夜光虫

0

作品を見る
http://etext-music.com/works/svg/D3_2_2.html

・全画面モード(F11)がおすすめ。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="60">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>夜光虫</title>
<script src="my.js"></script>
<script src="d3.js"></script>
</head>
<body style="margin:0; background-image:url('bgimg_b.jpg')">
<script>
svg=d3.select("body").append("svg").attr("width",1920-8).attr("height",1080-8)
svg.selectAll()
.data(d3.range(1,200))
.enter()
.append("circle")
.attr("cx",function(){return Random(1920)})
.attr("cy",function(){return Random(1080)})
.attr("r",function(){return Random(1,4)})
.attr("fill",function(){return RandomSelect("Teal","Palegreen","Seagreen")})
.attr("opacity",0)
.each(loop)
function loop(){
var c=d3.select(this);
(function repeat(){c=c
.transition().duration(2000)
.attr("r",function(){return Random(1,4)})
.attr("opacity",function(){return Random(1,8)/10})
.each("end",repeat)
})();
}
</script>
</body>
</html>

Default