The ability to manipulate the shape and path of text content is powerful. It allows designers to create a unique flow and make specific elements stand out.
But these effects always seem to work better in print design. While web designers had access to floating images around the text, hacks were needed for other bells and whistles. That is changing, thanks to modern CSS and JavaScript.
Now it is possible to place text on custom paths that closely resemble those seen in print. Even better is that you can add animations and hover effects to further enhance the experience.
The possibilities are endless. To prove our point, here are eight CSS and JavaScript snippets that demonstrate custom text paths. As you will see, the results can be amazing!
Sale Banners SVG element textPath by @BrawadaCom
This collection of fictional ads offers two strong examples of custom text paths. Both the serpentine ticker text and the rotating text banner could be perfect for a sidebar. All of them take advantage of the SVG textPath element. The look is a man of attention and works well even on small screens.
Check out the Pen Sale banner by @BrawadaCom
Gooey Fluid Text Background with SVG Filters by Luke Meyrick
Here we have a bit of stairwell text that combines basic HTML with clever use of CSS. SVG filters help define custom shapes, and Flexbox powers the layout. The presentation is fully responsive and scales beautifully on all screens.
See Luke Meyrick’s Gooey Fluid Pen Text Background
Stretch SVG Paths on Hover animation by Evan Jin
Not much to see at first glance. But scroll past this engaging text and watch the characters reach new heights – literally. SVG makes text look super sharp, and JavaScript makes it interactive. It’s an example of how custom text paths can add an element of surprise to your content.
See the SVG Pen path extension animation on hover by Evan Jin
Text Path: Stamp by Peter Nowell
A little bit of accurate text can do wonders for a logo. The fit and finish of this piece is as good as anything you’ll find in print. You could even mistake it for an image. But the small piece of text at the bottom of the page can indeed be selected.
See the Pen Text Path: Stamp by Peter Nowell
Animated SVG Text Path On Scroll with Corr
This section shows that text paths can also be used to enhance scrolling effects. The text goes around a square-shaped path and reverses its course when it scrolls up. The look is subtle and adds to the UX without being overwhelming.
View the Pen Text Path SVG Animation On Scrolling with Odd
Mobius methodology by Wayne McWilliams
Here’s an incredible navigation UI that shows how design can add context to content. In this case, it is used to represent the different steps in a process. Hover over an element to see the full text description below.
See Mobius Pen Methodology by Wayne McWilliams
Zip-Unzip Text Animation by Cojea Gabriel
This animation provides a fun way to reveal (and subsequently hide) content. The text scrolls vertically before “unzipping” itself to both sides of the presentation. The effect is reversed to zip the content up again. The GSAP library is used in conjunction with SVG.
See the Zip-Unzip Pen Text Animation by Cojea Gabriel
CSS Grid & Shape – Outside Venn Diagram by Adrian Roselli
Everyone loves a good Venn diagram, right? And this one is especially impressive, because it’s built with only HTML and CSS. CSS Grid handles the layout and allows text to adapt the shape of its container responsively. Scroll down to see an outline version that shows exactly how each container was built.
Check out Adrian Roselli’s Pen CSS Grid and Outer Shape Venn Diagram
Stand Out Shapes for Web Layouts
When you want to make a statement, custom text paths are an effective way to do so. They are infinitely flexible and can be adapted to any screen. And when combined with other effects, they will add a “wow” factor that users will enjoy.
Want to see more custom text path examples? Check out our CodePen collection!
