Circular SVG Text Animation

Exploring some experimental circular SVG text effects for an intro animation.
circletext_featured

From our sponsor: Wix’s robust, secure platform lets you develop faster and deliver smarter.

The other day I looked at some nice animations that I always wanted to code up somehow. One of them was this gem by Twotwentytwo and Nathan Riley from 2019:

Furthermore, there’s another beautiful animation that I have stumbled upon recently called Spiral Scheduler by Michael Crawford. Go check it out on, it’s such a smooth animation.

The idea of using circular typography is really awesome and therefore I wanted to explore some animations with it. To do this, I used an SVG with texts on circular paths. There’s a really great article by Amelia Bellamy-Royds that explains how to make them, it’s a great read: Perfecting Paths for <textPath>

I thought it would be nice to make some kind of intro animation and play with different scale effects. There are a lot of possibilities, for the look and for the feel of the animation. So here are three demos for you to explore and hopefully they give you some inspiration for some circular motion design.

Let me know what you think and thank you for checking by!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.