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
Experiment 2: Animated shapes in text
Experiment 3: SVG text with animated stroke
Experiment 4: SVG text with animated dashed stroke
Experiment 5: Animated pattern in text
Experiment 6: Animated shapes in text
Experiment 7: Fill the text with a video
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.