Skip Navigation

Web Development @programming.dev spartanatreyu @programming.dev 6 mo. ago

I made a thing

codepen.io Just a moment...

Single HTML element + CSS only

Inhale for 4 seconds
Hold for 4 seconds
Exhale for 4 seconds
Hold for 4 seconds

And repeat

Inspired by: https://quietkit.com/box-breathing/

Note: The current Safari version has a bugged linear() implementation that has been fixed in the upcoming version.

You're viewing a single thread.

3 comments

This is cool, but it bothers me that the inhale cycle doesn't end with completely filling the circle with blue. I feel unfulfilled, like when the DVD player screensaver doesn't hit neatly into the corner of the screen when it totally looks like it's going to
- Lol, well I could change it, but it was based on the gif at https://quietkit.com/box-breathing/
  
  I think it's because you're not supposed to expand your lungs so much that they feel like they're going to burst.
  
  But if you scroll to the bottom of the css and look at line 69, you can change transform: scale(90%); to transform: scale(100%); to see if you like it better.
  
  Haha nice, thanks!