Blur / Fade Effect

100%

Blur / Fade Effect

✓ Published0🌍 Public

Last edited May 10, 2015

Created on May 10, 2015

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.

AI-generated description

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

77% match

Loading thumbnail…

Motion blur - Diagonal movement & Multiple filters

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", ...)`.

FFrissAnalytics

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

71% match

Loading thumbnail…

SVG feGaussianBlur

This example demonstrates SVG’s Gaussian blur filter effect applied to an image of GitHub’s Octocat mascot. A range input controls the blur intensity, updating the `stdDeviation` attribute of an `feGaussianBlur` element in real time. The code uses D3 v3 to create the SVG container, append the filter definition, and bind the input’s change event to the blur update function. The image is loaded asynchronously and rendered as an SVG `<image>` element with the filter reference.

Mmbostock

68% match

Loading thumbnail…

image-fade

This example demonstrates a cross-fading transition between two images of the same scene—a daytime and a nighttime view—using jQuery's `fadeIn` and `fadeOut` methods. The visualization shows how two static images can be swapped with a smooth opacity transition, creating a before-and-after effect. The code relies on jQuery to handle the fade animations and a `div` container with absolute-positioned images. Although D3.js v4 is loaded in the page, the visible behavior uses only jQuery DOM manipulation and animation, with image sources pulled directly from GitHub URLs.

BBillyBHWong

66% match

Loading thumbnail…

Rorschach effect and morphing using filter elements

An interactive button triggers a morphing Rorschach-like shape, with a red blob transitioning from a randomized scatter into a heart outline using d3.forceSimulation and an SVG filter that applies Gaussian blur and a color matrix for a gooey merging effect. The animation uses SVG circles bound to data points, animating their positions smoothly as the filter creates organic, fluid distortions. The code relies on d3.v4 for simulation and transitions, with the filter defined as an SVG `<filter>` element.

IIsaKiko

66% match

Loading thumbnail…

Motion Blur + Chromatic Aberration

A single white ellipse traces a Lissajous figure on a black field, its motion captured as a smooth, time-averaged blur. The sketch applies per-channel scaling to simulate chromatic aberration, splitting the image into red, green, and blue layers. It uses Processing’s `P2D` renderer, `loadPixels`, and `updatePixels` to accumulate multiple samples per rendered frame, creating the motion-blur effect.

MMAKIO135

65% 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

65% match