Against all odds, my favourite mouse when I was a kid wasn’t the world-famous Disney mascotte, but Geronimo Stilton.
The adventures of the journalist mouse accompanied me for my entire childhood, and what made them particularly engaging and interesting were the
followed by emphasized phrases.
That’s the effect I wanted to achieve when developing the halo-like path that is shown on myhomepage.
Given the static, vertical flow nature of HTML, we can’t really reach out for some magic <geronimo-crazy-text>
tag here, so how can we get those Stilton-y paths?
Luckily, we have the Scalable Vector Graphics standard on the Web, which is a great way to make content break out of its common vertical layout and make it more expressive and engaging.
Just a quick heads up!
In these code examples I’m using TailwindCSS to style components, make sure to check it out in order to get the exact same results that I’m getting in the examples!SVG can be used to make simple geometric shapes with ready-to-go tags (<circle>
, <rect>
):
and more complex shapes with the <path>
tag:
That’s with the latter tag that we’re gonna make some text follow (you guessed it) a path.
First of all we have to create an SVG, so let’s head over to Figma
Now that we have our shape to follow, it’s time to introduce the <text>
and <textPath>
tags which let us, respectively, draw an SVG text element and make that text follow a certain path, in our case the semicircular shape shown just above.
Text is on path, but to make it look like it just floats in the air the simple edit to do is changing the fill="aquamarine"
path background color to fill="transparent"
.
And that’s a wrap!
In this article I showed you how to make content break out of its normal vertical flow using SVG, specifically how to use it in order to make text follow a certain path.