How to create animated text fills and strokes with CSS and SVG

Currently, there are so many possibilities in CSS and SVG that weren’t available in the past. You can manipulate images, text and create awesome animation, for example: animated text fills and strokes.

Iulya Buhvalova (aka yoksel): front-end developer at Livejournal likes to experiment with code. She likes to mix CSS and SVG in different ways and achieve interesting results.

Iulya explored different methods for creating textured text with modern web techniques. In this tutorial she lists her experiments and diverse ways to create patterned filled text.

Please note that some of these experiments will not work in all browsers and can load them (you can experience some delays, as some demos might require additional resources). We will list the experiments that are supported in most of modern browsers. Here we go:

Experiment 1: SVG text with pattern

See the Pen zxjOwe by designhooks (@designhooks) on CodePen.

Experiment 2: Animated shapes in text

See the Pen XJqrgo by designhooks (@designhooks) on CodePen.

Experiment 3: SVG text with animated stroke

See the Pen vEjBJL by designhooks (@designhooks) on CodePen.

Experiment 4: SVG text with animated dashed stroke

See the Pen bNMbrr by designhooks (@designhooks) on CodePen.

Experiment 5: Animated pattern in text

See the Pen jExNLZ by designhooks (@designhooks) on CodePen.

Experiment 6: Animated shapes in text

See the Pen MYGgvB by designhooks (@designhooks) on CodePen.

Experiment 7: Fill the text with a video

See the Pen zxjOde by designhooks (@designhooks) on CodePen.

Conclusion

Even if we can’t use some of these techniques right now, we will probably be able to use them in the future (as the technologies evolve and browsers will have a better support for SVG). Now, it’s time for you to start creating some impressive text effects for your next project.

Read the whole tutorial with step by step instructions and explanations on codrops.