The other day, Cassie Evans tweeted a really neat trick that I’ve never seen before: using SVG to mask one GIF on top of another. The effect is quite lovely, especially if you happen to grab a colorful GIF and place it on top of a monochrome one:
Considering I’ve never done anything with SVG masks before, I thought I could quickly look over the code and dissect it to see how Cassie made this rather lovely demo! The interesting thing about all this though is how rather simple it is.
To kick things off, we grab the GIF that we want to use as our SVG mask. We can fetch that from GIPHY:
Next we can begin writing our SVG directly in the HTML of the page: we begin by adding a
If you take a closer look at that
element, you’ll see that Cassie has added an
id="MASK" and this is how we’ll refer to the mask later on in the file, by pointing to this
Now we can go ahead and fetch our next animated image (but this time a cool GIF of outer space):
Let’s add that GIF into a
element and apply the
mask attribute to it, like so:
SVG code can look pretty scary at first glance, especially if you’re not familiar with it. It might be best to break all this stuff up into two parts. First, defining the mask…
…and subsequently using that mask…
Once we break it up like that, it makes a lot more sense, huh? And there you have it! Two animated GIFs used as an SVG mask. It’s a super nifty trick.
Cassie made another example but this time a jumping space monster: