CODEWITHSUNDEEP
svggaussianblur
Emma Andersson
Emma Andersson

Reputation: 21

How can i create an svg filter that combines feTurbulence and feGaussianBlur

How can I create an svg circle with massive blurriness and grainy texture?

I can't figure out how to combine GaussianBlur and feTurbulence in a filter, it's only the grainy texture that is being applied or reversed.

blurriness i want to achieve , grainy texture

Upvotes: 0

Views: 598

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101868

Here's an example of what I believe you want.

  1. Blur the original object
  2. Create a (monochrome) grain
  3. Composite the grain on top of the blurred object.

You would have to apply the grain after the blur. Because if you do it the other way around, you will just blur the grain. And probably lose the effect.

svg {
  width: 500px;
}
<svg viewBox="0 0 100 100">
  <filter id="blur-plus-grain" x="-50%" y="-50%" width="200%" height="200%">
    <!-- Blur the input object -->
    <feGaussianBlur stdDeviation="10" result="blur"/>
    <!-- Create some grainy noise -->
    <feTurbulence type="fractalNoise" baseFrequency="0.95" numOctaves="3" stitchTiles="stitch"/>
    <!-- Make the grain greyscale -->
    <feColorMatrix type="saturate" values="0" result="grain"/>
    <!-- Composit the grain onto the blurred object -->
    <feComposite operator="in" in="blur" in2="grain"/>
  </filter>
  
  <ellipse cx="50" cy="50" rx="30" ry="20" fill="gold" filter='url(#blur-plus-grain)'/>
</svg>

Upvotes: 4

Related Questions