Make rotating circular text using Tailwind or plain CSS

#css #beginners #tailwindcss #webdev

A preview of the end result!

To get started, we're going to need to create some text with the letters following a circular path.

Photoshop makes it easy.

1. Select the ellipse tool

2. Change the mode from shape to path

3. Draw a circular path for the letters to follow
Tip: hold shift + option/alt for a perfect circle

4. Select the horizontal type tool

5. Type your text
Tip: hover over your circle path and click when you see the squiggly line icon showing

6. Export as PNG, place it somewhere in your project folder and import it into your project
I'm using React so I'm importing it like so:

import CircularText from "./images/circular_text.png"

export default function App() {
    return (
        <img src={CircularText} />
    )
}

7. Apply an animation

Using tailwind:

<img
    src={CircularText}
    className="animate-spin"
/>

Using plain CSS:

img {
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}

8. Adding something in the middle
I'm going to do so by grouping the images in a div and centering the middle image using absolute positioning.

<div className="relative">
    <img src={CircularText} className="animate-spin"/>
    <img src={MiddleImage}
         className="absolute left-1/2 top-1/2 w-11 -translate-x-1/2 -translate-y-1/2 transform"
    />
</div>

9. Changing animation speed
If you're using plain CSS, you can change the animation speed by adjusting the value of the animation-duration property.

Tailwind users, you're going to have to jump into the tailwind.config.js file. Here, I'm extending the default spin animation into a new animation I've called spin-slow. Make sure to use the name of your new animation back in your <img /> e.g. <img src={CircularText} className="animate-spin-slow" />

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{js,ts,jsx,tsx,html}"],
    theme: {
        extend: {
            animation: {
                "spin-slow": "spin 25s linear infinite",
            },
        },
    },
    plugins: [],
};

Credit to Emanuele Papale for the inspiration

Connect with me on LinkedIn

Top comments (4)

Kevin Hoyt • Oct 24 '23

I do not know why, but I love examples with circles.

Worth considering would be to replace the image with SVG using the textPath element. Then you would have a vector rendering of the text, which you could change as easily as changing the HTML. I put together a web component version that ditches React in favor of web standards and portability.

Thanks for the inspiration!

Alexander B.K. • Oct 23 '23

As an alternative, I can simply use html button element instead of imported image, like so :
JSX (React) :

export default function App() {
    return (
        <button className="rotatingbutton">Rotating Button</button>
    )
}

CSS (not using Tailwind) :

.rotatingbutton {
    width: 100px;
    height: 100px;
    background: seagreen;
    color: white;
    border-radius: 50% 50%;
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}

The main idea is still the same, i.e using @keyframes for animation like you do here.