Look at those text effects: wow would you build them?

My first answer, somewhere in the 2000s, would have been Flash. A timeline, some easing curves, spooky rippling text for every band MySpace page. 🤘 After Flash came many other options: jQuery plugins, canvas pixel picking, shaders in a giant WebGL library for one ripple of text.

Luckily today all you need fits in two SVG primitives and one line of CSS.

For a while now, you can apply SVG filters to regular HTML:

filter : url ( #my-filter )

Enter fullscreen mode

Exit fullscreen mode

The browser then renders your element through that filter. And SVG filters can do wild things. The wildest of all: feDisplacementMap .

How feDisplacementMap works

Here’s how feDisplacementMap works. It takes two images. The first one is your content ( SourceGraphic , in filter-speak). The second one is a map .…