codepens/splitting-laser-write/README.markdown

8 lines
637 B
Markdown
Raw Permalink Normal View History

2023-10-06 23:12:53 +02:00
# Splitting: Laser Write
_A Pen created at CodePen.io. Original URL: [https://codepen.io/nexii/pen/jONwNqv](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.