Skip to content

Instantly share code, notes, and snippets.

Last active June 18, 2016 20:23
Show Gist options
  • Save nbremer/0e98c72b043590769facc5e829ebf43f to your computer and use it in GitHub Desktop.
Save nbremer/0e98c72b043590769facc5e829ebf43f to your computer and use it in GitHub Desktop.
Gooey effect - Rotating circles - Blending colors
height: 420

This example appears on my blog on More fun data visualizations with the gooey effect

The SVG Gooey effect that is create by applying an SVG filter to a group element in which the circles are created. In this version the colors blend together nicely because I've left out one step in the SVG filter that places the original sharp SVG shape back on top the blurred one.

Although the blending of colors looks nice, smaller shapes might appear even smaller than they really are, due to the blurring and not placing the original shape back on top.

To see the same visual, but with the last step added to the filter so you have your exact shapes back, please check out my other bl.ock: Gooey effect Rotating circles Non-blending colors

You can find the other examples from the blog here

Older examples with the Gooey effect

Built with

<!DOCTYPE html>
<meta charset="utf-8">
<!-- D3.js -->
<script src="" charset="utf-8"></script>
<div id="chart" style="text-align: center;"></div>
<script language="javascript" type="text/javascript">
//////////////////// Set up and initiate svg containers ///////////////////
var margin = {
top: 10,
right: 10,
bottom: 10,
left: 10
var width = 400,
height = 400;
//SVG container
var svg ='#chart')
.attr("width", width + margin.left + margin.right)
.attr("height", height + + margin.bottom)
.attr("transform", "translate(" + (margin.left + width/2) + "," + ( + height/2) + ")");
///////////////////////////// Create filter ///////////////////////////////
//SVG filter for the gooey effect
//Code taken from
var defs = svg.append("defs");
var filter = defs.append("filter").attr("id","gooeyCodeFilter");
//to fix safari:
.attr("values","1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9")
/////////////////////////// Create circles ////////////////////////////////
//Create scale
var xScale = d3.scale.linear()
.domain([-1.25, 1.25])
.range([-width/2, width/2]);
//Create a wrapper for the circles that has the Gooey effect applied to it
var circleWrapper = svg.append("g")
.style("filter", "url(#gooeyCodeFilter)");
//Create the circles that will move out and in the center circle
var steps = 14;
var colors = ["#F95B34", "#EE3E64", "#F36283", "#FF9C34", "#EBDE52", "#B7D84B", "#44ACCF"];
var flyCircleData = [];
for (var i = 0; i < steps; i++) {
fixedAngle: (i/steps)*(2*Math.PI),
randomAngle: (i/steps)*(2*Math.PI),
speed: Math.random() * 7000 + 3000,
r: Math.floor(Math.random() * 20 + 15),
color: colors[i%colors.length]
}//for i
//Set up the circles
var flyCircles = circleWrapper.selectAll(".flyCircle")
.attr("class", "flyCircle")
.style("fill", function(d) { return d.color; })
.attr("cy", 0)
.attr("cx", 0)
.attr("r", 0)
.transition().duration(500)//.delay(function(d,i) { return i*50; })
.attr("cy", function(d) { return xScale(Math.sin(d.fixedAngle)); })
.attr("cx", function(d) { return xScale(Math.cos(d.fixedAngle)); })
.attr("r", function(d) { return d.r; })
.each("end", goRound);
//Continuously moves the circles with different speeds
function goRound(d) {
.transition().duration(function(d) { return d.speed; })
.attrTween("transform", function() { return d3.interpolateString("rotate(0)", "rotate(360)"); })
.each("end", goRound);
}//function goRound
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment