CSS Challenge: Circle Ring Animation

We love to learn new things at Savas. Every once in a while we tee up challenges for each other in Slack. Sometimes they're front-end related, such as—"What's the most semantic way to mark up a design like this?" or "What's the fewest number of elements you could use to make this animation?". Sometimes they're design related, like—"How would you build all of these variations into a single Figma component?"

It's a fun way to share skills, discover new approaches to old problems, and learn from each other as a team. We thought we'd start posting a few in case you wanted to try them too.

They'll range in difficulty from beginner to expert, and cover different tools and technologies we commonly use. (And probably some uncommon ones too). This is the first such post, but we'll collect them all on our blog under Challenges. Follow along!

The Circle Ring

We recently launched a redesign of the Durham Civil Rights History Project, a digital exhibit created by the Durham County Library. The site features a timeline with scroll-based animations—including circles containing each year that have an animated stroke going around the circle in a ring.

For the site itself, we achieved this using an SVG <circle> element with an animated stroke-dasharray property (which is a more semantic approach since it's a graphic element), but for this challenge, we'll just be using <div> elements.

How would you create the hover effect below using only <div> elements and CSS? (The CodePen just loads the example by default, so there's no spoilers unless you click to another tab). Feel free to use as many elements as necessary, and don't worry about semantics for this exercise. If you get stuck, there are some progressively helpful hints below.

These hints get progressively more helpful. Also, as with most things related to CSS, there's more than one way to tackle a problem. If you feel like you're onto something that goes in a different direction than these suggestions, you might be onto an alternative successful approach!