20 Cool SVG Text Effects

Writing and editing <text> in SVG provides a very powerful ability to create amazing text effect that can be easily changed and edited within the SVG code. SVG text is fully accessible, searchable, selectable and 100% semantic. So here are 20 amazing & cool SVG text effects that will give you ideas as a starting point for creating cool SVG content.

Animated 3D Text Styles

 Animated 3D Text Styles - SVG

Elastic stroke CSS + SVG

 Elastic stroke CSS + SVG

Animated Typing

 SVG Text: Animated Typing

Text Filling with Water

 SVG Text Filling with Water

Curved SVG Text

 Curved SVG Text

Path animated Text

 SVG Path animated Text


 SVG Glitch


 SVG Scalable Text - IE

Timeline SVG animation

timeline SVG animation


 Handwriting: SVG animation

Shattering Text Animation

 Shattering Text Animation

Text masking with snap.svg

 text masking with snap.svg

SVG Brush

 SVG Brush (first test)

Animated writing font

 Animated writing font (SVG paths)

SVG Filters for text

 SVG Filters for text

Animated text fill with svg text

 Animated text fill with svg text

Animated gradient fill

 SVG text with animated gradient fill

SVG mask + video

 SVG mask + video

SVG text on an interactive bezier path.

 SVG text on an interactive bezier path.

Shaded Text

 Shaded Text


  1. Subham Burnwalsays:

    and i forgot to tell you that i wish to use just the elastic stroke and just for a heading inside a div, cant its size be related to size of div instead of html?


    i want to do animation typing without using the tag

  3. Kevin Baughsays:

    These are amazing! Thank you so much for these examples.

  4. whatsays:

    ummm these are jpg files

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.