20 Amazing SVG Text Effects

In this post i've collected 20 amazing SVG text effects you can be using for your project. For the most part, they all refers to a collection of assets that are design to speed up the development. These SVG text effect have ability to create wonderful text effect that can be easily changed and edited within the SVG code. See what works for you best.

---

See also:

• 12 JavaScript Libraries for SVG Animation
• 12 jQuery Page Flip Book Plugins
• 25 jQuery Typography Plugins for Developers

---

Elastic stroke CSS + SVG

Very beautiful elastic stroke CSS + SVG animation. Color selections are killer and so is the stroke animation.

 

Curved SVG Text

This is how easy it is to have text on a curved path and also make it animate.

 

Text Filling with Water

CSS Text Filling made with SVG for hopefully better result.

 

Animated 3D Text Styles

This uses HTML text so Google reads just like any other HTML text.

 

Animated Typing

Getting Friendly Animated Typing with SVG Text # 2: animate && textPath

 

Timeline SVG animation

A timeline heavy animation using SVG and Greensock. Looking pretty good for me in FF right now, sometimes it works in Safari but sometimes it just totally chokes out and the paths stop drawing.

 

Scalable

An attempt to make text scale (fit the width) to its wrapping container. This version uses the intrinsic aspect ratio fix.

 

Glitch

The brillliant effect ( css-tricks.com/glitch-effect-text-images-svg ) recreated with SVG filters.

 

Path animated Text

Animated the test “Design” based on one SVG Path

 

Text masking with snap.svg

 

Shattering Text Animation

 

Handwriting

 

Shaded Text

 

SVG text on an interactive bezier path.

 

SVG mask + video

 

Animated gradient fill

 

Animated text fill with svg text

 

SVG Filters for text

 

Animated writing font

 

SVG Brush