Home > Enterprise >  Animated SVG in React
Animated SVG in React

Time:04-03

I have a React web app utilizing Tailwind CSS and I'm attempting to import a pre-animated SVG file that I obtained from SVGator, however, the file immediately throws a massive error when imported. What is the best way for imported pre-animated SVG files, if there is a proper method?

What I want to animate is a circle with an icon that will revolve entirely around a specific axis, which is a picture in the center.

Here is the circle:

<div className='w-[5%] mx-20 self-center'>
  <div className='shadow-lg bg-gray-200 rounded-full'>
    <img className="w-15 mx-auto" src={images.react} alt="React icon" />
  </div>
</div>

I would much rather just import a pre-animated SVG into the site, as implementing multiple circles revolving around the same radius might become bothersome in regards to CSS.

EDIT: For reference, I have found this answer that depicts a rough structure of what I'd like to implement within React/Tailwind: image

If anyone wants to convert the index.css into TailwindCSS, feel free.

  • Related