css-doodle

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
A feGaussianBlur and feMorphology steps, added before the noise.

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.

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

See also