Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PointC

SVG Quick Tip: Sliced Text

Recommended Posts

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.

:)

 

  • Like 6
  • Thanks 2
Link to comment
Share on other sites

Really creative!

  • Thanks 1
Link to comment
Share on other sites

That's crazy cool. Nice work!

  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×