The Versatility of SVGs 🌀

SVG is the gift that keeps on giving...and giving!

Hi everyone! In my most recent tutorial, I wrote about how to create a spinning circular text effect:

What makes this effect interesting is that the bulk of the work is done at the SVG layer:

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <path id="circle" d="M0 100a100 100 0 1 0 200 
                         0a100 100 0 1 0 -200 0" />
  </defs>

  <text width="400">
    <textPath xlink:href="#circle" class="text">
      Part of a heart-healthy breakfast...sorta! -
    </textPath>
  </text>
</svg>

The text is defined as a text element. The circular path the text takes is defined inside a path element. The relationship between these two elements helps create the effect where the text seems to wrap an imaginary circular shape.

The appearance of the letters themselves is handled by CSS:

.text {
  font-family: sans-serif;
  font-weight: 600px;
  letter-spacing: 2px;
  font-size: 30px;
}

There is something bigger I want to highlight. This seamless interplay between SVG, CSS, and our DOM has opened so many visual doors to our web applications and experiments. Whether it is this cool retro spinning circular text effect or CSS custom properties embedded inside our SVG elements to allow, among other things, richer theming, SVGs are proving to be more than just a vector-based image format.

If you want to go deeper into SVGs, I created a popular What are SVGs tutorial and associated video:

Complement that with The Billion Ways to Display an SVG, and you have a good foundation of SVG-related knowledge that you can build from!

Till Next Time

I hope you enjoyed this abbreviated version of this newsletter. In an upcoming edition, we’ll go a bit more in-depth on some data structures and my interview with indie hacker extraordinaire, Anthony Castrio.

Before I go, if you are interested in a very light-hearted poll related to today’s SVG topic, hop on over to Twitter and vote:

Lastly, I always enjoy hearing from readers like you. Feel free to find me on Twitter, LinkedIn, or the Forums to reach out and say “Hi!”.

Cheers,
Kirupa 😇