Skip to content

Instantly share code, notes, and snippets.

Last active January 30, 2018 13:13
Show Gist options
  • Save nbremer/b6cd1c9973eb24caa7cabb3437b0a248 to your computer and use it in GitHub Desktop.
Save nbremer/b6cd1c9973eb24caa7cabb3437b0a248 to your computer and use it in GitHub Desktop.
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

<!DOCTYPE html>
<meta charset="utf-8">
<!-- D3.js -->
<script src="" charset="utf-8"></script>
<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 ='#simpleCircle')
.attr("width", width + margin.left + margin.right)
.attr("height", height + + margin.bottom)
.attr("transform", "translate(" + (margin.left + width/2) + "," + ( + height/2) + ")");
///////////////////////////// Create gradient /////////////////////////////
//SVG filter for the fuzzy effect
//Code based on
var defs = svg.append("defs");
//Create a filter per circle so we can adjust the fuzzyness per circle that is flying out
.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:
.attr("class", "blurValues")
.attr("stdDeviation","0 0"); //start without a blur
////////////////////// Place circles inside hexagon ///////////////////////
var radius = 8;
//Finally append the visible circles
.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".circleNumber-1")
//Slide the circle from left to right
function slide(d) {
var circle =;
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
setTimeout(createBlur, 900);
//Move the circle left and right
circle = circle.transition().duration(900)
.attr("cx", width/2*0.9 )
.attr("cx", -width/2*0.9 )
.each("end", repeat);
//Adjust the motion blur filter
function createBlur() {
//Interpolate the motion blur"#fuzzyFilter .blurValues") //select the feGaussianBlur
//Step 1: transition the filter from 0 blur to a heavy blur - start of a circle movement
.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
.attrTween("stdDeviation", function() { return d3.interpolateString("4 0", "0 0"); });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment