SVG masks and wow effects: magic with simple words

The existence of SVG is known to all who are engaged in the front-end. This technology is already more than one year, more than once it has been written about it. But there is one moment. Often, on different resources, including a toaster, beginners ask questions about creating a certain family of animations on the site and get rather strange answers from “experienced” developers. There is a feeling that at such moments everyone thinks in the context of HTML + CSS + JS and simply forget about the existence of SVG, offering everything to draw on the canvas and giving promises along the way to give to the person who invented it, over the head. But this way (drawing on the canvas) is often too complicated relative to the problem being solved. In the previous article, we discussed ideas for creating partial wow effects , and in this one we’ll talk about masks and see a couple of animations that can be done with them.

What are these masks anyway?

In our context, a mask is an additional layer above the content that partially hides it. At first glance it may seem that apart from cropping some hexagon-shaped pictures there are no applications for this. After all, usually just such examples are given in articles about masks. But if you look a little wider and add movement, then everything starts to play with new colors.
')
In the base case, the mask is created like this:

<svg> <defs> <mask id='mask-1'> . . . </mask> </defs> <image mask='url(#mask-1)' /> </svg> 

Instead of a picture there can be anything. The mask is quite possible to apply to everything that we draw there. It can also consist of any components, we can make it from a picture, use polygons or curves.

It is convenient to make the mask black and white. More precisely, to make it so that it consists of shades of gray, which will work as transparency. Extreme values, black and white are full transparency and opacity, and shades of gray are something in the middle. Formally, this is not necessary (the color version will work as well), but it is rather convenient.

In most cases, we use two-color black and white schemes to make masks with clear boundaries, but it is worth remembering that you can add transparency if necessary.

In general, this is all you need to know. Masks are a very simple tool in our arsenal, but the benefits of it can be quite impressive. Consider a couple of examples.

Filled text

This effect is relatively common, but will nevertheless be a good example for beginners. The idea is as follows: the text (let it be white) on the background of the picture is transformed into text consisting of a picture on a white background. Or the same, but in the opposite direction. In words it is difficult, but take a look at the illustration:



Instead of a picture, there may be some kind of gradient (for example, polka-dotted) or animated waves - everything here depends on you. In order to realize the transition effect, you need to take a mask consisting of black text on a white background, and then change the text color to black, and the background color to white.

 <svg viewBox='0 0 100 100'> <defs> <mask id='mask-1' x='0' y='0' width='100' height='100'> <!--   #000  #fff --> <rect id='main-rect' x='0' y='0' width='100' height='100' fill='#000' /> <!--   #fff  #000 --> <text id='text' x='50' y='80' fill='#fff'>SVG</text> </mask> </defs> <image width='100' height='100' xlink:href='. . .' mask='url(#mask-1)' /> </svg> 

This is all that is needed to create such a transition. In one case, the mask closes the silhouette of the text and skips the image around it, while in the second everything happens exactly the opposite. Simple and effective.



If you add a couple of additional rectangles of the desired color to the mask and animate it a little bit, you get a rather attractive effect:

It is useful to pay attention to how the text leaves because of the invisible wall at the very beginning. Similar actions are often used when creating various animations.

The example uses anime.js, someone will say that you need to use GSAP, because this is the “standard”. But, as we know, the taste and color of felt-tip pens are different, so use what you like more. It is possible to do all this on pure JS. In essence, all these animations are a gradual change of certain attributes of elements, so no one bothers to take the requestAnimationFrame, querySelector, setAttribute and independently increase or decrease the required values. In the first example, only the coordinates of the elements in the mask and their colors change.

Coloring pages. Kindergarten eyes maker.

Some say that the coloring - this is not for adults, others - that they soothe. But be that as it may, this is a very good thing for sites related to children's educational games, art courses or something else. When coloring an object (again, a rectangle, a photo - it does not matter, let it be a heart), the mask will be a very useful tool.

Let's take some vector graphics editor and scroll a curve line along which our imaginary marker pen will move. Special talent is not needed here, but if you draw with the mouse, it is better to smooth this line a bit:

You can draw only the necessary shape, and you can go a little beyond its limits - this is an easy way to add small pauses in the painting.

And now we will make the line thicker and draw it from beginning to end, animating the strokeDashoffset property. By doing this in the mask, we get the effect of sketching our object.


All this is implemented literally in several lines:

 <svg viewBox='0 0 100 100'> <defs> <mask id='mask-1' x='0' y='0' width='100' height='100'> <path id='path-1' d='. . .' fill='none' stroke='#fff' stroke-width='8' stroke-linecap='round' /> </mask> </defs> <path d='. . .' stroke='#AF1B3F' stroke-width='0' fill='#FF686B' mask='url(#mask-1)'/> </svg> 

And the animation itself:

 var lineDrawing = anime({ targets: '#path-1', strokeDashoffset: [anime.setDashoffset, 0], duration: 5000 }); 

Thus, it is possible to make a rather amusing effect of drawing a picture, when several layers are taken (conditionally, sketches, underpainting and registration) and “drawn” in turn. In some cases, this approach may be a good basis for a presentation on product creation. Or the transition between images in different galleries, which will be the following example.

Transitions for carousels

Most often, we see transitions that are based on slide shifts, like when smoothly rolling the film, or based on increasing / decreasing the transparency of these slides. But it's boring. Masks give us the opportunity to make much more interesting transitions. For example, take this option:



In pure CSS + JS, doing things like this is difficult. But if you take a mask consisting of several rectangles that move in one direction or increase in size, then everything becomes much simpler:

WebKit has a small floating bug in it, when the values ​​are not rounded exactly in the direction we expect. As a result, holes appear in 1px between the elements. You can solve this by using calc from CSS, adding or subtracting 0.5px from the desired values, and in our context, you can make the figures a bit larger than they should be (remember that on small screens you need to increase more - in the example this is deliberately not done and with a decrease in the size of the window, one can notice the appearance of gaps between the rectangles). With properly selected values ​​to increase, no one will notice that there is something wrong.

In the same way, you can make “bubbles” so that the next slide spreads out on the previous one in the form of increasing circles or in the form of blots, if you draw it in the form of a closed curve, various mosaics of polygons or puzzles, when the only thing we need to do is change the color of the fill of these figures in the mask, and many other interesting effects - it all depends on your imagination.

Conclusion

Masks are a very useful tool in the front-end arsenal. Those who are just beginning to enter this topic should pay some attention to them, because they do not require a long study and give powerful results here and now.

If you want to read about simple ideas of creating any other family of effects (in the context of the frontend, of course) - leave your suggestions in the comments.