Burn effect with DrawSVG

[PG1]

(attached pen is just an example implementation of the basic DrawSVG).

 

Hi, 

 

I'm looking to generate some sort of burn effect, sort of as if a laser moved across the screen, leaving burn marks behind it. If I had a shape I wanted to 'burn around', like the attached, how would I best achieve?

I think I'd need:

 

Bright leading edge of the draw process
Darker draw colour left behind
Maybe some gradient

Am I attempting the impossible or are there obvious tricks that could help?

 

Cheers

 

 

 

 

See the Pen RwRwGoz by petegarvin1 (@petegarvin1) on CodePen

[ZachSaucier]

42 minutes ago, PG1 said:

Bright leading edge of the draw process

Darker draw colour left behind

I'd probably do that with two layered paths with the brighter one very slightly ahead of the other. Have the darker draw color on top so it covers most of the "leading edge".

 

42 minutes ago, PG1 said:

Maybe some gradient

Not sure what you mean by this.

[mikel]

Hey @PG1,

 

Just for FUN ...

 

See the Pen xxREJqR?editors=1010 by mikeK (@mikeK) on CodePen

 

Be creative ...

Mikel

[PointC]

The question reminds me of my old 2,000 post demo. It's still in GSAP 2 syntax, but maybe it'll give you some ideas.

See the Pen RyaJmj by PointC (@PointC) on CodePen

[PG1]

37 minutes ago, PointC said:

 

Wow @PointC that is almost the exact thing I was intending to build just maybe in a different color!!