Use CSS to pass an element through your letters

#css #design

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):

More details:

My letters are wrapped in a span with a pseudo ::after element used to duplicate the letter;
The letters parent h1 is 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).