Make rotating circular text using Tailwind or plain CSS
Tags: css, beginners, tailwindcss, webdev
Published: 2023-10-22 22:35:03

A preview of the end result!
![End result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rea1f3hn7egi9savmnzp.gif)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vafw67vf8x7h81ratqr9.png)

**2. Change the mode from shape to path**

![Ellipse tool mode switch from shape to path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6oykypf4zdxlkevx4iz.png)

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

![Circle path example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfoecz7zgynuqbqcxxa7.png)

**4. Select the horizontal type tool**

![Horizontal type tool location in Photoshop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35ihbkasckhr72v40krm.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krcrazawefabtxy6u0j8.png)

**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](https://emanuelepapale.com/)

[Connect with me on LinkedIn](https://www.linkedin.com/in/luke-horton-7648bb283)