DEV Community

Cover image for Pure CSS Olympic Rings 馃挮
Jorge Baumann for DCSL GuideSmiths

Posted on • Updated on

Pure CSS Olympic Rings 馃挮

My little tribute to the Olympics.

In my last streaming I created the Olympics logo in pure HTML and CSS.

It seems to be easy, after all they are only circles, but you will need to think twice and create your mental diagram to make each ring fit. As you can see, rings are intertwined.

It was a funny stream. I liked it a lot. Especially when I wasn't able to center the rings <div> and 4 (supposedly) senior devs were trying to help me.
That's the main reason by which I love doing live-coding. We are a team, we learn together.

Actually, it was me alone, doing some live coding alone through codepen, but getting help from the community in the chat (as usual). Love you, subs! 馃挏

Finally, we managed to center it quickly. I believe it isn't the best solution, but it works.
When you are doing live coding with people looking at you, it doesn't matter how you achieve it. Just do it!

olympic rings

馃帹 The next day, I had in mind to animate the rings. We accomplished this task by creating 3 CSS animations and chaining them together.

The result was amazing. Don't you think?

animated rings

I'd be interested to hear what you think. Let me a comment below.

馃憢 That's all. Hope you like it as much as I do. Stay safe!

Discussion (6)

Collapse
afif profile image
Temani Afif

what is the #dog tag? I see you use it in all your posts

Collapse
baumannzone profile image
Jorge Baumann Author

Haha, it's just a joke. I have a dog called Rambo

RambitoJS

Collapse
imiahazel profile image
Imia Hazel

Cool.
Thanks for sharing.

Collapse
baumannzone profile image
Jorge Baumann Author

Thank you for reading <3

Collapse
inhuofficial profile image
InHuOfficial

Really interesting!

For anyone who wants to play with it:

Collapse
baumannzone profile image
Jorge Baumann Author

Thank you!

Yes, there you have the codepen 鉁岋笍