Question

I want to have a black text with a white outer glow in order to be readable on a colored map. This is what I used to do:

<defs>
  <filter id="label-glow">
    <feGaussianBlur stdDeviation="1" />
  </filter>
</defs>
<text stroke="white" stroke-width="5" filter="url(#label-glow)">Harald's Repose</text>
<text>Harald's Repose</text>

I'd like to avoid duplicating the text element, so I decided to use feFlood to create a white rectangle, feComposite to create a white copy of the text, feGaussianBlur to create the blur, and then another feComposite to add the original text on top of it all. Unfortunately, the resulting outer glow is very weak. I found that repeating the feComposite a few times helps. I'm sure there's a better solution. What am I doing wrong?

<defs>
  <filter id="label-glow">
<feFlood flood-color="white"/>
<feComposite in2="SourceGraphic" operator="in"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite operator="over"/>
<feComposite operator="over"/>
<feComposite operator="over"/>
<feComposite operator="over"/>
<feComposite in="SourceGraphic"/>
  </filter>
</defs>
<text filter="url(#label-glow)">Harald's Repose</text>
Was it helpful?

Solution

A slightly more elegant way is to dial up the opacity on your glow using a feComponentTransfer on the alpha channel.

<filter id="label-glow">
<feFlood flood-color="white"/>
<feComposite in2="SourceGraphic" operator="in"/>
<feGaussianBlur stdDeviation="2"/>
<feComponentTransfer>
    <feFuncA type="gamma" exponent=".5" amplitude="2"/>
      </feComponentTransfer>
<feComposite in="SourceGraphic"/>
  </filter>

You can adjust the average intensity of the white by changing amplitude and you can adjust the intensity falloff by changing exponent.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top