SVG Filters on straight lines

100%

SVG Filters on straight lines

✓ Published0🌍 Public

Last edited Aug 3, 2019

Created on Aug 3, 2019

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.

AI-generated description

To apply an SVG filter to straight lines, set filterUnits="userSpaceOnUse", otherwise the straight lines/ paths are not shown.

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

71% match

Loading thumbnail…

SVG

This example shows basic SVG shapes—circles, rectangles, lines, and a path—arranged in a static composition with varied fill colors and stroke styles. The code uses plain Scalable Vector Graphics (SVG) elements directly in the HTML, including a `<g>` group with `transform` attributes for scaling and translation. A CSS class named `.lines` applies black strokes and rounded line joins to the path, demonstrating how styles can style SVG geometry. No JavaScript libraries are used, and no data is loaded; the rendering relies solely on static markup and CSS.

GGloria Higley

69% match

Loading thumbnail…

SVG

A set of basic SVG shapes—circles, rectangles, lines, and a path—demonstrates vector rendering with inline styling and CSS classes. The example defines a `<g>` scale transform and nested groups to position shapes, using SVG presentation attributes like `fill`, `stroke`, and `stroke-width`. A CSS rule styles the `.lines` group and its path child. This simple gallery piece shows how SVG primitives combine with transforms and cascading styles without any JavaScript libraries.

DDD

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

68% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG shapes, using a static, predefined dataset of geometric elements. It shows how basic primitives such as rectangles, circles, lines, and paths are defined and styled within a 960×500 coordinate system. The code uses raw SVG tags like `<rect>`, `<circle>`, `<line>`, and `<path>`, with attributes for positioning, fill colors, strokes, and widths. The visualization highlights the contrast between filled shapes and stroked outlines, and includes a multi-segment path that connects four points with a thick black line.

SShankar Ghimire

68% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and positioned using inline attributes and CSS classes. The code uses raw SVG elements within an HTML document, applying transformations via the `transform` attribute and custom styling through an external stylesheet. A `g` element with the class `lines` overrides default stroke settings, while the CSS file defines properties like stroke width and color for both `line` and `path` elements. The visualization showcases basic vector graphics rendering without any JavaScript or external libraries.

Kkestefon

68% match