A while ago I created an animation to celebrate The Legend of Zelda: A Link to the Past anniversary. My main goal was to practice Three.js. But I had to find a way to recreate the logo effect where the sword goes through the "Z" with CSS.
You can have a look at my implementation made with React. I also wanted to share a pure HTML/CSS version to show it's easy to make:
The idea is to create the illusion by duplicating each letter and superposing them via an absolute position. Then with the magic of clip-path you can hide letter parts. The result would look like this (hover the word to see the animation):
- My letters are wrapped in a
spanwith a pseudo ::after element used to duplicate the letter;
- The letters parent
h1is a flex layout in order to remove white spaces;
- The text remains accessible (screen readers will ignore duplicated letters) and selectable (pseudo element won't be copied).
Top comments (0)