How to create a neon sign?

[MitkaZV]

Hi, i'm newby, I have an idea - create image with neon lights effect. I create an svg file via Sketch.
This is a "rock sign hand" which will "transformate" to a "Shaka hand sign". This hand consist from 3 big parts:
1) Part which allways turn on.

2) Part which include "rocks position" of thumb and index finger.

3) Parts which include "shaka postion" of thumb and index finger.

1) I want to toggle two parts between themselves. When rocks part turn on - shaka parts must turned off, and when shaka parts turn on - rock parts turned off.I tried to make it, and on my codepen expample you my best result, but it still imperfect. 
- Looks very strange and have a delay beetwen turning on and turning off. 

- not visible turned of parts. But its must be visible(

stroke: '#000000', strokeOpacity: 0.297549374)

 

2) want to mo realistick effect of lights effect. Now it's static.
 

'drop-shadow(0 0 0.15em hsl(0, 100%, 52%)) drop-shadow(0 0 0.3em hsl(0, 100%, 50%)) drop-shadow(0 0 0.45em hsl(0, 70%, 40%)) drop-shadow(0 0 0.6em hsl(0, 70%, 40%)) drop-shadow(0 0 0.75em hsl(0, 70%, 30%)) drop-shadow(0 0 0.9em hsl(0, 70%, 30%))' : 'none',

But i dont know how( please help

 

See the Pen MWxOqGG by mitkas7 (@mitkas7) on CodePen

[mvaneijgen]

Hi @MItka ZV welcome to the forum!

 

What I would do is set all the colors to the same (red) and then use .to() and .from() to animate to the colors you want. In my brain this is much easier, because I know everything is red on page load and I just set them to the black when I want, same as opacity set it to 1 (the default) and then use GSAP to animate to to some other value.

 

See the Pen Rwdjqje?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Then the animation could look something like this. Thanks for the clear demo btw, was a breeze to work in! I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

See the Pen vYPWQdV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[MitkaZV]

• mvaneijgen thanx, I didn't  even think about making initial color to whole graphic, but now I understand  it was on the surface.
  Your realization looks great and simple.

Thanx again, but I have some questions. 
For effect of something like light stream i should use filter with dropshadow. Its also should to add initially at svg code or at animation functions?

[mvaneijgen]

27 minutes ago, MitkaZV said:

For effect of something like light stream i should use filter with dropshadow. Its also should to add initially at svg code or at animation functions?

I'm not sure what you mean, my advise just to try something and see what sticks. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

I'd tried adding a random opacity, to get some flicker in to it, but it needs some more work. Just try something that you think should work and post back here with a minimal demo showing what you've tried and someone here will be happy to point you in the right direction. 

 

See the Pen xxBPQWP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

There must be a few techniques to create a neon glow on an SVG path ranging from Gaussian Blur (bad performance in general), drop shadow, to creating multiple layers with different opacity values to create the effect. That seems mostly like a SVG design issue. Of course once you get the SVG to the place you want, you could definitely try to tween some values with GSAP in order to animate the glow as well, but as @mvaneijgen suggest, first get the SVG working the way you want, then add the neon effect and finally add GSAP to the mix.

 

Here are some google results about it:

https://rb.gy/vqrgze

 

Hopefully this helps.

Happy Tweening!