0

I've seen a million tutorials to make outer glow effects using some combination of feGaussianBlur, feFlood and dilating either SourceGraphic or SourceAlpha. They work pretty well but aren't exactly what I need.

I've been trying to find a way (as well as experimenting on my own, unsuccessfully) for a way to make an outer glow effect colored with a linear gradient. Is this possible in SVG? I've tried using feImage but either I'm doing it wrong or it just can't be done.

  • Since you have outlined methods that dont work exactly as you want and not described what you exactly want answer is: No. Otherwise it would be yes. – joojaa Nov 28 '18 at 4:41
  • Can you give more details on the code that you are working on? Maybe share an example? Also this may relate to your question. – felixhu Nov 28 '18 at 10:05
  • 1
    I want a glow similar to what @Socowi answered. I managed to get it working finally thanks to someone in #svg; Seems my main problem was I needed to put the gradients and gradient rectangle in the defs at the top. – Gregorio Litenstein Nov 28 '18 at 15:18
  • 1
    @GregorioLitenstein Please post you solution as an answer and accept it so that the question can be closed. – Socowi Nov 28 '18 at 15:42
  • 2
    I'm voting to close this question as off-topic because this is more of a coding problem and the question already has an answer over on another SE stackoverflow.com/questions/9630008/… – Luciano Nov 29 '18 at 10:05
0

I wanted a glow similar to what @Socowi originally posted:

Version 1 Version 2

I managed to get it working finally thanks to someone in #svg; Seems my main problem was I needed to put the gradients and gradient rectangle in the defs at the top.

Here's the working example, for reference to anybody who might have the same issue in the future:

<svg id="glowy" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">

    <defs>      <!-- We set the filter effect area to be really big to guarantee we see it all... -->
        <linearGradient id='lgrad' x1='50%' y1='100%' x2='50%' y2='0%' > 
    <stop offset='0%' style='stop-color:rgb(181,7,7);stop-opacity:1' />
    <stop offset='12%' style='stop-color:rgb(250,141,95);stop-opacity:1' />
    <stop offset='25%' style='stop-color:rgb(247,176,94);stop-opacity:1' />
    <stop offset='37%' style='stop-color:rgb(255,231,191);stop-opacity:1' />
    <stop offset='50%' style='stop-color:rgb(255,253,209);stop-opacity:1' />
    <stop offset='67%' style='stop-color:rgb(255,231,191);stop-opacity:1' />
    <stop offset='75%' style='stop-color:rgb(247,176,94);stop-opacity:1' />
    <stop offset='87%' style='stop-color:rgb(250,141,95);stop-opacity:1' />
    <stop offset='100%' style='stop-color:rgb(181,7,7);stop-opacity:1' />
</linearGradient> 

    <rect width='105%' height='80%'  y='10%' x='-5%' fill='url(#lgrad)' id='gradientRect'></rect>
  <filter  id='red-orangeGlow' width='150%' height='150%' x='-25%' y='-25%'>
    <!--     Thicken out the original shape     -->
    <feMorphology  in='SourceAlpha' operator='dilate' radius='3.5' result='thickenR'></feMorphology>
 <feGaussianBlur  in='thickenR' result='blurredR' stdDeviation='10'></feGaussianBlur> 
 <feFlood result='floodR' flood-color='#ffffff'/>
 <feComposite in='floodR' in2='blurredR' operator='in' result='filledBlur'/>
 <feImage xlink:href="#gradientRect" result="gRectangle"/>
<feComposite  in='gRectangle' in2='filledBlur' operator='in' result='finalBlur'/>

    <feMerge>           
         <feMergeNode  in='finalBlur'></feMergeNode>
        <feMergeNode  in='SourceGraphic'></feMergeNode>
    <!--        <feMergeNode  in='softGlow_coloredO'></feMergeNode>  -->
    </feMerge>
</filter>

    </defs>

    <g transform="translate(20,20)">
        <rect x="0" y="0"  width="140" height="140" rx="5" ry="5" style="fill: #555555; filter:url(#red-orangeGlow)"/>
        </g>
</svg>
  • Images from my deleted answer/comment for future reference: version 1, version 2. Please include images and code directly into your answer so that it is self-contained. – Socowi Nov 28 '18 at 16:03
  • 1
    I'm confused. Is this the answer to your own question? If so can you expand on the explanation and keep the link? Please take a look at How to Answer. – Luciano Nov 28 '18 at 16:25
  • @Luciano I had originally posted that I found the solution as a comment and then somebody told me to answer it so the question could eventually be closed as answered. I've added all the relevant pieces now. – Gregorio Litenstein Dec 1 '18 at 15:42

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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