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

Glitch

 SVG Glitch

Scalable

 SVG Scalable Text - IE

Timeline SVG animation

timeline SVG animation

Handwriting

 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


Leave a comment

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