SVG Animation Using Filters

Introduction

In the last article, we discussed how to animate using CSS Keyframes. Now I want to show a cool SVG Animation using the filter properties and apply them to SVG with the animate tag.

A Quick look at SVG Filters

The SVG turbulence filter applies a turbulence effect to an SVG image. It takes two input images and blends them together.

A quick recipe for setting an SVG Filter can be thought of as follows:

<filter id="Noise">
      <feTurbulence id="turbulence" </feTurbulence>
      <feDisplacementMap in="SourceGraphic" scale="2"></feDisplacementMap>
    </filter>

<circle filter="url(#Noise)" />

From the above code, I created the filter element to create a noisy displacement map of the source graphic with the help of feTurbulence & feDisplacementMap filter primitive and applied it to the SVG Circle using filter id which is “#Noise”. Also, I Explained below what those filter primitives are which I used.

Feturbulence: This filter basically creates a noise that can be applied to any SVG element. PS: you can change this noise by adjusting the baseFrequency.

SVG Animation Using Filters

feDisplacementMap: Take the effect that gives noise from Feturbulence and apply it to the SVG using the feDisplacementMap

Filter:  Apply these filters to SVG that I created SVG Circle using filter URL for Animating.

Animating the shape with the SVG Turbulence Filter

The SVG turbulence filter applies a turbulence effect to an SVG image. It takes two input images and blends them together.

Final Preview

SVG Animation

Creating the circle with SVG

First I’ll create a basic SVG circle so we can use this to create animation with the help of Values & keyTimes attributes.

<svg class="noiseLayer"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 200 200"
    width="400"
    height="400">
  <circle cx="100" cy="100" fill="#008080" r="60"/>
</svg>

Filter properties that we used

There are a lot of filter primitives but for this one, it’s going to be pretty simple we’re just going to use two filter primitives which are feTurbulence and feDisplacementMap.

feTurbulence

The <feTurbulence> SVG filter primitive creates an image using the Perlin turbulence function. Perlin noise is a type of gradient noise.

feDisplacementMap

The <feDisplacementMap> SVG filter primitive is used to spatially displace the image content using a displacement map. It takes two inputs to produce one result. “In” and “In2” In2 works exactly like the “in” attribute.

<feDisplacementMap in="SourceGraphic" scale="2"></feDisplacementMap>

SVG Animation

The SVG <animate> element provides a way to animate an attribute of an element over time here we used Values and keyTimes attribute.

Values

The values attribute has different meanings it defines a sequence of values used over the course of an animation.

KeyTimes

The keyTimes attribute represents a list of time values used to control the pacing of the animation.

<animate
          id="noiseAnimate"
          attributeName="baseFrequency"
          attributeType="XML"
          values="1;0.5;0;0.5;1"
          keyTimes="0; 0.25; 0.3; 0.9; 1"
          begin="0s"
          dur="20s"
          repeatCount="indefinite">
</animate>

See the Pen
SVG Noise Animate by Radius Media (@TeamRadius)
on CodePen.0

Conclusion

SVG filters are written in SVG code and can be used to create all sorts of special effects, such as blurring, distorting, etc. In this article, we learned to use the animate filter primitive to create a simple distorting animation.

Recent Posts