DEV Community

Cover image for Make rotating circular text using Tailwind or plain CSS
Luke
Luke

Posted on

Make rotating circular text using Tailwind or plain CSS

A preview of the end result!
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

Ellipse tool location in Photoshop

2. Change the mode from shape to path

Ellipse tool mode switch from shape to path

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

Circle path example

4. Select the horizontal type tool

Horizontal type tool location in Photoshop

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

Image description

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} />
    )
}
Enter fullscreen mode Exit fullscreen mode

7. Apply an animation

Using tailwind:

<img
    src={CircularText}
    className="animate-spin"
/>
Enter fullscreen mode Exit fullscreen mode

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); }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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: [],
};
Enter fullscreen mode Exit fullscreen mode

Credit to Emanuele Papale for the inspiration

Connect with me on LinkedIn

Top comments (3)

Collapse
 
krhoyt profile image
Kevin Hoyt

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!

Collapse
 
lexiebkm profile image
Alexander B.K.

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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); }
}       

Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
pxlmastrxd profile image
Pxlmastr

Nice! I'll have to use this on my loading screens...