10 great examples of CSS, SVG, and Canvas masks

The technique of using masks to achieve some amazing visuals has been around for years, but as browsers have become better at supporting masks, the use of masks in Web development has recently become more popular.

This article looks for some examples of using SVG or Canvas mask and shows some classic ways of using masks.

1. Text Masking

The simple example above uses a text mask and changes the text to whatever text you want to display.

In the example above, you only need to use the background-clip property in the CSS. Use whatever text you want to display, of course with the background image you want to display. As for the effect of zooming in and out of the image, it is much simpler and can be achieved with a little CSS.

demo

2. Polygon Mask

demo

The above example uses JavaScript, and although the animation is a bit complicated, it’s all done on canvas. The results are really amazing.

The design of the polygon mask effect in the above effect is really unique, at least the unique design I have seen. JavaScript was used to create these shapes as masks to mask the background image.

Above, canvas is used as a large container to do animation driven by JavaScript, similar to the concept of SVG animation. As long as you use your imagination, you can make more interesting animation effects.

3. Picture mask

demo

This example is implemented using a mask image in CSS. After carefully observing the effect of the image before and after using the mask, it can be found that the image after using the mask obviously has some splash effect on the edge.

This image as a mask is a PNG image. Some parts of this PNG are transparent and some are translucent, while masks support translucency, so if you use it as a mask to mask the image, the transparent area does not show the image content, but the background at the bottom. Translucent areas show the content of the image, but add a bit of transparency, resulting in the splash effect shown in the image.

The same goes for words, of course. Detailed knowledge of some masks can be seen here. You can do the same with SVG.

4. Button effect

demo

I don’t know if you read the previous article about button effects. If you use a mask, you can get even more amazing results.

The effect of the above button is also achieved using a mask. The most amazing thing about this effect is that when the mouse moves over the mouse, the mask is used to complete the animation.

There is no problem with using this technique in WebKit browsers, and it will become a mainstream technique for animation in the near future.

5. SVG Text Mask

demo

Marco Barria created this effect using an SVG mask.

Unlike CSS, this effect is implemented entirely in SVG, and the text is done using the TEXT tag in SVG.

It is technically more complex than CSS, but it also gives developers more options to achieve the desired effect. Exporting SVG is also supported using SVG and vector design tools such as Adobe Illustrator.

6. Canvas Text Mask

demo

The above effect was achieved by Calvin Davis using Canvas, although Canvas is also adaptive.

Since it is realized by using Canvas, Canvas is a two-dimensional Canvas that will be transformed into a graph for display. Therefore, Canvas is more like using design tools to design the image effect and display it on the web page.

Some designers may think that using Canvas is not very flexible. If you want to make the configuration of text more flexible, it is not recommended to use Canvas to achieve this effect.

7. Gradient animation

demo

The gradient text animation above was created by Svante Richter using an SVG mask.

The entire text is implemented in SVG, the background of the entire text area is filled with gradient colors, and only the gradient colors of the text area are displayed through a mask.

Then use the ANIMATE property of CSS to move the gradient color to animate the gradient. This effect is used more often on product introduction pages.

8. Use clip-path masks for animations

demo

The above animation effect achieved by clip-path mask is mainly combined with JavaScript to randomly generate bubbles of different shapes, which is most likely to be drawn on Canvas.

It may seem a bit complicated, but Neil McCallion’s code is so well written that it’s easy to understand his ideas and methods.

Although this method is not very useful in practice, the idea and method of using clip-path mask is still worth learning.

9. SVG Background Mask

demo

This effect is often seen on some websites.

The Hero header is a design element that is used in many web designs. In the above image, a gradient and mask in SVG are used to achieve this effect.

This idea and method can be used not only in the Hero Header, but also anywhere else you want to use it. Browser support is very good, so feel free to use it.

10. CSS and SVG Masks

Finally, to summarize the differences between CSS and SVG masks, you can go to the link below.

demo

In the above link, for CSS and SVG masks are different corresponding examples, you can have a good look.

This is just a primer, and you can use your imagination to achieve more interesting effects.

This article is mainly compiled from the article 10 Amazing Examples of CSS, SVG & Canvas Masks In Action. Please kindly comment on any omissions, omissions or improper understanding.