Masking GIFs with other GIFs

Cassie Evans recently shared a clever trick: using SVG masks to overlay one GIF on top of another, especially if colored GIFs are superimposed on monochrome GIFs.

Since I've never used SVG masks before, I tried to interpret Cassie's code and found that its principle is surprisingly simple.

First, select the GIF used as the SVG mask, for example, get it from the GIPHY website.

Then, write SVG code directly in HTML. Add first<defs></defs> Tags, used to store resources that will be referenced later in other parts of the SVG:

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

Notice<mask></mask> id="MASK" attribute added in the element will reference the mask later via this attribute.

Next, select another GIF as the underlying image (for example, a GIF for a space scene).

Add this GIF to<g></g> In the element, and apply the mask attribute:

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

At the beginning, the SVG code may be more complicated, so it is recommended to break it down into two parts:

Define mask:

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

Use masks:

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

This way, the code becomes much clearer and easier to understand. This is the clever way to use two GIFs as SVG masks.

Cassie also made another example, this time a jumping space monster.

The above is the detailed content of Masking GIFs with other GIFs. For more information, please follow other related articles on the PHP Chinese website!