See the Code - See it Full Page - See Details
Reveal content via `clip-path`. `body` has two Hellos in white... `main` has three Hellos (2 black, 1 white). Animation on main takes it from a shape with 0 radius or flattened... and grows into a full shape, revealing the content of the `main`. `clip-path` animations will not be run on compositor, but in my practice performs well at smaller sizes (smaller than this). This will likely lag or spin fans up on lower powered devices since the animation covers a space of `80vmin` x `80vmin` and for this demo is running infinitely. I personally see good performance on latest Safari (iOS and Mac), Chrome (Mac and Android), and Firefox.
This Pen uses: HTML, CSS, JavaScript, and