css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. Very nice looking implementation, except I think it would feel more natural to interact directly with the donut rather than using a slider. I realise that's another whole level of difficulty, but might be something worth working toward for a sequel? Cheers!

  2. Hi @crowtower, thank you for the feedback!, you can check this out https://codepen.io/kaolay/pen/ZaMNqr , it uses a virtual joystick to interact with the donuts, it's quite easy to move the joystick on the donut (it was in the past but is not so easy to use because the finger cover in part the donut). It use canvas. Cheers!

  3. It seems like any value below 50% is not displayed correctly on the donut, because the pink remains at least half-way there, never entirely disappearing... just a heads up!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.