You already know that the SVG format can do much more than displaying vector-based shapes. Today, I want to show you how text effects can be created with SVG. Patterns, masks and clipping paths allow you to implement a plethora of creative ideas. You can realize unusual and unique text effects that can’t even be done with the help of the many features of CSS3 or that at least don’t work in every popular browser. Patterns as Text Background The ,,<pattern>" element allows you to create any pattern you want via SVG and set it as the background for shapes, and also for texts. This can be repeating lines, circles or squares. Defining two squares with the length of one pixel each is enough to create a two by two-pixel chess board pattern. Even a simple line can become an interesting pattern for texts. <defs> <pattern id="muster" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse"> <line x1="0" y1="0" x2="5" y2="5" stroke="#a62121" /> </pattern> </defs> ,,<pattern>" elements, as well as other elements, that are not directly displayed, but are referenced, should be placed withing the ,,<defs>" container. An ID has to be assigned to the pattern for it to fill an element. Afterwards, this […]* You might also be interested in the following articlesSVG: How to Work With Text and FontTextures.js: SVG Textures in All Shapes and ColorsDrawSVG for jQuery – Animated SVG Enlivens Your WebsiteSurviving the Zombie Apocalypse with HTML5 and SVGCSS3: InDesign-Like Text Formatting with Exclusions and RegionsSVG Fallback in Older Browsers: Alternatives to JavaScript