DEV Community

Cover image for Pure CSS Olympic Rings 💫
DCSL GuideSmiths Spain

Pure CSS Olympic Rings 💫

Jorge Baumann
Senior Software Engineer · Instructor · JavaScript Full Stack Developer · Live coding on Twitch every week
Updated on ・1 min read

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)

afif profile image
Temani Afif

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

baumannzone profile image
Jorge Baumann Author

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


imiahazel profile image
Imia Hazel

Thanks for sharing.

baumannzone profile image
Jorge Baumann Author

Thank you for reading <3

inhuofficial profile image

Really interesting!

For anyone who wants to play with it:

baumannzone profile image
Jorge Baumann Author

Thank you!

Yes, there you have the codepen ✌️