Motion blur - Diagonal movement & Multiple filters

100%

Motion blur - Diagonal movement & Multiple filters

✓ Published0🌍 Public

Last edited Dec 2, 2016

Created on Dec 2, 2016

Fifteen circles radiate outward from a central point, each moving diagonally with a one-directional Gaussian blur filter applied via SVG’s `feGaussianBlur`. Clicking toggles the blur on and off, switching the title between “With” and “Without motion blur filter.” The code builds multiple `<filter>` elements, one per circle, and rotates each circle’s group so the blur aligns with its movement angle. It uses D3.js (v3) for data binding, SVG transforms, and event handling, with filters manipulated via `style("filter", ...)`.

AI-generated description

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 an example of using a SVG gaussian blur filter in one direction to mimic motion blur that occurs in real life. Although the blur can only be applied in either the x or y direction, we can use a transform of a group element to make it appear as if the element has a blur along any angle. Also this example shows how to create, apply and manipulate a motion blur filter separately for each circle

Other examples about motion blur are

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/077ef487fefcff72a02605422298e2b3'>Motion blur - Diagonal movement & Multiple filters</a>

mit Licensed

Similar vizzes

Loading thumbnail…

blur-transition

Four wavy line charts fade in and out against alternating black and white backgrounds, with each transition blending the strokes into a cohesive, gooey mass before snapping back into crisp lines. The animation cycles repeatedly, morphing between the two color schemes while new random line data replaces the old. It uses D3.js to generate the SVG paths and axes, applying SVG filters—`feGaussianBlur` and `feColorMatrix`—to create the blur-and-chrome effect, with `transition` calls animating the filter attributes and background color changes.

11wheel

74% match

Loading thumbnail…

Motion

The visualization shows two sets of black circles arranged in a diagonal pattern, with one circle from each set rotating around a fixed point to create a sense of continuous motion. The animation is driven by `d3.timer`, which repeatedly updates the `transform` attribute of the circles using an SVG `rotate` transformation. The rotation angle is calculated from the elapsed time since page load, with one set rotating around the first circle’s position and the other around the fifth circle’s position. Built with D3 v4 and rendered as SVG, the code uses hardcoded coordinates for the circles and relies on CSS classes to select and animate them, creating a simple kinetic composition without any external data source.

CCJKraenzle

74% match

Loading thumbnail…

Gooey egde effect

Shifting circles confined within a hexagon produce a bold, gooey edge effect as they move and merge. The visualization applies an SVG filter chain—including `feGaussianBlur`, `feColorMatrix`, and `feConvolveMatrix`—to blur, threshold, and detect edges from the animated shapes. Built with D3 v4 and SVG, it uses a linear gradient fill and a clip path to constrain the motion, offering a dynamic exploration of filter-based visual styling.

KKcnarf

74% match

Loading thumbnail…

Blur / Fade Effect

The example shows a blur and fade effect applied to an image, where a sharp version is revealed beneath a blurred overlay. It uses a clipping mask composed of multiple circles to gradually erase the blurred layer, creating a localized focus effect as the mouse moves. The code relies on D3.js for SVG manipulation and transitions, along with an SVG `feGaussianBlur` filter for the blur effect and a mask for the reveal. The rendering is interactive, triggered by mouse movement over the image.

CCBasis

74% match

Loading thumbnail…

swirling circles

Hundreds of small, semi-transparent circles continuously stream inward from the top and bottom edges, converging at the center before dispersing outward again in a looping, decorative motion. The animation is generated entirely with D3 v3, using chained `transition()` calls over 2-second durations to animate each circle’s `cx` and `cy` attributes with a linear ease, then removing each element after its animation completes. Random colors are assigned via a custom `colorPicker` function, while circle starting positions and target offsets are determined by `Math.random()`. A `setInterval` spawns a new circle every 20 milliseconds, capped at 1,000 total per loop, which then repeats indefinitely.

EEfratVil

72% match

Loading thumbnail…

Colour-full force

Twenty-eight colored circles drift across a black SVG canvas in a soft, gooey cluster. Each circle is assigned a rainbow hue and a random radius, with alternating circles receiving a blurred filter effect that makes them blend together. The motion is driven by D3’s `forceSimulation` with charge, center, and collision forces, while the rendering uses SVG circles and a `feGaussianBlur` with a `feColorMatrix` filter to create the liquid-like appearance.

AAlireza-Dezfoolian

72% match

Loading thumbnail…

Gooey Effect

Sixty purple circles animate between a regular grid and a clustered circle, creating a smooth gooey merging effect. The transition is driven by an SVG filter using `feGaussianBlur` and `feColorMatrix`, with the blur values tweened via `transition.attrTween`. D3 v4’s `d3.forceSimulation` handles the clustering physics, while staggered `transition` delays on circle positions emphasize the organic flow. The effect alternates between the two states on a loop.

FFrissAnalytics

71% match

Loading thumbnail…

D3 Circle animation

Eight red circles animate simultaneously along straight paths within a large circular outline on a white background. Each circle travels from a point on the circle’s perimeter toward the center, with staggered start times creating a rotating, pulsing effect. The animation uses SVG’s `animateMotion` element with the `path` attribute and staggered `begin` times, while the overall layout and styling come from static SVG markup with `mix-blend-mode: hard-light`. The example relies solely on native SVG animation, not D3’s JavaScript APIs.

AArturo Guevara

71% match