20 Amazing SVG Text Effects

In this post i've collected 20 amazing 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:

Elastic stroke + SVG

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

20 Amazing SVG Text Effects


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 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.



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



The brillliant effect ( ) recreated with SVG filters.


Path animated Text

Animated the test “Design” based on one SVG Path


Text masking with snap.svg

Checking out the new snap.svg javascript library, makes it easy to mask groups of paths 🙂


Shattering Text Animation

GSAP text animation. SVG path shattering. Slow motion on hover.



Summerbird's logo (SVG) animated in CSS


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

Written by Julian Anderson

Smashfreakz delivers Useful and Informative article about Design, Web Resource, WordPress, Top List, Infographic, Inspiration, Photography and Many more. Our Goals is make Inspirations to all people.

Leave a Reply

Exit mobile version