SVG Quick Tip: Sliced Text

[PointC]

Hey everyone

 

I have another SVG quick tip for your text elements. If you need it to slice, explode, shatter or glitch, you may find this useful.

 

I was recently working on a Halloween animation for a client and we needed to slash some SVG text into pieces. My first instinct was to convert the text to paths and slice it up in in AI, but this text needed to be dynamic so that would be a lot of work.  

 

I decided to place the text in a pattern element and create a group of polygons filled with that pattern. That allowed me to create the slashed pieces of text (the polys) and have them fall away. The text is easily changeable with the GSAP text plugin. It proved to be an easy and flexible solution

 

See the Pen QZxxRx by PointC (@PointC) on CodePen

 

Happy Hallowtween.

 

[OSUblake]

Really creative!

[Carl]

That's crazy cool. Nice work!

[Dipscom]

Noice!

[elegantseagulls]

This is great! Using <pattern> is smart thinking here. A lot of cool possibilities beyond text too!

[PointC]

5 minutes ago, elegantseagulls said:

A lot of cool possibilities beyond text too!

 

Absolutely.

 

I just finished a SVG photo gallery for a client. Placing the images in a pattern allows for limitless transitions between pictures.