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(<name>=<value>, ...)
  • @svg-filter(<filter body>)
  • @svg-filter(<filter>...</filter>)

It returns a url() to a filter added to the component. Inside @svg the filter goes into that SVG's own <defs> instead. The short-form names are listed in the table below.

Noise

Two numbers make a noise displacement: how fine the noise is, and how far it moves the pixels. The arguments may also be named, as in scale=30: 

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

With the | modifier of @grid it is a backdrop filter over the whole grid:

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

Written in full

The body takes the children of a <filter> in the SVG syntax, or the XML of a whole <filter>: 

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

The short-form names work in the body too, as declarations between the primitives. There scale displaces the output of the step before it.

Channels

A channels block is an feColorMatrix. Each declaration sets an output channel, r, g, b or a, to a sum of input channels and a number, such as 1 - r or .5g + .2. Each reads the original input, so r: b; b: r swaps red and blue: 

@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

Reference

Short-form names

NameValue
frequencythe baseFrequency of an feTurbulence with fractal noise. Two values set x and y separately.
scalethe scale of the feDisplacementMap driven by that noise
octavethe numOctaves of the noise, rounded down to a whole number, at least 1
seedthe seed of the noise, the doodle's seed by default
bluran feGaussianBlur with this stdDeviation
erode, dilatean feMorphology with this radius
regionin the body only: how far the filter may draw outside the element, as x [y] / width [height], or one percentage added on every side. 20% once any of these names is used. x, y, width and height declarations override their part of it.

In the comma form the noise displaces the original element, so blur, erode and dilate are lost next to a scale. To combine them, use the body: blur: 3; frequency: .02; scale: 30;.

Names written next to each other form one group, which runs dilate, erode and blur before the noise, whatever order they are written in. A scale, octave or seed without a frequency in its group is dropped with a warning. @filter is an older name.

Channels

A number before a channel may be joined with *, as in 2 * b. Channels not listed stay unchanged. Any other expression, such as r * g or one with parentheses, leaves its channel unchanged, with a warning. Other declarations, such as in and result, go to the feColorMatrix.

See also