Free Sample Lesson
Every week Creative Coding Club members get a new lesson.
Enjoy this free sample.
Today I'll show you how cool it is to animate svg text on a path!
Boxy SVG makes it super easy to set up, but it's also not that tricky to hand-code either.
The basic components are
- A <text> element that contains some text
- A <textPath> that contains a startOffset (controls position of the text) and a reference to a <path>
- The <path> that the text gets position on (visible in document or defined in <defs>)
I'll show you 3 ways to create text on a path in Boxy SVG and of course walk you through what all the code means.
Finished Demo
If you're like me, studying the code in a a demo like this AND building something simple on my own are the best ways to learn. Open up Boxy SVG (Chrome / Edge Only) and give it a try!
Go Deeper with GreenSock
If you would love to have new web animation lessons and challenges sent to your inbox each week AND also instantly unlock over 180 lessons for all skill levels check out my Creative Coding Club course bundle.
I absolutely guarantee you're going to love it.
Check out my new logo animation!
This was 100% designed in Boxy SVG and animated with GSAP on CodePen.
If you get some joy scrubbing through this animation and say "I want to make animations like this", then my course bundle is for you!
Special Monthly Discount: $2.95/mo
Unlock nearly 200 GreenSock lessons and start your journey to becoming a GSAP Pro!
Grab the Lifetime plan with HUGE Savings. Less than 20 seats left.