• An ode to Geronimo Stilton: defying the fixed nature of the Web

    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

    reallyfunkypaths

    followed by emphasized phrases.

    The paths I am talking about

    That’s the effect I wanted to achieve when developing the halo-like path that is shown on myhomepage.

    Normal HTML can’t really help us here

    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?

    SVG to the rescue

    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.

    Making text follow a given SVG path

    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

    Don’t worry if you don’t have Figma on your computer, you can copy the SVG code below by pressing “Show code” and then copying it.
    and draw the path which will look like this:

    Positioning the text

    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.

    Quick brown fox jumps over the lazy dog.

    Final touches

    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".

    My name isGeronimoStilton

    Conclusions

    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.