Skip to content

Instantly share code, notes, and snippets.

@nbremer
Last active Jan 30, 2018
Embed
What would you like to do?
Motion blur - Simple circle movement
height: 200

This example was used in my blog on Creating real-life based motion effects in d3.js visuals, which is part of the SVGs beyond mere shapes series

This is a simple example of applying motion blur to SVG circles. They are both undergoing the same motion blur at the same time, but only one of them is also moving while this happens

Other examples about motion blur are

Built with blockbuilder.org

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- D3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="simpleCircle" style="text-align: center;"></div>
<script language="javascript" type="text/javascript">
///////////////////////////////////////////////////////////////////////////
//////////////////// Set up and initiate svg containers ///////////////////
///////////////////////////////////////////////////////////////////////////
var margin = {
top: 0,
right: 0,
bottom: 0,
left: 0
};
var width = 400,
height = 200;
//SVG container
var svg = d3.select('#simpleCircle')
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + (margin.left + width/2) + "," + (margin.top + height/2) + ")");
///////////////////////////////////////////////////////////////////////////
///////////////////////////// Create gradient /////////////////////////////
///////////////////////////////////////////////////////////////////////////
//SVG filter for the fuzzy effect
//Code based on http://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/
var defs = svg.append("defs");
//Create a filter per circle so we can adjust the fuzzyness per circle that is flying out
defs.append("filter")
.attr("id", "fuzzyFilter")
.attr("width", "300%") //increase the width of the filter region to remove blur "boundary"
.attr("x", "-100%") //make sure the center of the "width" lies in the middle
.attr("color-interpolation-filters","sRGB") //to fix safari: http://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image
.append("feGaussianBlur")
.attr("class", "blurValues")
.attr("in","SourceGraphic")
.attr("stdDeviation","0 0"); //start without a blur
///////////////////////////////////////////////////////////////////////////
////////////////////// Place circles inside hexagon ///////////////////////
///////////////////////////////////////////////////////////////////////////
var radius = 8;
//Finally append the visible circles
svg.selectAll(".fuzzyCircle")
.data([-1,1])
.enter().append("circle")
.attr("class", function(d,i) { return "fuzzyCircle circleNumber-" + i; })
.attr("cx", function(d,i) { return i * -width/2*0.9; })
.attr("cy", function(d) { return d*radius*3; })
.attr("r", radius)
.style("fill", "#F92672")
.style("filter", "url(#fuzzyFilter)");
///////////////////////////////////////////////////////////////////////////
////////////////////////// Create blur on and off /////////////////////////
///////////////////////////////////////////////////////////////////////////
//Start the movement of the bottom circle
d3.select(".circleNumber-1")
.each(slide);
//Slide the circle from left to right
function slide(d) {
var circle = d3.select(this);
var element = d;
(function repeat() {
//Not very elegant, but do the motion blur on the left movement
//and later again on the right movement of the bottom circle
createBlur();
setTimeout(createBlur, 900);
//Move the circle left and right
circle = circle.transition().duration(900)
.attr("cx", width/2*0.9 )
.transition().duration(900)
.attr("cx", -width/2*0.9 )
.each("end", repeat);
})();
}//slide
//Adjust the motion blur filter
function createBlur() {
//Interpolate the motion blur
d3.select("#fuzzyFilter .blurValues") //select the feGaussianBlur
//Step 1: transition the filter from 0 blur to a heavy blur - start of a circle movement
.transition().duration(300)
.delay(200)
.attrTween("stdDeviation", function() { return d3.interpolateString("0 0", "4 0"); })
//Step 2: transition the filter from heavy blur to a 0 blur - end of a circle movement
//besides the interpolator now goign from 8 to 0 the rest is the same as above
.transition().duration(250)
.attrTween("stdDeviation", function() { return d3.interpolateString("4 0", "0 0"); });
}//createBlur
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment