Create

Function

@svg-filter

An SVG filter for the filter and backdrop-filter properties. A short form covers the common noise displacement effect; any filter can be written out in full.

Syntax

  • @svg-filter(<frequency>, <scale> [, <octave>, <seed>])
  • @svg-filter(blur=<n>, erode=<n>, dilate=<n>)
  • @svg-filter(<filter-body>)
  • @svg-filter(<filter>...</filter>)
frequency
baseFrequency of a feTurbulence with fractal noise. Two values set x and y separately.
scale
scale of the feDisplacementMap driven by that noise.
octave, seed
numOctaves and seed of the noise. The seed defaults to the doodle's seed.
blur, erode, dilate
feGaussianBlur and feMorphology steps. In the comma form the noise displaces the original element, so these are lost next to a scale; to combine them use the body form, blur: 3; frequency: .02; scale: 30;.

Arguments may be positional or named, scale=30. The noise seed defaults to the doodle’s seed. The full form takes the children of a <filter> in the SVG syntax, or the XML. The filter is mounted inside the component and referenced by id. @filter is an older name.

In the body, the short-form names are declarations, frequency: .02; scale: 30;, and can sit between primitives; scale then displaces the output of the step before it. region sets how far the filter may draw outside the element, x [y] / width [height] or one percentage for every side. It defaults to 20% when any short-form name is used.

Examples

@grid: 1 / 60vmin;
background: #000;
border-radius: 50%;
filter: @svg-filter(.02, 30);
Open in playground

Named arguments:

@grid: 4 / 60vmin _10px;
background: #000;
filter: @svg-filter(frequency=.05, scale=15, octave=3);
Open in playground

As a backdrop filter over the whole grid, with the | modifier of @grid:

@grid: 4 / 60vmin ^.85 _10px | @svg-filter(.015, 50);
border-radius: 50%;
background: #000;
Open in playground

A filter written in full:

@grid: 1 / 60vmin;
background: #000;
border-radius: 50%;
filter: @svg-filter(
  feTurbulence {
    type: fractalNoise;
    baseFrequency: .01 .5;
  }
  feDisplacementMap {
    in: SourceGraphic;
    scale: 50;
  }
);
Open in playground

Channels

A channels block in the body is a color matrix, an feColorMatrix. Each declaration sets one output channel, r, g, b or a, to a sum of input channels and a number, written like the an+b of @nth: 1 - r, .5g + .2, 2 * b. Channels not listed stay unchanged. Every expression reads the original input, so r: b; b: r swaps red and blue. Anything else, such as r * g or parentheses, is ignored with a warning. Other declarations, such as in and result, go to the feColorMatrix. 

@grid: 6 / 60vmin;
background: @p(#e6437d, #ebbf4d, #000);
filter: @svg-filter(
  channels { r: b; b: r; }
);
Open in playground

Blur, then sharpen the alpha so shapes that touch melt together:

@grid: 6 / 60vmin;
@size: @r(40%, 90%);
background: #000;
border-radius: 50%;
transform: translate(@r(-40%, 40%), @r(-40%, 40%));
:container {
  filter: @svg-filter(
    blur: 6;
    channels { a: 20a - 8; }
  );
}
Open in playground

See also