circle itself. So something like this, where we say, give it a background color of blue, give us a width of 300 pixels and a height of 300 pixels. Yeah, something like that. Let's make it a circle. So I could say, isCircle here. And I'm making this a separate class just because I know I will use this in multiple places.

And I'm making this a separate class just because I know I will use this in multiple places. So I'll say borderRadius is 50%. Okay, so we have our circle, and then we're going to have little objects that I want to rotate along the edges, over and over. So we're probably going to have to use CSS animations for that, right? Now, before we create those objects,

use CSS animations for that, right? Now, before we create those objects, let's center the blue circle on the page. So we can use Flexbox for that. I'm going to say the HTML and the body should have a height of 100%. And this is just so I can say display: flex, align-items: center, and justify-content: center.

on the page. Now within it, I know I'm going to have, what amounts to like avatar images, but I'm just going to simulate that with another div here. We'll call it object or something like that. Okay. So my object is going to be a little smaller. Maybe a width of 30 pixels and a height of 30 pixels.

So we're going to start with no rotation at all, 0 degrees. But then I'm going to translate x to, and what we're going to do here is set this equal to half of the diameter. So the full width is 300 pixels, so let's set it to 150 pixels. And then when it's done,

be positioned absolutely, so they don't affect each other. Yeah, now they're perfect. Cool. The next thing I'm seeing is that we're vertically aligning this to the center here and here. Maybe I can give myself a class like isCentered along the x and y coordinates.

like isCentered along the x and y coordinates. And then I can paste that in. Okay? So now we can get rid of that repetition, get rid of this, and then come back to HTML and just add a couple classes. isCentered, x, y,

isCentered x, y, and then the same for my wrap. Great. Now, here's some other cool things we could do. What if we want them to be moving in the opposite direction? Well, I could say the B item, I know I can do animation, what is it called?

and I could just say something like automatically do what it was already set, and then I could just set those values up here, that would be cool. But I'm not sure I can do that. However, what we could do, at the very least, I think, is we could define the animation on the object, but just split these. So I could say like animation

And then each of these could simply declare their name. Alright, so that would be rotateB, rotateC, and rotateD. And that at least dries it up a little bit. Let's run it again. Yeah, like that.