Masking GIFs with other GIFs

Nov-25-2019-09-24-03.gif

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:



See the Pen
Masking gifs with other gifs… (svg masking is cool)
by Cassie Evans (@cassie-codes)
on CodePen.

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:

via GIPHY

Next we can begin writing our SVG directly in the HTML of the page: we begin by adding a tag which can be used to store assets that we’ll refer to in another part of the same SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <mask id="MASK" maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse">
      <image 
        xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif" 
        height="100%"
        width="100%"/>
    </mask> 
  </defs>
</svg>

If you take a closer look at that <mask> 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 id attribute.

Now we can go ahead and fetch our next animated image (but this time a cool GIF of outer space):

Masking GIFs with other GIFs 1

Let’s add that GIF into a <g> element and apply the mask attribute to it, like so:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <mask id="MASK" maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse">
      <image 
        xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif" 
        height="100%"
        width="100%"/>
    </mask>      
  </defs>
  <g mask="url(#MASK)">
    <image x="0" y="0%" class="space" href="https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif" 
        height="100%" width="100%"/>
  </g>
</svg>

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…

  <defs>
    <mask id="MASK" maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse">
      <image 
        xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif" 
        height="100%"
        width="100%"/>
    </mask>      
  </defs>

…and subsequently using that mask…

<g mask="url(#MASK)">
  <image x="0" y="0%" class="space" href="https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif" 
         height="100%" width="100%"/>
</g>

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:

See the Pen
Space monster (svg masking is cool)
by Cassie Evans (@cassie-codes)
on CodePen.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email

Blue Beanie Day 2019

November 30th, the official “Blue Beanie Day,” has come and gone. I’m not sure I ever grokked the exact spirit of it, but I’ve written

Read More »

Yap

This post was originally posted here Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.  

Read More »

Detecting Inactive Users

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Read More »
sendinblue