codepens/splitting-laser-write

Splitting: Laser Write

_A Pen created at CodePen.io. Original URL: https://codepen.io/nexii/pen/jONwNqv.

This is an example for getting a sharp glow on the edge of the mask of a text clip-path animation.

By applying a filter blur followed by a high contrast on an element wrapping a thin clip-path animation we can give it the appearance of a bright glow without accidentally masking the glow filter itself in the same clip-path.

We then animate this together with a second layer that masks sharp/unblurred text behind it, which uses an CSS animation that follows the glow at the same time.