baseFrequency

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

ThebaseFrequency attribute represents the base frequency parameter for the noise function of the<feTurbulence> filter primitive.

You can use this attribute with the following SVG elements:

<feTurbulence>

Example

Example 1

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">  <filter x="0" y="0" width="100%" height="100%">    <feTurbulence baseFrequency="0.025" />  </filter>  <filter x="0" y="0" width="100%" height="100%">    <feTurbulence baseFrequency="0.05" />  </filter>  <rect x="0" y="0" width="200" height="200" filter="url(#noise1)" />  <rect x="220" y="0" width="200" height="200" filter="url(#noise2)" /></svg>

Example 2

html

<svg  width="200"  height="200"  viewBox="0 0 220 220"  xmlns="http://www.w3.org/2000/svg">  <filter>    <feTurbulence      type="turbulence"      baseFrequency="0.05"      numOctaves="2"      result="turbulence" />    <feDisplacementMap      in2="turbulence"      in="SourceGraphic"      scale="50"      xChannelSelector="R"      yChannelSelector="G" />  </filter>  <circle cx="100" cy="100" r="100" filter="url(#displacementFilter)" /></svg>

Value	<number-optional-number>
Default value	`0`
Animatable	Yes

If two numbers are provided, the first one represents the base frequency in the horizontal direction and the second one the base frequency in the vertical direction. If one number is provided, then that value is used for both x and y.

Negative values are forbidden.