Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
azuki

Glow effect?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,

 

Back in the Flash greensock library, there was a glow effect for symbols and text.  Is there anything like that for the HTML5 version?

 

Ideally, I'd like to animate a glow effect for text, images, and SVG objects but I'm sure where to begin.

 

Any thoughts?

 

Thanks in advance!

See the Pen qzfoc by NobodyRocks (@NobodyRocks) on CodePen

Link to comment
Share on other sites

You can use textShadow and boxShadow for some cool glow-like effects.

 

Have a look at this documentation for more details: https://greensock.com/css3/

  • Like 4
Link to comment
Share on other sites

You can just use the CSS box-shadow and text-shadow properties to accomplish a glow effect.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Outside of the text and box shadow options above, is there a way to add a glow effect to an SVG object?

 

Trying to find a way to animate a glow effect on an irregular SVG shape.

 

Any ideas?

Link to comment
Share on other sites

Hi azuki  :)

 

pls try like this :

 

html :

<svg  xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
  <defs>
    <filter id="glow" x="-150%" y="-150%" height="500%" width="500%">
      <feGaussianBlur stdDeviation="15" result="coloredBlur"/>
      <feMerge>
      <feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <circle filter="url(#glow)" cx="100" cy="100" r="40" fill="red" />
  </svg>

and js :

TweenMax.to("#glow feGaussianBlur",1,{attr:{stdDeviation:0},repeat:-1,yoyo:true});
  • Like 4
Link to comment
Share on other sites

Thank you both.  However, I'm trying to make an irregular shape glow.

 

 

Some context shown in the attachment, I'm trying to create a neon effect for an SVG graphic that I've created in Illustrator.  Essentially, this is an outline of a font, creating a 'neon tube' graphic, ideally that I can make glow to simulate the neon effect.

 

Unfortunately, the original font doesn't have an outlined version, hence the reason I recreated it in Illustrator - otherwise I'd love to use a font like

See the Pen qzfoc by NobodyRocks (@NobodyRocks) on CodePen

just to keep the code clean and animate that effect.

 

So, I could be taking the wrong approach here (trying to glow an SVG) but I appreciate any other thoughts!

post-6608-0-35888400-1446752079_thumb.png

Link to comment
Share on other sites

Did you try what we just posted?

Link to comment
Share on other sites

I did but didn't see any change so I'm assuming I placed this line incorrectly?  Also, please let me know how I can reference my SVG shape rather than this circle?
 
<circle cx="200" cy="200" r="50" fill="green" filter="url(#glow)"></circle>

 
<div id="svgTest">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 354.4 87.1" xml:space="preserve" enable-background="new 0 0 354.4 87.1" preserveAspectRatio="xMidYMin">
 
<defs>
   <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
           <feGaussianBlur stdDeviation="10" result="blur"/>
           <feMerge>
               <feMergeNode in="blur"/>
               <feMergeNode in="SourceGraphic"/>
           </feMerge>
       </filter>
</defs>
 
<circle cx="200" cy="200" r="50" fill="green" filter="url(#glow)"></circle>
 
<style type="text/css">
.st0{fill:#3CD52E;}
.st1{fill:none;stroke:#EB0029;stroke-width:3.541;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:none;stroke:#82BC00;stroke-width:4.0131;stroke-linecap:round;stroke-linejoin:round;}
.st3{fill:none;stroke:#91C323;stroke-width:3.0689;stroke-linecap:round;stroke-linejoin:round;}
.st4{fill:none;stroke:#9ECA43;stroke-width:2.3607;stroke-linecap:round;stroke-linejoin:round;}
.st5{fill:none;stroke:#A5CD51;stroke-width:1.8885;stroke-linecap:round;stroke-linejoin:round;}
.st6{fill:none;stroke:#ACD05E;stroke-width:1.1803;}
.st7{fill:none;stroke:#C5DD8C;stroke-width:0.4721;stroke-linecap:round;stroke-linejoin:round;}
</style>
<g id="svgGraphic">
 

*below this is a ton of svg path content so I've omitted it.

 

Link to comment
Share on other sites

Nice Job Diaco and Blake!

 

I am late to the party again:

 

See the Pen pjOKxo?editors=010 by jonathan (@jonathan) on CodePen

 

Dont forget to set overflow="visible" on your <svg> tag

<svg width="100%" height="100%" overflow="visible" viewBox="0 0 538 196">
      <defs>
        <filter id="blur1" x="-50%" y="-50%" width="300%" height="300%">
          <feGaussianBlur id="hue1feGaussianBlur" in="SourceGraphic" stdDeviation="0" />
        </filter>
      </defs>
      <rect x="0" y="0" width="538" height="196" style="stroke: none; fill: #00ff00; filter: url(#blur1);" />
</svg>

and the GSAP code:

TweenMax.to("#hue1feGaussianBlur", 10, {attr:{"stdDeviation":40});

Sometimes you might have to either try setting your filter through the attribute on your SVG child shape as

filter="url(#blur1)"

or through the style attribute for CSS on your SVG child shape:

style="filter: url(#blur1);"

But any of the above example should work

 

Also your <style> tag in your SVG should be right after the <svg> tag, not last

 

SVG <style> tag: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style

 

:)

  • Like 3
Link to comment
Share on other sites

See the filter attribute filter="url(#glow)" on the circle element, put that on the elements you want that filter applied to. Filters can be really confusing, and can take some time getting used to, but they're really powerful once you get the hang of them.

  • Like 1
Link to comment
Share on other sites

Ok, I'm able to get the SVG object to glow.  Interestingly, when the SVG was inside of a <div>, the glow filled the size of that div and thus was a box.  When the <div> was removed, the glow was more natural around the shape.  Seen here with the opening <div> tag that was removed:

<div id="buyTwo">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 354.4 87.1" xml:space="preserve" enable-background="new 0 0 354.4 87.1" preserveAspectRatio="xMidYMin" filter="url(#glow)">
 
<defs>
   <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
           <feGaussianBlur id="glowfeGaussianBlur" stdDeviation="40" result="blur"/>
           <feMerge>
               <feMergeNode in="blur"/>
               <feMergeNode in="SourceGraphic"/>
           </feMerge>
       </filter>
</defs>
 

Without placing the SVG in a <div>, I'm not able to position or animate it with the below line:  Is there a way to target the entire SVG for animation?

tl.set($buyTwo, {scale:0.9, top:40})
Link to comment
Share on other sites

You can just add the ID to the SVG rather than a containing DIV.

<svg xmlns="http://www.w3.org/2000/svg" id="yourDivNameHere" version="1.1" x="0px" y="0px" viewBox="0 0 354.4 87.1" xml:space="preserve" enable-background="new 0 0 354.4 87.1" preserveAspectRatio="xMidYMin" filter="url(#glow)">
  • Like 1
Link to comment
Share on other sites

For the div you need to add css position: absolute or relative when animating elements with transforms

 

azuki I think it would helpful to provide a codepen example to better help you!

Link to comment
Share on other sites

Thank you all for your help.  After some tinkering and your much appreciated guidance, I've been able to get it working.

 

@Jonathan, you're right - a codepen is the way to go.  I'm working with assets that can't be public facing at the moment but I suppose I could create FPO assets to show how it's developing.  Is that the best practice for sharing on codepen without revealing the client or project specifics?

 

As a side note, working with SVGs is a huge learning experience!

Link to comment
Share on other sites

azuki.. you could also use a SVG text element instead of applying the filter on a shape and apply the glow effect on the SVG <text> element.

 

SVG <text> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

 

Also you could do it by animating CSS Filters .. but CSS Filters are not widely supported yet, like SVG Filters are.

 

When you make your code pen it doesn't have to be the same assests just generic images, text, or shapes. So at least you can get the right technique of the effect your trying to achieve. And then you can apply or integrate that same effect to your private project.

 

Here is a video tut by GreenSock on how to create a codepen demo example

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/#entry49176

 

:)

  • Like 2
Link to comment
Share on other sites

Ok azuki, so i converted your codepen example from above that just used CSS3 animation and transitions. To use GSAP timelines, classNames, and text-shadow.

 

I removed the hover just you can see the glow effect all at once.

 

See the Pen xwaoNy by jonathan (@jonathan) on CodePen

 

And this example animates with a hover event:

 

See the Pen BoqBPG by jonathan (@jonathan) on CodePen

 

So you don't have to worry about using SVG Filters. My examples use the GSAP CSSPlugin to animate the switching of class names.

 

You can check the CSSPlugin docs for usage of className:

 

CSSPlugin Docs:

 

className

  • Allows you to morph between classes on an element. For example, let's say myElement has a class of "class1" currently and you want to change to "class2" and animate the differences, you could do this:
TweenLite.to(myElement, 1, {className:"class2"});
  • And if you want to ADD the class to the existing one, you can simply use the "+=" prefix. To remove a class, use the "-=" prefix like this:
TweenLite.to(myElement, 1, {className:"+=class2"});
  • Note: there are some css-related properties that don't tween like IE filters, but almost every css property is recognized and animates great. Also, there is a slight speed penalty when a className tween initializes because the engine needs to loop through all of the css properties to see which ones are different.

Hope this helps :)

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 10 months later...

Hello Jonathan !

thanks for your great help here.

I have tried to modify your earlier codepen from in this topic:

See the Pen zKwypR?editors=1000 by anon (@anon) on CodePen

 

I want to use an extern svg for the blur effect.

Heres my Codepen:

See the Pen NRjZkd by opendoors (@opendoors) on CodePen

 

 

Do you (or anyone else) have an Idea how to manage this?

Link to comment
Share on other sites

As far as I know, you can't directly alter the external file with JavaScript.

 

I *think* you can achieve what you want if you make the external SVG file reference the filter effect and then, you have to have the filter in the document you are targeting.

 

If I have a moment at work today, I'll try it out to see if it works.

Link to comment
Share on other sites

Hello Sandschieber

 

Be careful about using an external SVG. Sometimes it might not work as good as using inline SVG. And in your case an external SVG will act like an image, so you dont have direct access to the internal attributes that my original codepen is manipulating with GSAP AttrPlugin.

 

So it wont work wiith external SVG like you want, since it is being loaded inside an image and is subject to security restrictions.

 

https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image

Restrictions

For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:

  • JavaScript is disabled. <== that is why
  • External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder object URLs or data: URIs.
  • :visited-link styles aren't rendered.
  • Platform-native widget styling (based on OS theme) is disabled.

Note that the above restrictions are specific to image contexts; they don't apply when SVG content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed> elements

 

:)

  • Like 2
Link to comment
Share on other sites

I found a Solution!

 

Maybe "extern" was the wrong term, I meant "not Inline" but an svg from the same Domain.

 

First:

You're right Jonathan.

In my case: svg manipulation isnt allowed from extern Domains.

so I cant use the codepen with Images on free Image Hosters.

 

Second:

I can get access to the svg by fetching it with javascript first like in this codepen

See the Pen NRgvXq by opendoors (@opendoors) on CodePen

 

like explained her from jbeard4: http://stackoverflow.com/questions/3346106/accessing-a-dom-object-defined-in-an-external-svg-file

 

thanks for helping me!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×