El otro día, Cassie Evans tuiteó un truco realmente genial que nunca había visto antes: usar SVG para enmascarar un GIF encima de otro. El efecto es bastante encantador, especialmente si tomas un GIF colorido y lo colocas encima de uno monocromático:
Ver la pluma
Enmascarando gifs con otros gifs… (el enmascaramiento svg es genial) por Cassie Evans (@ cassie-codes)
en CodePen.
Teniendo en cuenta que nunca antes había hecho nada con máscaras SVG, pensé que podría revisar rápidamente el código y diseccionarlo para ver cómo Cassie hizo esta demostración bastante encantadora. Sin embargo, lo interesante de todo esto es lo simple que es.
Para comenzar, tomamos el GIF que queremos usar como nuestra máscara SVG. Podemos obtener eso de GIPHY:
vía GIPHY
A continuación, podemos comenzar a escribir nuestro SVG directamente en el HTML de la página: comenzamos agregando una etiqueta que se puede usar para almacenar activos a los que nos referiremos en otra parte del mismo 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>Si miras más de cerca eso <mask> elemento, verá que Cassie ha agregado un id="MASK" y así es como nos referiremos a la máscara más adelante en el archivo, apuntando a este id atributo.
Ahora podemos seguir adelante y buscar nuestra próxima imagen animada (pero esta vez un GIF genial del espacio exterior):
Agreguemos ese GIF en un <g> elemento y aplicar el mask atribuirle, así:
<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>El código SVG puede parecer bastante aterrador a primera vista, especialmente si no está familiarizado con él. Quizás sea mejor dividir todo esto en dos partes. Primero, definiendo la máscara …
<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>… y posteriormente usando esa máscara …
<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>Una vez que lo rompemos así, tiene mucho más sentido, ¿eh? ¡Y ahí lo tienes! Dos GIF animados utilizados como máscara SVG. Es un truco súper ingenioso.
Cassie hizo otro ejemplo, pero esta vez un monstruo espacial saltando:
Ver la pluma
Monstruo espacial (el enmascaramiento svg es genial) por Cassie Evans (@ cassie-codes)
en CodePen.