s2t2 · March 27, 2016 03:23
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <meta charset="utf-8">
    <style>
        body {
            background: #222;
            color:#fff;
            font-family: "Helvetica Neue", Helvetica, sans-serif;
        }

        #base, svg{
            position:absolute;
            left:0;
            top:0;
        }
        #base{
            width: 960px;
            height: 500px;
        }

        #message {
            width: 500px;
            margin: 20px auto;
            font-weight: bold;
            font-size: 36px;
            padding-top:100px;
        }

        #logo {
            width: 500px;
            margin: 20px auto;
            font-weight: bold;
            font-size: 72px;
            text-align: left;
            line-height: 68px;
            position: relative;
        }

        #logo span {
            position: absolute;
            top: 7px;
            height: 72px;
            width: 72px;
            border-radius: 50%;
            line-height: 72px;
            font-size: 60px;
            text-align: center;
            background: #f7df1e;
            color: #222;
        }

        #logo .j {
            right: 80px;
        }

        #logo .s {
            right: 0;
        }

    </style>
 </head>
 <body>
    <div id="base">
        <div id="message">Happy 1st Year Anniversary !</div>
        <div id="logo">
            Brooklyn
            <span class="j">J</span>
            <span class="s">S</span>
        </div>
    </div>

    <script>
        var width = 960,
            height = 500,
            color = d3.scale.ordinal().range(['#f7a91e', '#d9f71e']);
            rand = d3.random.normal(width/2,100),
            randomX = function(b){ return d3.random.normal(b, 80)()},
            randomY = d3.random.normal(height/2, 80);

        var svg = d3.select("body").append("svg")
                        .attr("width", width)
                        .attr("height", height);

        var data = d3.range(100).map(function() { return {x: randomX(width/2), y: randomY()}; });

        var circles = svg.selectAll("circle").data(data).enter()
                        .append("circle");

        function fireworks(){
            var base = rand();
            data = d3.range(100).map(function() { return {x: randomX(base), y: randomY()}; });
            circles.transition().ease('circle').duration(1500).attr({cy:height/2})

            circles.data(data)
                .attr("opacity",1)
                .attr({r:3,cx:base,cy:height,fill:"gray"})
                .transition()
                    .ease('circle')
                    .duration(1500)
                    .attr({cy:height/2})
                .transition().delay(1400)
                    .ease("exp")
                    .duration(300)
                    .attr("cx", function(d){ return d.x; })
                    .attr("cy", function(d){ return d.y; })
                    .attr("r", 10)
                    .attr("opacity",1)
                    .attr("fill", function(d){ return color(d.x); })
                    .transition()
                    .ease("circle")
                    .duration(2000)
                    .attr("opacity",0)
                    .attr("cx", function(d){ if(d.x > base){
                        return d.x + (d.x-base)
                    }return d.x - (base - d.x)})
                    .attr("cy", function(d){ if(d.y > height/2){
                        return d.y + (d.y-height/2)
                    }return d.y - (height/2 - d.y)})
                    .attr("r", 0);

        }
        setInterval(fireworks,4000);
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset="utf-8">
	<style>
	body {
	background: #222;
	color:#fff;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	}

	#base, svg{
	position:absolute;
	left:0;
	top:0;
	}
	#base{
	width: 960px;
	height: 500px;
	}

	#message {
	width: 500px;
	margin: 20px auto;
	font-weight: bold;
	font-size: 36px;
	padding-top:100px;
	}

	#logo {
	width: 500px;
	margin: 20px auto;
	font-weight: bold;
	font-size: 72px;
	text-align: left;
	line-height: 68px;
	position: relative;
	}

	#logo span {
	position: absolute;
	top: 7px;
	height: 72px;
	width: 72px;
	border-radius: 50%;
	line-height: 72px;
	font-size: 60px;
	text-align: center;
	background: #f7df1e;
	color: #222;
	}

	#logo .j {
	right: 80px;
	}

	#logo .s {
	right: 0;
	}

	</style>
	</head>
	<body>
	<div id="base">
	<div id="message">Happy 1st Year Anniversary !</div>
	<div id="logo">
	Brooklyn
	<span class="j">J</span>
	<span class="s">S</span>
	</div>
	</div>

	<script>
	var width = 960,
	height = 500,
	color = d3.scale.ordinal().range(['#f7a91e', '#d9f71e']);
	rand = d3.random.normal(width/2,100),
	randomX = function(b){ return d3.random.normal(b, 80)()},
	randomY = d3.random.normal(height/2, 80);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var data = d3.range(100).map(function() { return {x: randomX(width/2), y: randomY()}; });

	var circles = svg.selectAll("circle").data(data).enter()
	.append("circle");

	function fireworks(){
	var base = rand();
	data = d3.range(100).map(function() { return {x: randomX(base), y: randomY()}; });
	circles.transition().ease('circle').duration(1500).attr({cy:height/2})

	circles.data(data)
	.attr("opacity",1)
	.attr({r:3,cx:base,cy:height,fill:"gray"})
	.transition()
	.ease('circle')
	.duration(1500)
	.attr({cy:height/2})
	.transition().delay(1400)
	.ease("exp")
	.duration(300)
	.attr("cx", function(d){ return d.x; })
	.attr("cy", function(d){ return d.y; })
	.attr("r", 10)
	.attr("opacity",1)
	.attr("fill", function(d){ return color(d.x); })
	.transition()
	.ease("circle")
	.duration(2000)
	.attr("opacity",0)
	.attr("cx", function(d){ if(d.x > base){
	return d.x + (d.x-base)
	}return d.x - (base - d.x)})
	.attr("cy", function(d){ if(d.y > height/2){
	return d.y + (d.y-height/2)
	}return d.y - (height/2 - d.y)})
	.attr("r", 0);

	}
	setInterval(fireworks,4000);
	</script>
	</body>
	</html>