1

Working on a client site and found this SVG tag sitting in the template footer, but I can't figure out what the heck it's for. Anyone seen this before?

<svg xmlns="https://www.w3.org/2000/svg" version="1.1" class="svg-filters" style="display:none;"><defs><filter id="marker-shape"><feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" /><feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" /></filter></defs></svg>

1 Answer 1

4

The clue is in the <feTurubulunce> tag. It's creating a fractal. If you aren't familiar with fractals, they're unending patterns. Using the filter feTurbulence, allows you to create distortions and custom graphic textures. From the fractals link above:

the feTurbulence filter primitive generates and renders Perlin noise. This kind of noise is useful in simulating several natural phenomena like clouds, fire and smoke, and in generating complex texture like marble or granite.

The concept is used by a lot of screensavers and drawing software to create background patterns.

For more information about using the <feTurubulence> tag see - https://tympanus.net/codrops/2019/02/19/svg-filter-effects-creating-texture-with-feturbulence/.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.