How to Create (Animated) Text Fills

I like to think that the future is already here. We have already so many exciting possibilities in CSS and SVG that some time ago we could only dream about. For example, we now have many possible ways to create text with an animated fill!

About a year ago the article Techniques for creating textured text by Sara Soueidan was published here on Codrops. This wonderful article will tell you all about the different methods for creating textured text with some modern web techniques including canvas.

I'm very interested in this topic but from a different perspective. I have the following questions: Can the text fill be animated? Can we fill text with animated shadows or gradients? Or what about using videos for filling the text?

In this article I'm going to share my experiments and five ways to create patterned filled text. In three out of these five cases we will retain the ability to select the text. Of course we'd like to have that for every case but with some workarounds we can solve this problem, too.

For each of the techniques I'll show the browser support, the ability to select text and, most importantly, the possibility to animate the fill (highly experimental).

I will not include all the code here, only the most important parts, but you can find everything inside the download files and play with it.

Let's begin.

Attention: Some of these techniques are very experimental and won't work in all browsers. Please see the browser support at the beginning of each section. Internet Explorer has very little support.

Method 1: Using background-clip: text

Browser Support:

ChromeSupported

FirefoxNot supported

Internet ExplorerNot supported

SafariSupported

OperaSupported

Certainly, this is the most obvious way which comes to one's mind, although background-clip: text is only supported in Webkit-based browsers for now and only with the prefix -webkit-.

Attention: demos from this section will only work in Chrome, Opera and Safari.

Non-supporting browsers will simply ignore the entire string and we can avoid showing the background image altogether.

Demo 2. If you'll look at this demo in Firefox or IE, you'll see just white text on black background.

This simple trick with a gradient will allow us to fix the view in non-Webkit browsers if we don't want to show an image but I believe that a workaround like this makes this method not a good choice for textured text yet.

If we want to animate the fill for example, CSS backgrounds don't give us many possibilities. We can only animate the background position and size, but we can't smoothly change colors.

Now let's have a look at patterns. Patterns in SVG can contain all types of SVG shapes and images. Patterns can be either simple or quite complex. SVG patterns can be resized without losing their sharpness.

For more on SVG patterns you can read the Patterns article in the SVG Tutorial section on MDN.

When using patterns there are less options for animating the element than with ordinary SVG shapes. For example, transformations on shapes in patterns don't work in Firefox. But we can animate the stroke in order to get something similar to scaling.

For this demo I use Sass too, but in this case I don't only set the colors but also the animation-delay. This will animate the stars sequentially:

If you look at the code of this demo, you'll find that there are more shapes than expected. When we enlarge strokes, some of the shapes may be cut off by the bounds of the pattern. By using duplicated shapes we can solve this problem.

Writing the CSS for this kind of stroke by hand can be very tedious, so I use a tiny function in Sass to do that. We can set the color and width as parameters. Despite of this convenient function, the resulting code will be quite big and cumbersome.

Unlike in HTML, strokes are available for all elements in SVG, including text. And besides being solid they can also be filled with gradients and patterns.

Conclusion

With this method the text can be styled using CSS. We can also select and copy the text. Another great advantage is that SVG has really good browser support. So for creating these kind of fills, SVG is one of the best candidates.

A disadvantage of using SVG is the restriction on the ability to manage the text. For example, the words in the text don't break when the text meets the document boundaries. We can use some tricks to get line breaks, but in this case the text might simply break in the middle of a word. So this method is more appropriate for short texts and logos.

Selectable text

Yes

Animatable fill

Yes, both fill and stroke can be animated, with some restrictions related to SVG animations.

Browsers support

All modern browsers

Method 3: SVG mask and SVG clippath

Browser Support:

ChromeSupported

FirefoxSupported

Internet ExplorerSupported

SafariSupported

OperaSupported

There are two types of masks in SVG. We also have masks in CSS that can be applied to HTML elements, but browser support is not good enough, so let's dive into SVG masks.

SVG masks can be applied to HTML elements too, but for now this feature only works in Firefox. SVG masks for SVG elements work fine in all modern browsers. And both clippath and mask can contain text.

What is the difference between mask and clippath?

clippath simply cuts the object to its path boundaries. It's like a scissor cut.mask takes transparency and brightness of the mask into account which allows for a kind of filtering of the object.

Depending on what you'd like to do, the circles can of course be replaced with any other shape. In this demo I use two circle elements where the second one is filled with a pattern, and the first one (visually behind the second one) is filled with a solid color. This is needed to hide the thin lines between pattern tiles in the second one. In simple cases only one shape can be used.

The markup for the group will be the same but the mask is applied by using the attribute mask:

<g mask="url(#m-text)">
...
</g>

In both mask and clippath, the text can be styled, i.e. we can change the font family and font size. But the text can't be selected.

This problem can be solved by duplicating the text from the mask/clippath, place it above the masked element and remove its fill by setting fill: transparent. Like that we'll get a transparent text which can be selected and copied.

To duplicate the text it's best to use symbol. But symbol doesn't work inside a clippath, but if you use mask, you can use one symbol for the mask and one for the transparent text.

The copy of the symbol must be placed in the code below the element with mask or clip-path.

It's important to know that fill: none doesn't work, but fill: transparent does. Also, a shape with a stroke but without a fill can be used to achieve the same effect. The text will then be selectable, too.

The great advantage of this technique is the variety of possibilities to animate the fill. You can use any combination of SVG elements and animate them in many different ways. In this case it's possible to use transformations, animate the fill and the stroke.

Here we have some animated content in a group with clip-path and animated strokes in the pattern:

There are more crazy ways to fill text. It's possible to use HTML in SVG by using the foreignObject element, so it's possible to apply a SVG mask/clippath to HTML elements with CSS effects and animations, even to video. This technique has some limitations, though. For example, playing videos ignore the mask in Chrome. So we can't use this for now although it's quite exciting. But we can do the same using other approaches.

Conclusion

Selectable text

No, but we can make it accessible with a workaround

Animatable fill

Yes, it's possible to animate both stroke and fill

Browsers support

All modern browsers.

In comparison to SVG text, this technique has more animation possibilities.

Method 4: Mix blend mode

Browser Support:

ChromeExperimental flag

FirefoxSupported

Internet ExplorerNot supported

SafariSupported

OperaExperimental flag

Attention: in order to view the demos in this section, you'll need to use Firefox or Safari, or in Chrome with the activated flag under chrome://flags/#enable-experimental-web-platform-features (relaunch required). To view the demos in Opera activate the flag opera://flags/#enable-experimental-web-platform-features and relaunch browser, too.

This method for making patterned text is very experimental and will not work in all browsers, but it is really interesting, because we are able to use anything we want as a fill for the text. Currently, browser support is not very good.

How it works: different blend modes work differently on the colors of the layer they are applied to. For example, the mode lighten will show only light areas of the content, dark areas will disappear. On the other hand, the mode darken will select dark areas, and light areas will disappear. This allows us to create a HTML layer with transparent areas of a complex shape, even in the shape of regular text which can be changed on the fly!

All the magic is contained in the line mix-blend-mode: darken. With this blend mode all white areas will become fully transparent and we can see the background of the parent.

The disadvantage of this technique is that we can't cut off areas around the text. This way doesn't allow us to put patterned text over another layer with a graphical fill (as it can be done using SVG masks). In fact, it will be just a holey layer through which we can see the underlying elements of the page. But under this layer we can place anything we can imagine, for example, animated CSS effects or even a video!

There is a problem with thin lines appearing around the block of text, especially in Firefox. This can be fixed with a pseudo element which has a border in the color of the background. This will cover the thin lines:

The main disadvantage of this method is the lack of browser support, so for now this technique is more suitable for experiments rather than using it in real website projects.

Conclusion

Selectable text

Yes

Animatable fill

Yes, and as fill any HTML content including video can be used

Browsers support

In Safari and Firefox blend modes are fully supported, in Chrome and Opera they are behind an experimental flag, IE doesn't support them at all

Method 5: SVG mask and HTML

Browser Support:

ChromeSupported

FirefoxSupported

Internet ExplorerSupported

SafariSupported

OperaSupported

This last technique is a little peculiar, too. It's quite similar to the previous one, but it has better browser support, because yes — it's SVG again!

I call this method the “reverse mask”. In its essence it consists in using a SVG mask to get a layer with a solid fill and a transparent area in the shape of text, so that, in the next step, this layer can be put over an HTML element with any content.

We won't cut the extra bits of the layer with content (as we do when using mask or clippath). On the contrary, we'll make holes of the needed shapes in the layer with the solid fill, similar to a stencil. And this is how it looks:

The lowermost layer contains the HTML element, to which we can apply a background or it can be filled with some HTML content. In simple cases the background can be applied to the parent container, but for more flexibility it's better to use a separate element.

The next layer is the SVG which contains the shape with the fill and the mask. It's a visible layer with a transparent area in the shape of the text. Above this layer we place a symbol with the text; this is needed to keep the text accessible.

The disadvantage of this technique is that the layer with the content is not cut off by the mask. The underlying layers can be seen through the transparent area of the topmost layer. We can't cut off the text from the background and place it over other layers.

But this technique has some advantages, too. The first advantage is that HTML is placed outside the SVG and may contain anything we want: any animations and media content.

If you want to animate the fill of the text then that's easy, too. But note that the performance is not the best in the following demo:

Conclusion

Selectable text

No, but we can make it accessible

Animatable fill

Yes, any HTML content including video can be used as fill

Browsers support

All modern browsers

Final words

Now you know several techniques to create text with patterned fills, including animated ones. Even if we can't use some of listed techniques right now, I'm sure that we will be able to use them in the future. And now, I think it's time for you to start creating some impressive text effects for your next project 🙂

The download file contains all techniques included in this tutorial (animated and not animated text fills). If you prefer to have a look the demo showcase you can download the files here: ZIP file of demo showcase.

Please note that you will need to adjust the paths of the patterns used in some of the examples in your download files. I.e. in style 11 we use a texture for the stroke which we reference by stroke: url(URL/index11.html#p-spots). You'll need to set the right URL here.