Share Posted October 22, 2018 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. 6 2 Link to comment Share on other sites More sharing options...
Share Posted October 22, 2018 Really creative! 1 Link to comment Share on other sites More sharing options...
Share Posted October 23, 2018 That's crazy cool. Nice work! 1 Link to comment Share on other sites More sharing options...
Share Posted October 23, 2018 This is great! Using <pattern> is smart thinking here. A lot of cool possibilities beyond text too! 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 23, 2018 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now