SVG feGaussianBlur

100%

SVG feGaussianBlur

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Nov 6, 2011

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.

AI-generated description

A demonstration of SVG's Gaussian blur filter effect: the svg:feGaussianBlur element.

Image source: GitHub's octodex.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

SVG Filters on straight lines

Four blue stroked paths form a square outline, with two diagonal lines crossing between opposite corners to create a geometric star or asterisk pattern. The example demonstrates a critical SVG filter behavior: without setting `filterUnits="userSpaceOnUse"` on the filter, blurred straight lines can disappear from view. Using the `<filter>` element with `<feGaussianBlur>` (stdDeviation of 5) and applying it via the `filter` attribute to each `<path>`, the code shows how the filter coordinate system must match the user space for line strokes to render correctly. The SVG markup defines paths manually with absolute coordinates.

EEE2dev

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

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

68% match

Loading thumbnail…

animated distortion

A single kitten image is displayed on an SVG canvas, with its appearance continuously shifting through two different distortion effects. The visualization alternates between two SVG filters, each combining a `feTurbulence` fractal noise generator with a `feDisplacementMap` to warp the image’s pixels. A recursive `setTimeout` function in plain JavaScript toggles the active filter every 400 milliseconds for ten iterations, creating a rhythmic pulsing distortion. The code uses D3 v4 for SVG selection and attribute manipulation, while the image itself is loaded from an external placeholder service.

PPatrick Wojda

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

67% match

Loading thumbnail…

SVG Fundamentals

This example displays the fundamental SVG path commands—moveto, lineto, curveto, and closepath—to construct a geometric composition of lines and a curved shape. It uses SVG filters like `feGaussianBlur` and `feOffset` to add a shadow effect, alongside a `linearGradient` fill. The visualization is rendered as static HTML with embedded CSS, demonstrating the core drawing capabilities of the SVG API without any interaction or data source.

JJun Alvarado

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

65% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple SVG composition rendered directly in HTML, featuring a blurred pink circle, a curved stroked path, and a filled wedge shape arranged on a 500 by 500 canvas. The code uses native SVG elements such as `<circle>`, `<path>`, and `<defs>` with a `<feGaussianBlur>` filter to apply a soft glow effect. Styling is handled through inline CSS, while the shapes are positioned manually via `transform` attributes. No external libraries are used; the visualization relies purely on the browser’s built-in SVG rendering capabilities.

LLouise Høpfner

65% match