DEV Community

loading...
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)

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 ✌️