Skip to content

Instantly share code, notes, and snippets.

@nbremer
Last active June 18, 2016 20:49
Show Gist options
  • Save nbremer/a3684c52fb527c8fa415 to your computer and use it in GitHub Desktop.
Save nbremer/a3684c52fb527c8fa415 to your computer and use it in GitHub Desktop.
Gooey effect - Rectangle
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
<title>Gooey effect - Rectangle</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap 3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div id="cont" class="container-fluid">
<div class="row text-center">
<div class="col-sm-12 column text-center">
<div class="chart"></div>
</div>
</div>
</div>
<script>
//////////////////////////////////////////////////////////////
//////////////////////// Initiate ////////////////////////////
//////////////////////////////////////////////////////////////
var data = [
{xLoc: -50, seed:1},
{xLoc: 0, seed:2},
{xLoc: 50, seed:3}
];
var margin = {top: 30, right: 30, bottom: 30, left: 30},
width = Math.min(400, $(".chart").width() - margin.left - margin.right),
rectWidth = 200,
rectHeight = 30;
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
height = (w.innerHeight || e.clientHeight || g.clientHeight) - margin.top - margin.bottom - 20;
//Create scale
var scale = d3.scale.linear()
.domain([-1, 1])
.range([Math.min(height/2, 150), -1 * Math.min(height/2, 150)]);
//Create SVG
var svg = d3.select(".chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.style("filter", "url(#gooey)") //Set the filter on the container svg
.attr("transform", "translate(" + (margin.left + width/2) + "," +(height/2 + margin.top) + ")");
//SVG filter for the gooey effect
//Code taken from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/
var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooey')
filter.append('feGaussianBlur')
.attr('in','SourceGraphic')
.attr('stdDeviation','10')
.attr('result','blur');
filter.append('feColorMatrix')
.attr('in','blur')
.attr('mode','matrix')
.attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9')
.attr('result','gooey');
filter.append('feComposite')
.attr('in','SourceGraphic')
.attr('in2','goo')
.attr('operator','atop');
//Append circle at center
svg.append("rect")
.attr("class", "centerRect")
.attr("width", rectWidth)
.attr("height", rectHeight)
.attr("x", -rectWidth/2)
.attr("y", -rectHeight/2)
.style("fill", "#81BC00");
//Create a circle that will move out of the center circle
svg.selectAll(".flyCircle")
.data(data).enter()
.append("circle")
.attr("class", "flyCircle")
.attr("cx", function(d,i) {return d.xLoc ;})
.attr("cy", 0)
.attr("r", 15)
.style("fill", "#81BC00")
.transition().duration(1000).delay(function(d,i) { return i*300; })
.attr("cy", function(d) { return random(d.seed++); })
.each(update);
//Continuously keep the circle flying out
function update() {
var circle = d3.select(this);
(function repeat() {
circle = circle
.transition().duration(1000)
.attr("cy", 0)
.transition().duration(1000)
.attr("cy", function(d) { return random(d.seed++); })
.each("end", repeat);
})();
}//update
//Random number generator depending on input
function random(d) {
var x = Math.sin(d) * 10000;
var rand = x - Math.floor(x);
return (Math.floor(Math.random()*2) == 1 ? 1 : -1) * (scale(rand) + 20);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment